做PHP程序员这些年,我无意中发现了PHP许多的有用的技巧,不明显但值得一提。当然下面列出的并不是PHP的全部技巧,而只是一小部分,有待大家添加,欢迎留言。

1.检查字符串长度

我们经常会用strlen()来检查一个字符串的长度是否符合要求,比如

<?php
$string = 'testing';</div>
if(strlen($string)>=7)
    echo "The string '$string' is at least 7 characters long.";
else
    echo "The string '$string' is less than 7 characters long.";
<div>
其实我们有更快的方法,如下所示

<?php
$string = 'testing';</div>
if(isset($string[6]))
    echo "The string '$string' is at least 7 characters long.";
else
    echo "The string '$string' is less than 7 characters long.";

这里我们把$string当数组来处理,根据索引来判断第7个字符是否存在(isset)。注意,索引是从0开始的,即$sring[0]=’t’。

2. 用逗号连接Echo后面要输出的字符串

这一点我想大家基本都知道,速度上来说不会比用‘.’慢,直接看代码吧:


<?php
$string1 = 'test-string1';
$string2 = 'test-string2';
$string3 = 'test-string3';</div>
echo 'String #1: ', $string1, '<br />';
echo 'String #2: ', $string2, '<br />';
echo 'String #3: ', $string3, '<br />';

3.尽可能用单引号,而不是双引号

用单引号处理字符串时,PHP不用在字符串中区分变量。这不仅快(PHP5之前的版本快得比较明显,PHP5基本差不多),而且增强可读性,事实证明,用单引号更方便其他程序员阅读。
在以字符串做索引的数组中,也要使用单引号。如$hos[‘dog’]。

4. PHP可变变量

我们经常会碰到变量名也是变量的的情况 (即,一个变量的变量名可以动态的设置和使用)。 这个问题用PHP的可变变量(Variable Variables)处理非常方便。举例:


<?php
$var1 = 'nameOfVariable';
$nameOfVariable = 'This is the value I want!!!';</div>
echo $$var1;

5. 使用表单数组

表单变量名可以是数组的形式,如name[‘firstname’]或name[]。 Take a look at this HTML:


<label><input type="checkbox" name="hobbies[]" value="Sports" /> Sports</label><br />
<label><input type="checkbox" name="hobbies[]" value="Hiking" /> Hiking</label><br />
<label><input type="checkbox" name="hobbies[]" value="Swimming" /> Swimming</label><br />
<label><input type="checkbox" name="hobbies[]" value=" Watching Movies" /> Watching Movies</label><br />

当表单提交给PHP后,PHP会接受到类似如下结构的数组:


Array
(
    [hobbies] => Array
        (
            [0] => Sports
            [1] => Hiking
            [2] => Swimming
            [3] => Swimming
        )
)

6. PHP输出缓存

用PHP的ob系列函数,可以暂时将输出内容缓存起来,在其他的位置输出。也可以用此方法防止setcookie、header时提示前面已经有输出。举例:


<?php
ob_start();
echo 'Print to the screen!!!';  //如果不启用输出缓存,这句话在这里就会输出;我们启用输出缓存,此处不会输出,
$getContent = ob_get_contents();</div>
ob_end_clean();

// 输出一个别的字符串、或做一些其它的事情</div>
<div>echo '我在后面,但我先输出';</div>
<div>
// 现在输出缓存中的内容</div>
<div>echo 'Now: ' . $getContent;</div>
<div>
这些技巧以前都提过,可能大家都知道,那就供新手参考之用吧。欢迎补充。
另外,一些同类文章:

写任何编程代码,不同的开发者都会有不同的见解。但参考一下总是好的,下面是来自Javascript Toolbox发布的14条最佳JS代码编写技巧,Sofish翻译(1,2)。

1. 总是使用 ‘var’

在JavaScript中,变量不是全局范围的就是函数范围的,使用”var”关键词将是保持变量简洁明了的关键。当声明一个或者是全局或者是函数级(function-level)的变量,需总是前置”var”关键词,下面的例子将强调不这样做潜在的问题。

不使用 Var 造成的问题


var i=0; // This is good - creates a global variable
function test() {
   for (i=0; i<10; i++) {
      alert("Hello World!");
   }
}
test();
alert(i); // The global variable i is now 10!

因为变量函数中变量 i 并没有使用 var 使其成为函数级的变量,在这个例子中它引用了全局变量。总是使用 var 来声明全局变量是一个很多的做法,但至关重要的一点是使用 var 定义一个函数范围的变量。下面这两个方法在功能上是相同的:

正确的函数


function test() {
   var i=0;
   for (i=0; i<10; i++) {
      alert("Hello World!");
   }
}

正确的函数


function test() {
   for (var i=0; i<10; i++) {
      alert("Hello World!");
   }
}

2. 特性检测而非浏览器检测

一些代码是写来发现浏览器版本并基于用户正使用的客户端的对其执行不同行为。这个,总的来说,是一个非常糟的实践。更好的方法是使用特性检测,在使用一个老浏览器可能不支持的高级的特性之前,首先检测(浏览器的)是否有这个功能或特性,然后使用它。这单独检测浏览器版本来得更好,即使你知道它的性能。你可以在 http://www.jibbering.com/faq/faq_notes/not_browser_detect.html找到一个深入讨论这个问题的文章。

例子:


if (document.getElementById) {
   var element = document.getElementById('MyId');
}
else {
   alert('Your browser lacks the capabilities required to run this script!');
}

3. 使用方括号记法

当访问由执行时决定或者包括要不能用”.”号访问的对象属性,使用方括号记法。如果你不是一个经验丰富的Javascript程序员,总是使用方括号是一个不错的做法

对象的属性由两种固定的方法来访问:”.”记法和”[ ]“方括号记法:

“.”号记法


MyObject.property

“[ ]“方括号记法


MyObject["property"]

使用”.”号,属性名是硬代码,不能在执行时改变。使用”[ ]“方括号,属性名是一个通过计算属性名而来的字符串。字符串要以是硬代码,也可能是变量,甚至可以是一个调回一个字母串值的函数。如果一个属性名在执行产生,方括号是必须,如果你有 “value1″, “value2″, 和 “value3″这样的属性,并且想利用变量 i=2来访问

这个可以运行:


MyObject["value"+i]

这个不可以:


MyObject.value+i

并且在某些服务器端环境(PHP、Struts等)下,Form 表单被附加了 [ ] 号来表示 Form 表单在服务器端必须被当作数组来对待。如此,用”.”号来引用一个包含 [ ] 号的字段将不会执行,因为 [ ] 是引用一个 Javascript 数组的语法。所以,[ ] 号记法是必须的:

这个可以运行:


formref.elements["name[]"]

这个不可以:


formref.elements.name[]

推荐使用”[ ]“方括号记法是说当其需要时(明显地)总是使用它。当不是严格需要使用它的时候,它是一个私人的偏好和习惯。一个好的经验原则是,使用”.”号记法访问标准的对象属性,使用”[ ]“方括号记法访问由页面定义的对象属性。这样,document[“getElementById”]() 是一个完美可行的”[ ]“方括号记法用法,但 document.getElementById() 在语法上是首选,因为 getElementById 是一个 DOM 规范中定义的一个标准文档对象属性。混合使用这两个记法使哪个是标准对象属性,哪个属性名是由上下文所定义的,在代码中显得清晰明了:


document.forms["myformname"].elements["myinput"].value

这里,forms 是 document 的一个标准属性,而表单名 myformname 则是由页面所定义的。同时,elements 和 value 属性都是由规范所定义的标准属性。而 myinput 则是由页面所定义的。这页是句法让人非常容易理解(代码的内容),是一个推荐遵循的习惯用法,但不是严格原则。
4. 避免 ‘eval’

在Javascript中,eval()功能是一个在执行期中执行任意代码的方法。在几乎所有的情况下,eval 都不应该被使用。如果它出现在你的页面中,则表明你所做的有更好的方法。举一个例子,eval 通常被不知道要使用方括号记法的程序员所使用。

原则上,”Eval is evil(Eval是魔鬼)”。别使用它,除非你是一个经验丰富的开发者并且知道你的情况是个例外。
5. 正确地引用表单和表单元素

所有的 HTML 表单都应该有一个 name 属性。对于 XHTML 文档来说,name 属性是不被要求的,但 Form 标签中应有相应有 id 属性,并必须用 document.getElementById() 来引用。使用像 document.forms[0] 这样的索引方法来引用表单,在几乎所有情况下,是一个糟糕的做法。有些浏览器把文档中使用 form 来命名的元素当作一个可用的 form 属性。这样并不可靠,不应该使用。

下面这个例子用使用方括号和正确的对象引用方法来展示如何防止错误地引用一个表单的input:

正确引用表单 Input:


document.forms["formname"].elements["inputname"]

糟糕的做法:


document.formname.inputname

如果你要引用一个函数里的两个表单元素,较好的做法是先引用这个form对象,并将其储存在变量中。这样避免了重复查询以解决表单的引用:


var formElements = document.forms["mainForm"].elements;
formElements["input1"].value="a";
formElements["input2"].value="b";

当你使用 onChange 或者其他类似的事件处理方法,一个好的做法是总是通过一个引来把 input 元素本身引用到函数中来。所有 input 元素都带有一个对包含其在内的Form表单有一个引用:


<input type="text" name="address" onChange="validate(this)">

function validate(input_obj) {
   // 引用包含这个元素的form
   var theform = input_obj.form;
   // 现在你可以不需要使用硬代码来引用表单自身
   if (theform.elements["city"].value=="") {
      alert("Error");
   }
}

通过对表单元素的引用来访问表单的属性,你可以写一个不包含硬代码的函数来引用这个页面中任何一个有特定名的表单。这是一个非常好的做法,因为函数变得可重用。
6. 避免 ‘with’

Javascript 中的 with 声明在一个作用域的前端插入一个对象,所以任何属性/变量的引用将会倚着对象被首先解决。这通常被用作一个避免重复引用的快捷方法:

使用 with 的例子:


with (document.forms["mainForm"].elements) {
   input1.value = "junk";
   input2.value = "junk";
}

但问题在于程序员并没有方法来验证 input1 或 input2 实际上已经被当作 Form 元素数组的属性来解决。它首先以为这些名来检测属性,如果找不到,它将会继续(向下)检测这个作用域。最后,它在全局对象中尝试把input1 和 input2 作为一个全局对象来对待,而这以一个错误作为结尾。

变通的方法是:创建一个引用来减少引用的对象,并使用它来解决这些引用。

使用一个引用:


var elements = document.forms["mainForm"].elements;
elements.input1.value = "junk";
elements.input2.value = "junk";

7. 在锚点中使用 “onclick” 替代 “javascript: Pseudo-Protocol”

如果你想在 标签中触发Javascript 代码,选择 onclick 而非 JavaScript: pseudo-protocol;使用 onclick 来运行的 Javascript 代码必须返回 ture 或者false(or an expression than evalues to true or false [这句要怎么翻译呢? 我是这样理解的:一个优先性高于true 或 false 的表达式])来返回标签本身:如果返回 true,则锚点的 href 将被当作一个一般的链接;如果返回 false,则 href 会被忽略。这就是为什么”return false;” 经常被包含在 onclick 所处理代码的尾部。

正确句法:


<a href="javascript_required.html" onclick="doSomething(); return false;">go</a>

在这个实例中,”doSomething()” 函数(定义于页面的某个角落)将在被点击时调用。href 将永远不会被启用了Javascript 的浏览器访问。在你可以提醒Javascript 是必须的、而用户未启用之的浏览器中,文档 javascript_required.html 才会被加载。通常,当你确保用户将会开启 Javascript 支持,为尽量简化,链接将只包含 href=”#”。 而这个做法是不被鼓励的。通常有一个不错的做法是:可以提供没用启用 javascript 一个返回本地的页面。

有时,众多想要分情况来访问一个链接。例如,当一个用户要离开你的一个表单页面,而想先验证来确保没有东西被改变。在这个情况下,你的 onclick 将会访问一个返回询问链接是否应该被遵循的函数:

有条件的链接访问:


<a href="/" onClick="return validate();">Home</a>

function validate() {
 return prompt("Are you sure you want to exit this page?");
}

在这个实例中,validate() 函数必须只返回 ture 或 false。ture 的时候用户将被允许问题 home 页面,或 false 的时候链接不被访问。这个例子提示确认(其行为),以访问 ture 或 false,这完全由用户点击”确实”或者”取消”决定。

下面是一些”不应该”的例子。如果你在自己的页面中看到下面这样的代码,这是不正确的,需要被修改:

什么是不应该做的:


<a href="javascript:doSomething()">link</a>
<a href="#" onClick="doSomething()">link</a>
<a href="#" onClick="javascript:doSomething();">link</a>
<a href="#" onClick="javascript:doSomething(); return false;">link</a>

8. 使用一元 ‘+’ 号运算符使类型转向Number

在Javascript中,”+”号运算符同时充当数学加号和连接符。这会在form表单的域值相加时出现问题,例如,因为Javascript是一个弱类型语言,form 域的值将会被当作数组来处理,而你把它们”+”一起的时候,”+”将被当成连接符,而非数学加号。

有问题的例子:


<form name="myform" action="[url]">
<input type="text" name="val1" value="1">
<input type="text" name="val2" value="2">
</form>

function total() {
 var theform = document.forms["myform"];
 var total = theform.elements["val1"].value + theform.elements["val2"].value;
 alert(total); // 这个将会弹出 "12", 但你想要的是 3!
}

解决这个问题,Javascript 需要一个提示来让它把这些值当做数字来处理。你可以使用”+”号来把数组转换成数字。给变量或者表达式前置一个”+”号将会强制其当作一个数字来处理,而这也将使得数学”+”得以成功应用。

修改好的代码:


function total() {
 var theform = document.forms["myform"];
 var total = (+theform.elements["val1"].value) + (+theform.elements["val2"].value);
 alert(total); // This will alert 3
}

9. 避免 document.all

document.all 是由Microsoft 的 IE 所引进的,并不是一个标准的 Javascript DOM 特性。尽管大多数新的浏览器支持它以支持依赖于它的糟糕代码,(而)还有很多浏览器是不支持的。

并没有理由其他方法都不适用,而一个老的IE浏览器(<5.0)需要支持,而在Javascript中使用 document.all 作为一个折衷方法。 你并不需要使用 document.all 来检测其是不是IE浏览器,因为其他浏览器现在一般都支持。 只把 document.all 当做最后的选择:


if (document.getElementById) {
 var obj = document.getElementById("myId");
}
else if (document.all) {
 var obj = document.all("myId");
}

一些使用 document.all 的原则:

* 同尝试其他方法
* 当其作为最后的选择
* 当需要支持 5.0 版本以下的 IE 浏览器
* 总是使用 “if (document.all) { }” 来查看是否支持.

10. 不要在脚本代码块中使用HTML注释

在 Javascript 的旧日子(1995)里,诸如 Netscape 1.0 的一些浏览器并不支持或认识 <script> 标签。所以,当 Javascript 第一次被发布,需要有一个技术来让实些代码不被当做文本显示于旧版浏览器上。有一个”hack” 是在代码中使用 HTML 注释来隐藏这些代码。

使 HTML 注释并不好:


<script language="javascript">
<!--
   // code here
//-->
</script>

在今天,没有任何一个常用的浏览器会忽略掉 <script> 标签。因此,再没必要隐藏 Javascript 源代码。事实上,它还可以因为下面的理由,被认为是无益的:

* 在 XHTML 文档中,源代码将向所有浏览器隐藏并被渲染成无用的(内容);
* – 在 HTML 注释并不允许 ,这个会让任何递减操作将失效。

11. 避免乱用全局命名空间

一般很少需要全部变量和函数。全局使用将可能导致 Javascript 源文件文档冲突,和代码中止。因此,一个好的做法是在一个全局命名空间内采用函数性的封装。有多个方法可以完成这个任务,有此相对比较复杂。最简单的方法是创建一个全局对象,并把属性和方法指派给这个对象:

创建一个命名空间:


var MyLib = {}; // global Object cointainer
MyLib.value = 1;
MyLib.increment = function() { MyLib.value++; }
MyLib.show = function() { alert(MyLib.value); }

MyLib.value=6;
MyLib.increment();
MyLib.show(); // alerts 7

命名空间也可以使用 Closures(闭包?) 来创建,并且 Private Member Variables (私有变量?) 也可以伪装于 Javascript中。
12. 避免同步的 ‘Ajax’ 调用

当使用”Ajax”请求时,你要么选择异步模式,要么使用同步模式。当浏览器行为可以继续执行,异步模式将请求放在后台执行,同步模式则会等待请求完成后才继续。

应该避免同步模式做出的请求。这些请求将会对用户禁用浏览器,直至请求返回。一旦服务器忙,并需要一段时间来完成请求,用户的浏览器(或者 OS)将不能做任何其他的事,直至请求超时。

如果你觉得自己的情况需要同步模式,最大的可能是你需要时间来重新想一下你的设计。很少(如果有的话)实际上需要同步模式的 Ajax 请求。
13. 使用 JSON

当需要将数据结构存储成纯文本,或者通过 Ajax 发送/取回数据结构,尽可能使用 JSON 代替 XML。JSON (JavaScript Object Notation) 是一个更简洁有效的数据存储格式,并且不依赖任何语言(and is a language-neutral)。
14. 使用正确的 <script> 标签

不造成在 <script> 中的使用LANGUAGE 属性。一个合适的方式是创建如下的 Javascript 代码块:


<script type="text/javascript">
// code here
</script>

前两天朋友推荐一个小游戏《桥梁工程师》(http://games.sina.com.cn/littlegame/2009-07-07/1844123471.shtml),发现非常有意思!就一直玩到通关。

先看游戏介绍:

也许有的小游戏画面不够出色而被玩家忽视,也许有的小游戏名字取的毫无特色也被玩家无视。但既然是作为一款游戏,可玩性才是它的重点,所以今天我要 介绍的就是一款看似简单朴素但却够有趣好玩的游戏桥梁工程师。说实话当我在Mochiads上看到这款游戏的略缩图时我几乎认为这又是一款劣质小游戏~不 过当我玩过后看法很快改变了,其实这是款不错的集趣味技巧益智要素的小游戏。

游戏中玩家需要扮演一名桥梁工程师,设计并且架设能让人安全跨越山谷的桥梁,使游戏中的搬运工人可以顺利的完成他们的搬运任务。如果桥梁架设的有问题,他们可是会坠下悬崖的……


这游戏共24关,基本算是越往后越难吧,但个人感觉18关是最难的,第二难是21关。

全部24关的图都贴上来太麻烦,干脆压缩了一下,谁需要就下载吧。点此下载-桥梁工程师通关图

贴张图吧,第一张是我认为第二难的21关的设计图,为什么不贴第一难的呢?因为我觉得18关我做的不是很成功,也就是侥幸过关,这个21关的我感觉还是不错的(猛击图片看大图):

21

然后放一张通关后的图片(没啥新意,就是原来显示“NEXT LEVEL”的地方改成“THE END”):

end

在译言上看到这篇文章,才知道原来这项技术叫做CSS Sprites。这篇文章介绍的很全了,转载之,供大家学习吧.

转自http://www.yeeyan.com/articles/view/oc/39032

CSS Sprites并没有一个确定的中文翻译,通常被意译为“CSS图像拼合”或“CSS贴图定位”。CSS Sprites并不是一门新技术,目前它已经在网页开发中发展得较为成熟。CSS Sprites并不是什么金科玉律,但在很多情况下,它有着一定的优势,最重要的是它可以减轻服务器的负载,提高网页加载速度。

本文系统的介绍了CSS Sprites的概念、用途和用法,相信本文会解决你在使用CSS Sprites中遇到的大部分问题。

什么是CSS Sprites?

“Sprite”(精灵)这个词在计算机图形学中有它独特的定义,由于游戏、视频等画质越来越高,必须有一种技术可以智能的处理材质和贴图,并且要 同时保持画面流畅。“Sprite”就是这样一种技术,它将许多图片组合到一个网格上,然后通过程序将每个网格的内容定位到画面上。

Sprite被定位到一副静态图片上,并且通过简单的程序或硬件即可正确定位到画面上,一幅幅图片就像是被“变”出来的,他们并没有单独占用内存,所以被取名为“Sprite精灵”。

Screenshot

上图是口袋妖怪的组合图片,可以点这里欣赏更多

时间进行到2000年,Web设计向着精致、巧妙的方向发展。设计师们开始考虑使用非Javascript的方 式制作鼠标滑过、悬停菜单的效果,这时CSS Sprite应运而生,它基于同上文提到的游戏Sprite同样的原理,并且使用CSS更容易控制,很快的流行开来。

2004年,Dave Shea 提出了一种使用CSS控制组合图片的方案 ,将许过小的图片组合在一起,使用css定义背景属性,来控制图片的显示位置和方式。

当页面加载时,不是加载每个但以图片,而是一次加载整个组合图片。这是一个了不起的改进,它大大减少了HTTP请求的次数,减轻服务器压力,同时缩短了悬停加载图片所需要的时间延迟,使效果更流畅,不会停顿。

CSS Sprites用在哪里?

CSS Sprites可以用在很多场合,大字那个网站可以将许多单独的图片,以有机的方式组合起来,从而使其便于维护和更新。图片之间通常会留出较大的空白,使 得图片不会影响网页的内容。但同时CSS Sprite大多使用于较固定的像素定位中,它的弹性较差,收到定位等因素的制约。所以,你需要在可维护性vs降低负载之间权衡利弊,选择最适合你的项目 的方式。

下面是一些CSS Sprites的使用范例:

Xing

这个网站将一些按钮、图标以及LOGO做成了CSS Sprites:

Screenshot

Amazon
亚马逊使用的大幅、整齐巧妙的CSS Sprites:

Screenshot

Apple
苹果网站使用CSS Sprites来制作导航菜单的鼠标悬停效果:

Screenshot

YouTube
YouTube使用了一个2008像素高的CSS Sprites:

Screenshot

CNN
CNN使用了非常简单谨慎的方案:

Screenshot

Digg
Digg的方案比较复杂:

Screenshot

Yahoo
Yahoo将他们漂亮的图标等距离排布起来:

Screenshot

Google
Google使用了极其简化的方案:

Screenshot

Dragon Interactive
一个丰富多彩的CSS Sprites方案:

Screenshot

TV1.rtp.pt
一个很大很酷的CSS Sprites方案

Screenshot

CSS Sprites常用来合并频繁使用的图形元素,如导航、LOGO、分割线、RSS图标、按钮等。通常它们不会作为网页内容出现,因为涉及内容的图片并不是每个页面都一样。

关于CSS Sprites的文章

CSS Sprites: Image Slicing’s Kiss of Death

中文版 http://www.liquidroc.name/post/my_view_on_css_sprites.html

最权威的CSS Sprites介绍文章之一

Screenshot

CSS Sprites: What They Are, Why They’re Cool And How To Use Them
一片图文并茂的介绍文章

Screenshot

How Yahoo.com and AOL.com Improve Web Performance With CSS Sprites
介绍Yahoo、AOL等网站使用CSS Sprites降低服务器压力的案例。

What Are CSS Sprites?
又一片介绍文章

Screenshot

Sprite Optimization
Dave Shea的思考:是不是真的有必要简历复杂的大型CSS Sprites?答案是不!不要搞得太复杂,找到一个折中的方案才是正道。

CSS Sprites

Creating Easy and Useful CSS Sprites

一篇教程,其源文件可下载学习

Screenshot

Fast Rollovers Without Preload

一个快速翻转效果的例子

Screenshot

CSS Sprites + Rounded corners

另一个例子:使用CSS Sprites实现背景圆角

Screenshot

CSS Image Sprites

一篇教程

Optimize Your Website Using CSS Image Sprites

非常详细的教程,介绍了CSS Sprites的原理和应用方法。

Screenshot

Animated GIF For CSS Sprites

一个比较特别的应用

Screenshot

Image Sprite Navigation With CSS

怎样制作简单的悬停菜单效果

Screenshot

Advanced CSS Menu

还是悬停效果

Screenshot

Creating and Using CSS Sprites

一个非常基本的教程

CSS Sprites Screenshot

CSS Sprites视频教程

How to Use CSS Sprites
David Perel解释了CSS Sprites的基本概念,并演示了如何在网页中使用它,长度:10分钟

Creating Rounded Buttons With CSS Sprites
继续上面的教程,展示了如何制作滑动按钮

Exactly How to Use CSS Sprites
Andres Fernandez  展示了 CSS sprites如何加快加载时间和减少请求次数

How To Use CSS Sprites
Chris Coyier 展示了一个 CSS sprites的范例,他将8幅图片组合在了一起,并且使用jQuery制作了一个小程序。

Faster Page Loads With Image Concatenation
对于复杂的网站,减少图片请求数量可以减轻服务器负担,这是许多站长所希望看到的。

CSS Image Sprites In 10 Minutes
另一个关于导航菜单的教程

CSS: Using Percentages in Background-Image
介绍背景图片定位的方法

利用CSS Sprites制作图像映射(image maps)

使用CSS Sprites,你可以对一个对象的一小部分加载翻转效果,使用负值的背景图片位置( background-position ),你可以创建基于CSS的图像映射,下面的文章讲述了这一技术:

CSS Image Maps Using Sprites
一个基于CSS的图像映射的简单例子。你可以同传统的方式对比一下优劣。

Screenshot

City Guide Map Using Sprites
另一个横向定位的例子

Screenshot

Advanced Map Using Sprites
一个更高级的技术。

Screenshot

CSS Sprites技术

CSS Sprites 2
Dave Shea 使用jQuery扩展了经典的CSS Sprites, 他的技术可以让不同的链接之间使用组合图片,即使用户禁用了Javascript。

CSS Sprites2 Refactored: Building an Unobtrusive jQuery Plug-In
Joel Sutherland 制作的jQuery插件,整理了Dave Shea的功能,并简化了初始化设置。

CSS Sprites Screenshot

Background Repeat and CSS Sprites
什么情况下使用CSS Sprites

CSS Sprite: Photoshop Script Combines Two Images for CSS Hover
这是一个可以导入Photoshop的动作设置,可以让你快速制作翻转按钮的背景图片。

CSS Sprites Screenshot

Extending CSS Spriting
Jennifer Semtner 扩展了经典CSS Sprites技术,并讲述应该在什么时候使用它。

Sliding Doors Meets CSS Sprites
滑动门技术 “Sliding Doors of CSS.”

How to Preload Images When You Can’t Use CSS Sprites
如何处理CSS Sprites对网页内容的影响

JavaScript Sprite Animation Using jQuery
Alex Walker 结合CSS Sprites和jQuery,实现了“打开页面”的效果

CSS Sprites Screenshot

IE6, CSS Sprites and Alpha Transparency
Julien Lecomte 讲述IE6下的透明hack问题

CSS Sprite 制作工具

Data URI Sprites
DURIS (Data URI [CSS] Sprites) 是一个管理网页图片的新工具,它可以最大限度的帮助你减少背景图片的数量,减少请求数。

Screenshot

Spritr
一个生成CSS Sprites的简单工具

Sprite Creator 1.0
同上

CSS Sprite Generator
制作CSS sprites 的Drupal插件

CSS Sprites Generator
这个工具允许你上传多张图片生成CSS Sprites和CSS代码

Projekt Fondue CSS Sprite Generator
它具有忽略重复图像,调整图像精度,确定横向和纵向偏移,指定背景色和透明度,指定CSS前缀等众多功能。

Screenshot

SmartSprites
基于java的桌面程序

你可以继续以你自己的方式编写CSS和使用图像,有一个工具可以自动为你设置CSS Sprites,这里是PHP 版本 ,它是开源的,具体可以看: Chris Brainard’s Sprite Creator 1.0.

附:CSS属性background-position(图像背景位置)该如何设置

background-position(图像背景位置)这个属性是CSS中非常重要的属性。

根据CSS规范,background-position属性包含了两个(可选的)变量:水平位置(horizontal)和垂直位置(vertical),例如:

  1. .introduction { 
  2. background-image: url(bg.gif); 
  3. background-position: [horizontal position] [vertical position]; 
  4.     } 
	.introduction { 		background-image: url(bg.gif); 		background-position: [horizontal position] [vertical position]; 		}[/source]

使用这个属性,你可以定义块级元素的背景图像位置,可以使用%百分比或px像素为单位来定义图像开始的位置,也可以使用关键字:top left, top center, top right, center left, center center, center right, bottom left, bottom center, bottom right.

在“ background-position: x% y%; ”这样一个语句中,x%指水平偏移,y%指垂直偏移,左上角是:0%,0%,右下角是:100%,100%,默认的是50%。

例如,你可以这样定义:

  1. ul li { 
  2. background-image: url(bg.gif); 
  3. background-position: 19px 85px; 
  4.     }, 
	ul li { 		background-image: url(bg.gif); 		background-position: 19px 85px; 		},[/source]

这样背景图片就被定位到了距离左侧19像素,距离上边85像素。

关于这个属性,可以在这里找到更详细的资料:background-position (CSS property)

英文原文:Smashing Magazine

中文翻译:Oncoding编码营