$('.flipbox:not(:first)').hide();

代码在非 IE 浏览器下没有问题，即除了第一个含有 flipbox 类的元素外，其他的隐藏，但在 IE 里却全部隐藏了。

经过测试，除了上面的写法在 IE 下有问题外，下面的几种写法在 IE 下也有问题：

$('.flipbox:not(:first)');
$('.flipbox:not(:last)');
$('.flipbox:not(:even)');
$('.flipbox:not(:odd)');
$('.flipbox:not(:eq(1))');
$('.flipbox:not(:gt(1))');
$('.flipbox:not(:lt(1))');

很奇怪的是：如果把 className 换成 tagName，如上面把 .flipbox 换成对应的标签名，又不会出现问题。当然，换成标签名的话，你要确定不会选择到其他不需要选择的标签，以免产生混乱，出现其他问题。

对于这个问题，我的办法有两个：

1. 与样式结合，改变写法
2. 用 .ont 代替 :not

对于第一种方法，我们可以在样式里定义：

.flipbox { display:none}

而 jQuery 代码则写成：

$('.flipbox:first').show();

但是这种方法的可访问性低，如果访客禁止了 javascript，那他看不到主要内容。

对于第二种方法，jQuery 代码可写成：

$('.flipbox').not($(.flipbox:first).show();

这种方法的可访问性较好，即使访客禁止了 javascript，但他能看到所有内容。所以最后我选择了这种方法。

这里做了一个综合的例子，你可以在 IE 和非 IE 浏览器下看看他们的不同，查看 Demo

其实还有一个奇怪的现象，就是某种情况下给类选择器前面加上标签名，也不会出现问题，而这种情况就是这些类不能被相同的标签包裹。查看 Demo

很巧，在浏览愚人码头的博客的时候发现他早就发现了这个问题，并且也提出了解决方法，有兴趣的可以点击这里查看。

©2012 一起CSS. All Rights Reserved.

相关日志

• Internet Explorer 1.0到9.0截图画廊 (2)
• 12月份浏览器市场排行榜 (1)
• 10月浏览器市场排行 Chrome增长快 (1)
• 7月份全球主流浏览器市场份额 (2)
• jQuery插件Flip (4)
• IE全球市占率重新超过60% (0)
• jQuery插件Cloud Zoom (3)
• “导”字导致样式失效 (5)
• IE的市场份额下降到历史最低 (3)
• jQuery EasyUI (6)

Flip 是一个基于 jQuery 的插件，它模仿流行的卡片翻转的效果，可以轻易的让元素在左右上下四个方向翻转。先看看效果吧，查看 Demo

Flip 同时基于 jQuery UI ，所以，要使用 Flip 需要引入 jQuery 和 jQuery UI 。

Flip 使用很简单，只需让元素调用 flip 方法就可以了。

$('.flipbox').flip({})

不过，仅仅只是单纯的调用 flip 方法的话，很多属性是默认的，也许不一定符合你的要求，你可以根据自己的要求、喜好添加相应的属性，Flip 提供的全部属性有：

content

定义翻转后元素的新内容，可以是：文本 、 HTML 或 jQuery 对象

direction

定义元素翻转的方向，可选：tb/bt/lr/rl ，默认为 tb

color

定义元素翻转后的背景颜色，默认是 #999999 （从 Firebug 查看得知）

speed

定义翻转的速度，默认为 500 毫秒

onBefore

定义元素翻转之前的回调函数

onAnimation

定义元素翻转到一半时的回调函数

onEnd

定义元素翻转之后的回调函数

好了，到这里已经介绍完毕，具体应用大家可以根据自己的喜好或发挥想象，这里我做了一个简单的类似幻灯片的翻页效果，查看 Demo

如果你想了解关于 Flip 的原文介绍或最新动态，你可以前往该插件的官方地址：http://lab.smashup.it/flip/

©2012 一起CSS. All Rights Reserved.

相关日志

• jQuery插件Cloud Zoom (3)
• jQuery过滤选择器:not在IE中的bug (2)
• jQuery EasyUI (6)
• 修改：自动播放的jQuery幻灯片 (13)
• 自动播放的jQuery幻灯片 (16)
• jQuery写的一个幻灯片 (20)
• 用jQuery去除链接虚线 (20)
• 用标准W3C盒子模型 (2)

目前，Cloud Zoom 的最新版本是 1.0.2，我们就此版本为例（1.0.2与之前版本有所不同），来看看 Cloud Zoom 是如何工作的。首先，当然是引入插件以及附带的 CSS 文件，当然，你喜欢的话，样式可以自己编写。然后编写 XHTML 代码：

<a href="http://www.17css.com/works/10/B/images/bigimage03.jpg" class="cloud-zoom">
	<img src="http://www.17css.com/works/10/B/images//smallimage-3.jpg" alt="" />
</a>

与其他插件不一样，Cloud Zoom 不需要再在 js 代码里调用了，只需要给 a 标签加上 class 为 “cloud-zoom” 就可以实现调用。看看上边代码产生的效果吧，查看Demo1

只加一个 class 效果是默认的，想要其他效果的话，需要给 a 标签的 rel 属性上加上一定的值，具体的值如下：

再看几个加上了非默认 rel 属性值的例子吧，Demo2 Demo3 Demo4

如果你认为要在 a 标签里加上 rel 属性不好，没做做到 “js” 与 XTHML 分离的话，那就把他们分离，把工作交给 js 吧：

$(function(){
	$('.cloud-zoom').attr('rel','tint:"#f00"');
})

不过要注意顺序哦，必须是：

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(function(){
	$('.cloud-zoom').attr('rel','tint:"#f00"');
})
</script>
<script type="text/javascript" src="cloud-zoom.1.0.2.min.js"></script>

因为 Cloud Zoom 在加载的时候必须得到相应的 rel 属性值，如果之后再写上 rel 属性值，人家可不会再去读取哦。

至于到底是把 rel 写在 XHTML 里还是 js 里，就看个人喜好吧，作者是把 rel 直接写在 XHTML 里的。

另外要注意的是：

• rel 属性中涉及到数值的都不要单位，否则插件则运行不了
• rel 的最后一个属性值后面不要逗号，否则 IE6 、IE7 下插件运行不了

最后，附上此插件的主页地址：http://www.professorcloud.com/mainsite/cloud-zoom.htm，里面也有相关说明。

©2012 一起CSS. All Rights Reserved.

相关日志

• jQuery插件Flip (4)
• jQuery过滤选择器:not在IE中的bug (2)
• jQuery EasyUI (6)
• 修改：自动播放的jQuery幻灯片 (13)
• 自动播放的jQuery幻灯片 (16)
• jQuery写的一个幻灯片 (20)
• 用jQuery去除链接虚线 (20)
• 用标准W3C盒子模型 (2)

ExtJs 和 jQuery EasyUI 对比。

jQuery EasyUI 树形菜单、表格应用、弹出窗口等。

jQuery EasyUI 弹出对话框。

jQuery EasyUI 遮罩弹出窗口。

怎么样？不错吧。那就赶快去体验吧！

jQuery EasyUI 的官方地址是：http://jquery-easyui.wikidot.com/

©2012 一起CSS. All Rights Reserved.

相关日志

• jQuery过滤选择器:not在IE中的bug (2)
• jQuery插件Flip (4)
• jQuery插件Cloud Zoom (3)
• 修改：自动播放的jQuery幻灯片 (13)
• 自动播放的jQuery幻灯片 (16)
• jQuery写的一个幻灯片 (20)
• 用jQuery去除链接虚线 (20)
• 用标准W3C盒子模型 (2)

要修复上面的问题，加上一条判断语句即可：如果有动画正在执行，鼠标移到缩略图上就不执行动画函数。具体代码如下（和原来的相比就多了一句判断）：

var theInt = null;
var curclicked = 0;

$(function(){
	$('#transparence').css('opacity','0.4');
	$('#pic_list img').css({'opacity':'0.6'});
	$('#pic_list img:eq(0)').css({'top':'0','opacity':'1'});
	$('#pic_list a').click(function(){return false});
	t(0);
	$('#pic_list img').mouseover(function(){
		if($('#this_pic').attr('src') == $(this).attr('src')) return;
		if(!$(this).is(':animated')){
			t($('#pic_list img').index($(this)));
		}
	})
})

t = function(i){
	clearInterval(theInt);
	if( typeof i != 'undefined' )
	curclicked = i;
		$('#this_pic').fadeOut(0).fadeIn(500).attr('src',$('#pic_list img').eq(i).attr('src'));
		$('#this_a').attr('href',$('#pic_list img').eq(i).parents('a').attr('href'));
		$('#this_a').attr('title',$('#pic_list img').eq(i).parents('a').attr('title'));
		$('#pic_list img').eq(i).parents('li').nextAll('li').find('img').animate({top:18,opacity:0.6},500);
		$('#pic_list img').eq(i).parents('li').prevAll('li').find('img').animate({top:18,opacity:0.6},500);
		$('#pic_list img').eq(i).animate({top:0},500).css('opacity','1');
	theInt = setInterval(function (){
		i++;
		if (i > $('#pic_list img').length - 1) {i = 0};
		$('#this_pic').fadeOut(0).fadeIn(500).attr('src',$('#pic_list img').eq(i).attr('src'));
		$('#this_a').attr('href',$('#pic_list img').eq(i).parents('a').attr('href'));
		$('#this_a').attr('title',$('#pic_list img').eq(i).parents('a').attr('title'));
		$('#pic_list img').eq(i).parents('li').nextAll('li').find('img').animate({top:18,opacity:0.6},500);
		$('#pic_list img').eq(i).parents('li').prevAll('li').find('img').animate({top:18,opacity:0.6},500);
		$('#pic_list img').eq(i).animate({top:0},500).css('opacity','1');
	},3000)
}

查看Demo

©2012 一起CSS. All Rights Reserved.

相关日志

• 自动播放的jQuery幻灯片 (16)
• jQuery写的一个幻灯片 (20)
• jQuery过滤选择器:not在IE中的bug (2)
• jQuery插件Flip (4)
• jQuery插件Cloud Zoom (3)
• jQuery EasyUI (6)
• 用jQuery去除链接虚线 (20)
• 用标准W3C盒子模型 (2)

结构和样式都没有变，只有 jQuery 代码有变，具体的代码如下：

var theInt = null;
var curclicked = 0;

$(function(){
	$('#transparence').css('opacity','0.4');
	$('#pic_list img').css({'opacity':'0.6'});
	$('#pic_list img:eq(0)').css({'top':'0','opacity':'1'});
	$('#pic_list a').click(function(){return false});
	t(0);
	$('#pic_list img').mouseover(function(){
		if($('#this_pic').attr('src') == $(this).attr('src')) return;
		t($('#pic_list img').index($(this)));
	});
});

t = function(i){
	clearInterval(theInt);
	if( typeof i != 'undefined' )
	curclicked = i;
		$('#this_pic').fadeOut(0).fadeIn(500).attr('src',$('#pic_list img').eq(i).attr('src'));
		$('#this_a').attr('href',$('#pic_list img').eq(i).parents('a').attr('href'));
		$('#this_a').attr('title',$('#pic_list img').eq(i).parents('a').attr('title'));
		$('#pic_list img').eq(i).parents('li').nextAll('li').find('img').animate({top:18,opacity:0.6},500);
		$('#pic_list img').eq(i).parents('li').prevAll('li').find('img').animate({top:18,opacity:0.6},500);
		$('#pic_list img').eq(i).animate({top:0},500).css('opacity','1');
	theInt = setInterval(function (){
		i++;
		if (i > $('#pic_list img').length - 1) {i = 0};
		$('#this_pic').fadeOut(0).fadeIn(500).attr('src',$('#pic_list img').eq(i).attr('src'));
		$('#this_a').attr('href',$('#pic_list img').eq(i).parents('a').attr('href'));
		$('#this_a').attr('title',$('#pic_list img').eq(i).parents('a').attr('title'));
		$('#pic_list img').eq(i).parents('li').nextAll('li').find('img').animate({top:18,opacity:0.6},500);
		$('#pic_list img').eq(i).parents('li').prevAll('li').find('img').animate({top:18,opacity:0.6},500);
		$('#pic_list img').eq(i).animate({top:0},500).css('opacity','1');
	},3000)
}

查看Dome

©2012 一起CSS. All Rights Reserved.

相关日志

• 修改：自动播放的jQuery幻灯片 (13)
• jQuery写的一个幻灯片 (20)
• jQuery过滤选择器:not在IE中的bug (2)
• jQuery插件Flip (4)
• jQuery插件Cloud Zoom (3)
• jQuery EasyUI (6)
• 用jQuery去除链接虚线 (20)
• 用标准W3C盒子模型 (2)

XHTML 代码：

<div id="slide">
	<a href="#" id="this_a"><img src="images/1.jpg" id="this_pic" alt="" /></a>
	<ul id="pic_list">
		<li><a href="http://www.qq.com"><img src="images/1.jpg" alt="" /></a></li>
		<li><a href="http://www.sina.com"><img src="images/2.jpg" alt="" /></a></li>
		<li><a href="http://www.163.com"><img src="images/3.jpg" alt="" /></a></li>
		<li><a href="http://www.baidu.com"><img src="images/4.jpg" alt="" /></a></li>
		<li><a href="http://www.17css.com"><img src="images/5.jpg" alt="" /></a></li>
	</ul>
	<span id="transparence"></span>
</div>

说明：#slide是最外面的容器，#this_pic是要显示的大图，#pic_list是图片缩略图，#transparence是一个半透明的层，因为想给#pic_list和里的缩略图应用半透明效果，但半透明效果会继承，无法更改，所以模拟了这个层。

CSS 代码：

#slide {
	position:relative;
	width:740px;
	height:240px;
	margin:20px auto;
}
#pic_list {
	position:absolute;
	left:0;
	bottom:0;
	width:100%;
	list-style: none;
	overflow:hidden;
	z-index:2;
}
#pic_list li {
	float:left;
	width:100px;
	height:52px;
	padding-top:10px;
}
#pic_list li img {
	position:absolute;
	top:18px;
	width:65px;
	height:35px;
	margin:0 20px;
	border:1px solid #fff;
}
#this_pic {
	position:absolute;
	width:100%;
	height:100%;
	border:none;
}
#transparence {
	position:absolute;
	left:0;
	bottom:0;
	width:100%;
	height:50px;
	border-top:1px solid #fff;
	background:#000;
	z-index:1;
}

jQuery 代码：

$(function (){
	$('#pic_list img').mouseover(function(){
	//如果鼠标移到的缩略图的地址和大图地址相等，则返回
	if($('#this_pic').attr('src') == $(this).attr('src')) return;
		//大幅图片淡出
		$('#this_pic').fadeOut(0).fadeIn(500).attr('src',$(this).attr('src'));
		//把缩略图的链接地址传给大图的链接
		$('#this_a').attr('href',$(this).parents('a').attr('href'));
		//除此之外的缩略图位置和半透明还原
		$(this).parents('li').nextAll('li').find('img').animate({top:18,opacity:0.6},500);
		$(this).parents('li').prevAll('li').find('img').animate({top:18,opacity:0.6},500);
		//当前的缩略图上升动画效果
		$(this).animate({top:0},500).css('opacity','1');
	});
});
//初始化
$(function(){
	//模拟层半透明
	$('#transparence').css('opacity','0.4');
	//所有缩略图半透明
	$('#pic_list img').css({'opacity':'0.6'});
	//第一张缩略图的位置和不透明
	$('#pic_list img:eq(0)').css({'top':'0','opacity':'1'});
	//阻止缩略图链接
	$('#pic_list a').click(function(){return false});
});

为了通过验证，把半透明的代码写在 JS 里，半透效果的 CSS 代码不能通过验证就不用说了吧，而且要兼容浏览器得写三句。

查看Dome

代码不多，但效果我觉得还可以。如果您觉得有什么地方不够好，或有更好的实现方法，欢迎留言。

©2012 一起CSS. All Rights Reserved.

相关日志

• 修改：自动播放的jQuery幻灯片 (13)
• 自动播放的jQuery幻灯片 (16)
• jQuery过滤选择器:not在IE中的bug (2)
• jQuery插件Flip (4)
• jQuery插件Cloud Zoom (3)
• jQuery EasyUI (6)
• 用jQuery去除链接虚线 (20)
• 用标准W3C盒子模型 (2)

$(function(){
	$('a').bind('focus',function(){
		if(this.blur){ //如果支持 this.blur
			this.blur();
		};
	});
});

细心的您可能发现了按钮点击后也会出现虚线框，那就一起把它去掉吧：

$(function(){
	$('a,input[type="button"],input[type="submit"]').bind('focus',function(){
		if(this.blur){ //如果支持 this.blur
			this.blur();
		};
	});
});

查看Demo

很简单吧，简单的都没有什么技术含量了。。。

©2012 一起CSS. All Rights Reserved.

相关日志

• jQuery过滤选择器:not在IE中的bug (2)
• jQuery插件Flip (4)
• jQuery插件Cloud Zoom (3)
• jQuery EasyUI (6)
• 修改：自动播放的jQuery幻灯片 (13)
• 自动播放的jQuery幻灯片 (16)
• jQuery写的一个幻灯片 (20)
• 用标准W3C盒子模型 (2)

从上图可以看到标准 W3C 盒子模型的范围包括 margin、border、padding、content，并且 content 部分不包含其他部分。

IE 盒子模型

从上图可以看到 IE 盒子模型的范围也包括 margin、border、padding、content，和标准 W3C 盒子模型不同的是：IE 盒子模型的 content 部分包含了 border 和 pading。

例：一个盒子的 margin 为 20px，border 为 1px，padding 为 10px，content 的宽为 200px、高为 50px，如果用标准 W3C 盒子模型解释，那么这个盒子需要占据的位置为：宽 20*2+1*2+10*2+200=262px、高 20*2+1*2*10*2+50=112px，盒子的实际大小为：宽 1*2+10*2+200=222px、高 1*2+10*2+50=72px；如果用IE 盒子模型，那么这个盒子需要占据的位置为：宽 20*2+200=240px、高 20*2+50=70px，盒子的实际大小为：宽 200px、高 50px。

那应该选择哪中盒子模型呢？当然是“标准 W3C 盒子模型”了。怎么样才算是选择了“标准 W3C 盒子模型”呢？很简单，就是在网页的顶部加上 DOCTYPE 声明。如果不加 DOCTYPE 声明，那么各个浏览器会根据自己的行为去理解网页，即 IE 浏览器会采用 IE 盒子模型去解释你的盒子，而 FF 会采用标准 W3C 盒子模型解释你的盒子，所以网页在不同的浏览器中就显示的不一样了。反之，如果加上了 DOCTYPE 声明，那么所有浏览器都会采用标准 W3C 盒子模型去解释你的盒子，网页就能在各个浏览器中显示一致了。

再用 jQuery 做的例子来证实一下。

代码1：

查看效果

上面的代码没有加上 DOCTYPE 声明，在 IE 浏览器中显示“IE盒子模型”，在 FF 浏览器中显示“标准 W3C 盒子模型”。

代码2：

查看效果

代码2 与代码1 唯一的不同的就是顶部加了 DOCTYPE 声明。在所有浏览器中都显示“标准 W3C 盒子模型”。

所以为了让网页能兼容各个浏览器，让我们用标准 W3C 盒子模型。

©2012 一起CSS. All Rights Reserved.

相关日志

• jQuery过滤选择器:not在IE中的bug (2)
• jQuery插件Flip (4)
• jQuery插件Cloud Zoom (3)
• jQuery EasyUI (6)
• 修改：自动播放的jQuery幻灯片 (13)
• 自动播放的jQuery幻灯片 (16)
• jQuery写的一个幻灯片 (20)
• 用jQuery去除链接虚线 (20)