Hiro技术站 » CSS

CSS:区分IE版本的三个方法

Hiro — Wed, 02 Mar 2011 02:59:37 +0000
虽然我们从心理上都不愿意去处理IE的bug，但我们不得不面对老板和浏览者们仍然在使用IE。介于不同浏览器有不同的渲染器，这往往会使开发者们感到很沮丧。我们通常使用IE条件判断语言来处理IE的CSS问题，但其实还是有其他的一些方法来处理IE的CSS bug的。
一、IE条件判断语句

IE条件判断语句也许是用的最多的区分IE版本(IE6, IE7, IE8)的办法了。看看下面用来区分IE不同版本的代码：
* 二、CSS规则（IE CSS hacks）另一个办法就是在样式文件中声明只有IE识别的CSS规则。比如，在CSS属性前置一个”*”区分IE7和低版本，而前置一个”_”则区分IE6及低版本。但是，很多时候这个方法不被推荐，因为这些CSS规则并不能被W3C CSS 验证成功。 * IE8 及低版本: 在CSS属性后置”\9″, 如 height:1000px\9; * IE7 及低版本: 在CSS属性前置”*”, 如 *height:1000px; * IE6 及低版本: 在CSS属性前置”_”, 如 _height:1000px; 1 2 3 4 5 6 7 8 9 .box { background: gray; /* standard */ background: pink\9; /* IE 8 and below */ *background: green; /* IE 7 and below */ _background: blue; /* IE 6 */ } 三、HTML条件判断，给出不同的className 第三个办法是由Paul Irish发起的。它实现的办法是通过IE条件判断来给HTML设置不同的className，然后在CSS中通过给不同的className下的后代设置不同的样式即可实现。这个办法比较可行，也不会有任何W3C验证的问题。 1 2 3 4 5 6 本文翻译自：CSS Specific for Internet Explorer PS:这三种办法我个人都用过，只是第三中办法我不是给HTML便签设置不同的className,而是在BODY中所有HTML代码的最外层多嵌套了一层DIV。呵呵，想想，还是给HTML或BODY标签设置不同className比较合算。至少不会有多余的标签。扩展阅读： About Conditional Comments 你也许会喜欢阅读这些： 2010年05月17日 -- CSS:通过一个样式表区分IE的各个版本 (11) 2010年03月8日 -- CSS:CSS3基础（附图） (12) 2009年09月3日 -- CSS:分享一些常用的css技巧 (8) 2010年11月25日 -- CSS:position属性定位总结 (27) 2010年09月2日 -- 示例:Selectbox模拟实现效果 (22) 2010年06月12日 -- CSS:Firefox 4 将支持CSS3 calc方法 (18) 2010年03月15日 -- jQuery:揭露jQuery的隐藏功能 (5) 2010年02月20日 -- Wordpress:如何将GoogleBuzz数据插入到博客中 (11) 2010年01月22日 -- jQuery:1.4新版本中你应该知道的15个新特性(二) (7) 2010年01月20日 -- jQuery:1.4新版本中你应该知道的15个新特性(一) (6)


CSS:position属性定位总结
Hiro — Thu, 25 Nov 2010 03:37:42 +0000
在写这篇文章之前，我一直以为css中position定位时一直是读取最后出现两个方位属性的值。昨天给一同事演示jQuery的animate特效时，我试图通过js来控制已经设置过top和left的DIV的right属性为0，以达到滑动到最右边的效果。结果没有效果，很是郁闷。
早上写了一些关于postion的样式做测试，发现不论给某个DIV设置了多少个方位（当然最多到4个），也不管存放的顺序是如何颠倒，它的读取顺序依旧是top-bottom-left-right.很符合日常所说的“上下左右”规则。这与我之前理解的不相符合。
另外我们也知道给一个标签设置magin、padding、border等时，它的顺序是“上右下左”，这个顺序和方位读取顺序也没有类似的关系。为此我总结了一份Demo页面，供大家对比方位读取顺序，也算是一个总结笔记吧。
download demo
附文中jQuery的animate示例：
Html代码：

1
2
3
4
5


	
	


CSS代码：

1
2
3
4
#box { width:800px; height:200px; position:relative; padding:10px 0; border:1px dashed #eee;}
.box { width:120px; height:40px; border:1px solid #f60; background:#390; position:absolute;}
#box1 { top:10px; left:0;}
#box2 { top:62px; left:0;}

jQuery代码：

1
2
3
$('#trigger').click(function() {
	$('.box').animate({'right': '0'});
});

结果执行JS后，Firebug中实时Html代码为：而通过Cssviewer观察到的代码不变：
所以，不要试图用JS来改变已设定top和left的DIV的right和bottom值，当然改变top和left值还是会有效果出来的。
你也许会喜欢阅读这些：
2010年03月8日 -- CSS:CSS3基础（附图） (12)
2009年11月26日 -- jQuery:增强型走马灯公告栏，可以抛弃marquee标签了 (20)
2009年09月23日 -- Ajax:当前页面更改内容，前端实现 (14)
2012年01月6日 -- XSLT:通过间隔符获取英文名的First Name和Last Name (3)
2011年04月20日 -- CSS3:Transition属性详解 (82)
2011年04月1日 -- HTML5:《HTML5. Up and Running》读书笔记.Chp4.Canvas (22)
2011年03月21日 -- HTML5:《HTML5. Up and Running》读书笔记.Chp3.Elements (24)
2011年03月15日 -- HTML5:《HTML5. Up and Running》读书笔记.Chp2.Features (23)
2011年03月2日 -- CSS:区分IE版本的三个方法 (27)
2010年12月30日 -- Javascript:根据指定日期获得星期数 (23)


示例:Selectbox模拟实现效果
Hiro — Thu, 02 Sep 2010 15:07:01 +0000
很长时间没有更新了，也很久没有做实例分享了。最近比较动荡，也比较忙，所以博客的更新频率也变了。
今天的实例算是很小的了吧，是在之前公司的公司网上做的效果，今天朋友让我扣出来给他。我便做了份，整理了分享出来给大家参考。
近期因新工作需要，在学习XML和XSLT相关的知识，以后也会在博客中记录一些学习笔记！
download demo
一、HTML代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14

    全部
    
        全部
        社会
        情感
        产品
        开心
        文体
        财经
        科技
        点子俱乐部
    



二、CSS代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
* { margin:0; padding:0;}
body { font:12px Verdana, Geneva, sans-serif; color:#333;}
a { text-decoration:none;}
#selectBox { margin:100px; position:relative; width:116px;}
#cats_seltor { height:22px; cursor:pointer;}
#cats_seltor span, #cats_seltor em { float:left; display:block;}
#cats_seltor span { border:1px solid #d4d5d8; width:74px; height:20px; line-height:20px; border-right:none; padding:0 10px; color:#f60; overflow:hidden;}
#cats_seltor em { width:20px; height:22px; background:url(arrow.png) no-repeat;}
#cats_seltor em.down { background-position:0 -30px;}
#cats_lks { width:114px; border:1px solid #d4d5d8; border-top:none; position:absolute; top:22px; left:0; background:#fff; display:none; z-index:10;}
#cats_lks dd { padding:2px 6px;}
#cats_lks dd a { color:#666; display:block; padding:1px 4px;}
#cats_lks dd a:hover { color:#fff; background:#f60;}


三、jQuery代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<script type="text/javascript" src="../js/jquery-1.4.2.min.js">script>
<script type="text/javascript">
jQuery(function($) {
	$('#cats_seltor').click(function() {
		$('em', this).toggleClass('down');
		$('#cats_lks').toggle();
	});
 
	$('#cats_lks a').click(function() {
		var _text = $(this).text();
 
		$('#cats_lks').hide();
		$('#cats_seltor').find('span').text(_text)
					.end().find('em').removeClass('down');
		return false;
	});
});
script>

你也许会喜欢阅读这些：
2009年08月28日 -- jQuery:热点图片轮换展示效果 (14)
2009年07月14日 -- jQuery:使用css+jQuery模拟键盘 (10)
2009年07月10日 -- jQuery:书籍展示效果 (6)
2009年07月2日 -- jQuery:仿MSN网站的tab效果 (30)
2009年07月2日 -- jQuery：简单6行代码实现tab效果 (10)
2009年06月30日 -- jQuery：仿迅雷首页热片滑动效果 (6)
2010年02月26日 -- jQuery:丰富效果的Flash图片播放（JS重写版） (18)
2009年11月26日 -- jQuery:增强型走马灯公告栏，可以抛弃marquee标签了 (20)
2009年09月23日 -- Ajax:当前页面更改内容，前端实现 (14)
2009年07月6日 -- CSS:纯css的伪动态分页效果 (17)


CSS:Firefox 4 将支持CSS3 calc方法
Hiro — Sat, 12 Jun 2010 02:19:01 +0000
该文是用来讲解CSS3中calc()方法，这一功能特性在Firefox之前的任何版本中都没曾集成，但在Firefox4版本中它将得以实现。
Firefox将支持CSS3 calc()，它通过一个算术表达式用来计算出一个长度值。这就意味着你可以用它来定义DIVs的大小，margins的值，borders的宽度，等等。
一、calc() 
例子一：下面的例子用来展示一个棘手的布局问题，通过CSS3 calc()可以轻松实现：

1
2
3
4
5
6
7
8
9
10
/*
* 两个DIVs对准，外间距为1em
*/
#a {
  width:75%;
  margin-right: 1em;
}
#b {
  width: -moz-calc(25% - 1em);
}

不使用calc()的话，若通过百分比来控制宽度，并希望有1em外间距时，是无法实现的。当我们使用到外间距是，必须用页面宽度减去两个DIVs的宽度，这样的话就不够灵活了。

例子二：通过calc()计算以保证一个input框的宽度不会超出其父标签的宽度：

1
2
3
4
5
6
input {
  padding:2px;
  border:1px solid black;
  display:block;
  width: -moz-calc(100% - 2 * 3px);
}


一个重要的特性是：在calc()方法的算术表达式中可以联合多个不同的单位进行计算：

1
width: -moz-calc(3px + 50%/3 - 3em + 1rem);


calc()方法支持+, -, *, /, mod, min, 和 max 运算符。
二、min() | max()
另外：Firefox4将也支持min() 和 max()方法，使用如下：

1
2
3
4
div {
  height: -moz-min(36pt, 2em);
  width: -moz-max(50%, 18px);
}


资料参考来自：http://hacks.mozilla.org/2010/06/css3-calc/ | http://www.w3.org/TR/css3-values/#calc
你也许会喜欢阅读这些：
2011年11月25日 -- 插件：Firebug扩展插件FireQuery (2)
2011年03月2日 -- CSS:区分IE版本的三个方法 (27)
2010年11月25日 -- CSS:position属性定位总结 (27)
2010年09月13日 -- 资讯:2010年09月编程语言排行榜 (23)
2010年09月2日 -- 示例:Selectbox模拟实现效果 (22)
2010年08月3日 -- 资讯:2010年08月编程语言排行榜 (12)
2010年07月9日 -- 资讯:2010年07月编程语言排行榜 (23)
2010年06月9日 -- 资讯:2010年06月编程语言排行榜 (13)
2010年06月3日 -- Wordpress:3.0版本特性，将改变你的内容管理方式 (12)
2010年05月23日 -- 资讯:2010年05月编程语言排行榜 (23)


CSS:通过一个样式表区分IE的各个版本
Hiro — Mon, 17 May 2010 07:47:40 +0000
通常我们知道为了修复IE各个版本与其他浏览器的兼容，在head标签内会添加条件判断，根据不同的判断结果联入不同版本的CSS样式表。如下：

1
2
3





这样的方法在我所有的网站或者博客中都是如此应用，但我也一直在纠结着多出了多余的样式表文件，HTTP请求也就多了一个。这对于我这个做前端的是一个严重的问题，但一直都没有找到可以优化的方法。
但是今天我看到了一篇文章，他教会了我另一种条件判断的方法。可以用条件判断的结果来添加多余的包含标签。同时也发现，自己思考的太少了。实现方法如下：

1
2
3
4
5
6
7
8
9
10
11

		
			
			
		
		


通过这样的方法，我只需要一个样式表文件，然后在样式表中通过子选择器的方法来给出相应版本的css样式控制。如下：

1
2
#main {background: white;}
#ie6 #main {background: black;}


是不是你看到了也觉得惊奇呢，我就在感慨我怎么之前没有看到过这样的技巧文章了，发现原来该博主今天才更新了该文。我实在太幸运了，在我的新版主题里，我将采用这种区别IE版本的方法来控制css样式。
追加一个Demo页面，大家可以通过IETester查看，不同版本下，样式是不一样的。
download demo
Demo的css样式：

1
2
3
4
5
6
* { margin:0; padding:0;}
body { font:24px Tahoma, Geneva, sans-serif; color:#666;}
#main { margin:30px auto; width:400px; height:100px; line-height:100px; border:1px solid #ccc; background:#eee; text-align:center;}
#ie8 #main { color:#f00; border-color:#f60; background:#9FF;}
#ie7 #main { color:#36F; border-color:#009; background:#F0F;}
#ie6 #main { color:#f60; border-color:#090; background:#FFC;}

Demo的Html源码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21



 
	Target-IE-Version
 




该技巧学习自文章：Target Every Version of IE from a Single Stylesheet
你也许会喜欢阅读这些：
2011年03月2日 -- CSS:区分IE版本的三个方法 (27)
2009年09月3日 -- CSS:分享一些常用的css技巧 (8)
2010年11月25日 -- CSS:position属性定位总结 (27)
2010年09月2日 -- 示例:Selectbox模拟实现效果 (22)
2010年06月12日 -- CSS:Firefox 4 将支持CSS3 calc方法 (18)
2010年03月8日 -- CSS:CSS3基础（附图） (12)
2010年02月20日 -- Wordpress:如何将GoogleBuzz数据插入到博客中 (11)
2009年11月26日 -- jQuery:增强型走马灯公告栏，可以抛弃marquee标签了 (20)
2009年09月23日 -- Ajax:当前页面更改内容，前端实现 (14)
2009年09月16日 -- Wordpress:正确地引入comment-reply.js文件 (23)


CSS:CSS3基础（附图）
Hiro — Mon, 08 Mar 2010 02:41:14 +0000
今日在Web Designer Wall博客上看到这篇介绍css3基础的博文，文章其实很普通，关键喜欢他配上了截图，看起来就更加明了。便花了点时间整理后发表出来与大家分享一下！
文中主要介绍了四个css3高级属性，也是最最常用的四个css3属性。
1.RGBA
RBGA是用于css的background属性，前三个参数是RBG颜色值，最后一个参数是透明度设置。RGBA也可以使用在css中与颜色相关的所有属性中，如color,border-color,background-color,shadow-color等。
2.Text Shadow
text-shadow的设置值是由x-offset, y-offset, blur, color四个参数组成。若给x-offset设置一个负值，则阴影偏向左边；若个y-offset设置一个负值，则阴影偏向顶部；当然你也可以使用RGBA来设置第四个参数color。你也可以给text-shadow设置一系列的值（用逗号隔开）。下面的图片展示了两个值来设置一个单词的印刷效果（1px向上，1px向下）：
3.Border Radius
对border radius的记忆方法就和padding、margin一样(如： border-radius: 20px)。为了达到多浏览器兼容，需要在该属性前加上“-moz-“用于火狐浏览器、加上”-webkit-“用于谷歌和苹果浏览器。（IE浏览器不支持此CSS3高级属性）你也可以分别设置四个角的圆角直径，火狐浏览器与苹果（谷歌)浏览器的设置属性有所差别，看图：
4.Box Shadow
box shadow属性设置值的构成与text-shadow是一样的，都是有四个属性：x-offset, y-offset, blur, color组成。当然，box-shadow也可以用一系列的值来设置属性，如：

1
2
3
4
-moz-box-shadow:
		-2px -2px 0 #fff,
		2px 2px 0 #bb9595,
		2px 4px 15px rgba(0, 0, 0, .3);

效果如下图：
最后，css3高级属性远远不值文中的这些，文中讲到的是一些基础的，也是使用最多的，为了给用户带去更多的美好体验，努力学透css吧！
本文翻译自:Web Designer Wall — The Basics of CSS3
你也许会喜欢阅读这些：
2011年03月2日 -- CSS:区分IE版本的三个方法 (27)
2010年11月25日 -- CSS:position属性定位总结 (27)
2010年03月15日 -- jQuery:揭露jQuery的隐藏功能 (5)
2010年01月22日 -- jQuery:1.4新版本中你应该知道的15个新特性(二) (7)
2010年01月20日 -- jQuery:1.4新版本中你应该知道的15个新特性(一) (6)
2009年12月18日 -- Javascript:10个Javscript编程的技巧 (4)
2009年11月30日 -- HTML:编写干净的且富有语义的html代码 (13)
2009年11月26日 -- jQuery:增强型走马灯公告栏，可以抛弃marquee标签了 (20)
2009年09月23日 -- Ajax:当前页面更改内容，前端实现 (14)
2012年01月6日 -- XSLT:通过间隔符获取英文名的First Name和Last Name (3)


jQuery:增强型走马灯公告栏，可以抛弃marquee标签了
Hiro — Thu, 26 Nov 2009 15:30:43 +0000
昨天晚上收到随风同学的求助邮件，说因上级的要求需要制作一个走马灯效果的公告栏，希望我可以帮助他解决。因看到邮件的时候都快要睡觉了，所以并没有立即处理。
今天早上到了公司，放开手边的工作，花了一点点时间给他制作了一个主流浏览器都兼容的走马灯公告栏。然后mail给他，但他过会儿回邮件说缺少鼠标悬停时停止的效果。于是乎有花了几分钟添加了相应的代码。到了下午快下班的时候，该同学又发来了邮件，说我的公告栏的效果有点欠缺，现在的效果和marquee标签(该标签不符合W3C标准)的效果一样，需要等内容上移完成后才会重复滚动，如果可以连续滚动的话那就完美了。
于是就在刚刚的时间我有花了几分钟的时间给他解决了，mail给他。不知道他是否还会有什么新的要求呢，期待啊！毕竟这对我来说也是一个挑战嘛，同时也帮助到了别人，何乐而不为呢！
因为觉得功能差不多都实现了，所以也共享出来与大家分享，或许会对你有所帮助呢。
downloaddemo
1.Html代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14

    
        Wordpress:将文章自动显示为两列
        电影:《2012》真的有那一天吗？探索频道为你揭露
        资讯:2009年11月编程语言排行榜
        租房:忙碌一周，房子终于搞定
        主题:我的第三个主题innerNews提供下载
        插件:我的第一个插件–简约的scrollTop滑动插件
        PageRank:庆贺我的博客PR连升3级
        软件:MyEclipse 8.0发布，附注册码
        电视:《冷箭》，让我“失眠”的谍战片
        下载:高清，是一种态度！
    


2.CSS代码：

1
2
3
4
5
6
7
8
* { margin:0; padding:0;}
body { font:12px Verdana, Geneva, sans-serif; color:#666; text-align:center;}
 
#container { width:180px; margin:30px auto; text-align:left; padding:10px; border:1px solid #ccc; height:250px; position:relative; overflow:hidden;}
	.noticeList { width:180px; list-style:inside; position:absolute; top:270px; left:10px;}
	.noticeList li { padding-bottom:5px;}
	.noticeList li a { color:#606060; text-decoration:none;}
	.noticeList li a:hover { color:#09F;}

3.JS代码：（备了部分注释，不懂的可以留言询问。）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
jQuery(function($) {
	function ScrollAction(listObj, listElem, speed, isSeries) {	//listObj为需要滚动的列表，  speed为滚动速度
		var pos, top, aniTop, height;
		var id = '';  //记录setInterval的标记id
 
		pos = listObj.position();	
		top = pos.top;			//列表的top
		aniTop = top;				//记录当前运动时的top
		height = listObj.height();	//列表的高度
 
		var scrollUp = function() {
			aniTop--;
			if(!isSeries) {	//isSeries变量控制是否连续滚动，false不连续，true连续
				if(aniTop == -height) {	//不连续，滚动玩重新滚动
					listObj.css({'top': top});
					aniTop = top;
				};
			} else {
				if(aniTop == -listObj.children().eq(0).height()) {	//连续滚动
					var firstItem = '< ' + listElem +'>' + listObj.children().eq(0).html() + '< /' + listElem +'>';
					listObj.children().eq(0).remove();
					listObj.append(firstItem);
					aniTop = 4;
				};
			};
			listObj.css({'top': aniTop + 'px'});
		};
 
		var hover = function(id) {
			listObj.hover(function() {
				clearInterval(id);
			}, function() {
				id = setInterval(scrollUp, speed);
			});
		};
 
		this.start = function() {
			id = setInterval(scrollUp, speed);
			hover(id);
		};
 
	};
	var sa = new ScrollAction($('.noticeList'), 'li', 30, true);
	sa.start();
});

使用时别忘了引入jQuery库哦，也希望大家给我提出意见，或功能扩充等要求。
你也许会喜欢阅读这些：
2009年09月23日 -- Ajax:当前页面更改内容，前端实现 (14)
2010年11月25日 -- CSS:position属性定位总结 (27)
2010年09月2日 -- 示例:Selectbox模拟实现效果 (22)
2010年03月15日 -- jQuery:揭露jQuery的隐藏功能 (5)
2010年03月8日 -- CSS:CSS3基础（附图） (12)
2010年01月22日 -- jQuery:1.4新版本中你应该知道的15个新特性(二) (7)
2010年01月20日 -- jQuery:1.4新版本中你应该知道的15个新特性(一) (6)
2009年12月16日 -- jQuery:通过事件委派一次绑定多种事件，以减少事件冗余 (7)
2009年12月1日 -- jQuery:如何在页面和插件代码中自定义别名 (5)
2009年08月28日 -- jQuery:热点图片轮换展示效果 (14)


Ajax:当前页面更改内容，前端实现
Hiro — Wed, 23 Sep 2009 04:26:22 +0000
相信大家有用过Google Doc或Flickr，或者一些SNS社区的图片添加描述信息的效果，他们是在点击了一段文字后出现一个输入框，在输入框内输入你要填写的内容，点击“确认”或者“发表”即可立即显示出来。
今天做的这个效果呢，就是其中的截取版本。为什么这么说呢，因为我的效果只实现了前端的更改后立即发布的效果，而没有实际的与服务器端交互，也没有将输入的内容添加到数据库中，主要是为大家介绍一下实现原理。
downloaddemo
1.HTML代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

  Ajax Editing
  鼠标移动到列表上，双击即可以进行编辑！
  
    一、电影列表
    
      《建国大业》，更新中...
      《爱有来生》
      《COCO Chanel》
      《夜店》
      《海上钢琴师–1900的传说》
      《新宿事件》
    
  
  
    二、书籍列表
    
      《精通Javascript》
      《jQuery基础教程》
      《Flex入门到精通》
      《PHP与MySQL Web开发》
      《Google，你可以做什么》
      《不抱怨的世界》
    
  





1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
* { margin:0; padding:0;}
body { font:12px/20px Georgia, "Times New Roman", Times, serif; color:#404040;}
 
h2 { font-size:24px;}
 
.color_red { color:#F00;}
 
#container { width:400px; margin:30px auto; overflow:hidden; height:1%;}
 
	/* 标题样式 */
	#container h1 { text-align:center; font:32px "Lucida Sans Unicode", "Lucida Grande", sans-serif; margin-bottom:20px;}
 
	.block { width:180px; float:left; margin:30px 20px 0 0;}
 
	/* 列表li的样式 */
	ul.editable li { padding:10px 0; list-style:none;}
 
	/* 高亮当前编辑的列表li */
	.hover { background:#E8F3FF;}
 
	/* 高亮当前的input输入框 */
	.editInput { width:160px; border:2px solid #E8F3FF; display:block;}
 
 
	/* save和cancel按钮的效果，鼠标移动到上面的效果 */
	.btnSave, .btnCancel { padding:0 5px; border:1px solid #09F; background:#36F; color:#fff; text-decoration:none; margin:10px 0 0 20px;}
	.btnSave:hover, .btnCancel:hover  { border:1px solid #36F; color:#39F; background:#fff;}


3. jQuery代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
$(function() {
 
	var oldText, newText;
 
	//鼠标移动到列表li上后，添加一个高亮的背景
	$('.editable li').hover(function() {
		$(this).addClass('hover');
	}, function() {
		$(this).removeClass('hover');
	}).bind('dblclick', function() {
 
		//获得列表li中原先的html代码
		oldText = $(this).html().replace(/"/g, """);
 
		//将原先的html代码放在一个input中，并追加save和cancel按钮后插入到列表li中
		$(this).html('+ oldText +'" />savecancel');
	}).children('a').attr('target', '_blank');	//链接在新窗口中打开
 
	//点击save按钮，将新的值插入在列表li中
	$('.btnSave').live('click', function() {
		newText = $(this).siblings('input').val().replace(/"/g, """);
 
		$(this).parent('li').html(newText);
 
		//设置超链接a的跳转为否
		return false;
	});
 
	//若点击cancel按钮，则将最初的html代码插入在列表li中
	$('.btnCancel').live('click', function() {
		$(this).parent('li').html(oldText);
 
		//设置超链接a的跳转为否
		return false;
	});
 
});

双击列表li后，将原先列表li中的html源码保存在oldText变量中，并且在列表li标签内插入一个input输入框和两个链接作为按钮save和cancel之用；

点击save按钮后，将input中的新的html源码保存在newText变量中，重新插入到列表li中，从而覆盖了列表里中的input源码；

点击cancel按钮，浙江原先的html代码oldText重新插入到列表li中，覆盖掉因双击插入的input输入框和两个链接按钮。

注意：源代码中没有jQuery库文件，请下载查看代码的朋友根据源代码路径自行添加。
你也许会喜欢阅读这些：
2009年11月26日 -- jQuery:增强型走马灯公告栏，可以抛弃marquee标签了 (20)
2010年11月25日 -- CSS:position属性定位总结 (27)
2010年09月2日 -- 示例:Selectbox模拟实现效果 (22)
2010年03月25日 -- Ajax:近期博客改版的增强Ajax加载说明 (43)
2010年03月15日 -- jQuery:揭露jQuery的隐藏功能 (5)
2010年03月8日 -- CSS:CSS3基础（附图） (12)
2010年01月22日 -- jQuery:1.4新版本中你应该知道的15个新特性(二) (7)
2010年01月20日 -- jQuery:1.4新版本中你应该知道的15个新特性(一) (6)
2009年12月16日 -- jQuery:通过事件委派一次绑定多种事件，以减少事件冗余 (7)
2009年12月1日 -- jQuery:如何在页面和插件代码中自定义别名 (5)


CSS:分享一些常用的css技巧
Hiro — Thu, 03 Sep 2009 15:05:04 +0000
随着近几年来Web标准的流行，css也逐渐有原先辅助的角色转变成了各大网站编程的重要组成部分一直。它很好地将样式与内容分离，使得后期的版面维护与更新工作得以更加地便捷！
今天与大家分享一些在网站开发过程中常用到的一些css技巧，或许会给你的css编写带来一些方便之处。已经知晓这些技巧的人完全可以忽略这篇文章。
1. 使用!important:
!important是用来将css属性的优先权提升到之高无上的地步，任何多余的装饰在!important的面前都无用无知地。使用方法：

1
2
3
4
.text { 
        background-color:blue !important;   //只需在css属性后加上!important即可，与属性间的空格可有可无
        background-color:red;  //尽管该css属性是写在后面，但没有起到任何的作用
}


2. 使用background设置图片来替换文本：
每个网站都有一个logo，如果使用a标签直接包含logo图片，这样的做法对搜索引擎不太友好。此时，我们可以用a标签包含一段文字，通过css来的background属性来隐藏文字，同时设置a标签的背景图片为logo图片，这样可以更加友好地优化了网站。

1
2
3
4
5
6
7
.logo a {
      display:block;
      width:120px;  //此处的宽度和高度与logo图片的宽度和高度一致即可
      height:80px;  
      text-indent:-9999px;  
      background:url('logo.gif') no-repeat;   
 }


3. 清除浮动：
在网站的布局设置时，经常会出现通过浮动来布局网站内容的分布。但若该元素浮动后，它就脱离了它的父亲的管束，会导致它的父亲的高度为0。为了不是父亲的后面的兄弟们的布局出现问题,此时需要对父亲清除浮动.方法有二:


01. 在父亲的浮动儿子后面插入一个块级元素,如div,设置该div的css为clear,编写css:

1
2
3
.clear {
       clear:both;
}

02. 使用overflow和heigth组合的方式,设置父亲father的css为:

1
2
3
4
.father {
       overflow:hidden;  //标准浏览器中生效
       height:%1;    //兼容IE6
}


4. 文字垂直居中
 若有一个h3包含的标题，你设置了它的高度为30px，就会发现它是居上边显示的，此时你只需结合line-heigth属性即可实现居中效果：

1
2
3
4
h3 {
      height:30px;
      line-height:30px;
}


5. 网站整体内容居中
大家都知道有个属性text-align:center;可以是文本居中，该属性在ie6下也可以实现将网站的整体居中显示。但在标准浏览器中，该属性是不起作用的。在标准浏览器中却可以使用margin:0 auto;属性是网站的整体内容居中，但该属性在IE6中却不能识别，所以为了兼容多浏览器，可以组合使用：

1
2
3
4
5
6
7
body {
        text-align:center;    //在body标签中设置该属性给IE6认识只用
}
#wrapper {
       text-align:left;   //在标准浏览器中，先须将文章的内容居左显示
       margin:0 auto;    //然后使用margin属性将网站整体内容居中
}


这些css技巧或许很简单，但我的初衷是希望可以给初学者带去一些帮助。当然css技巧远远不止这些，以后会逐渐整理了发表出来与大家分享。
你也许会喜欢阅读这些：
2011年03月2日 -- CSS:区分IE版本的三个方法 (27)
2010年05月17日 -- CSS:通过一个样式表区分IE的各个版本 (11)
2010年11月25日 -- CSS:position属性定位总结 (27)
2010年09月2日 -- 示例:Selectbox模拟实现效果 (22)
2010年06月12日 -- CSS:Firefox 4 将支持CSS3 calc方法 (18)
2010年03月8日 -- CSS:CSS3基础（附图） (12)
2010年02月20日 -- Wordpress:如何将GoogleBuzz数据插入到博客中 (11)
2009年11月26日 -- jQuery:增强型走马灯公告栏，可以抛弃marquee标签了 (20)
2009年09月23日 -- Ajax:当前页面更改内容，前端实现 (14)
2009年09月16日 -- Wordpress:正确地引入comment-reply.js文件 (23)


jQuery:热点图片轮换展示效果
Hiro — Fri, 28 Aug 2009 08:02:54 +0000
分享一个我做的图片轮换展示效果，主要实现原理：通过设置非第一个图片的position，通过overflow:hidden属性隐藏，再使用jQuery的animate效果函数作出链性轮换的效果。
轮换的图片是我第一个主题的banner大图的截图版。在提供下载的压缩包里有一个png的图片是Fireworks的源文件，喜欢修改的朋友可以自行修改！另压缩包中的源码没有添加注释，不懂的请阅读本文中的注释。
PS：jQuery库请根据源码的路径自行加入，压缩包中不提供下载。
downloaddemo
1.Html代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

        
        
            
                
                
                
                
            
            
            	1
            	2
            	3
            	4
            
        
        
    


2.Css代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
* { margin:0; padding:0;}
body { font:12px; padding:100px 200px;}
ul { list-style:none;}
img { padding:2px; border:1px solid #eee;}
a { outline:none;}
 
#imgs { width:500px; float:left; margin-bottom:10px;}
.top, .btm { background:url(images/sprite.gif) no-repeat; overflow:hidden;}
.top { background-position:0 0; height:5px;}
.btm { background-position:0 -5px; height:7px;}
 
.mid { width:486px; background:url(images/bg_img.gif) repeat-y; padding:5px 7px 0;}
.mid ul { width:486px; height:186px; background:#fff; position:relative; overflow:hidden;}
.mid ul li { width:486px; height:186px; position:absolute; left:490px; top:0;}
.mid ul li.first { left:0;}
 
#img_list { width:486px; height:20px; padding-top:5px; overflow:hidden; height:1%;}
#img_list a { display:block; width:14px; height:14px; text-indent:-9999px; float:left; margin-right:5px; background:url(images/sprite.gif) no-repeat 0 -13px;}
#img_list a:hover, #img_list a.active { background-position:-14px -13px;}


3.jQuery代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
/* start ----- play img*/
var curr = 0, next = 0, count = 0;
$(document).ready(function() {
        // 记录图片的数量	
	count = $('#img_list a').size();	
 
	t = setInterval('imgPlay()', 3000);
 
        // 鼠标移动到图片或导航上停止播放，移开后恢复播放	
	$('#imgs li, #img_list a').hover(function() {
		clearInterval(t);
	}, function() {
		t = setInterval('imgPlay()', 3000);
	});
 
	//点击导航播放到相应的图片		
	$('#img_list a').click(function() {
                // index()函数返回当前导航的下标
		var index = $('#img_list a').index(this);
		if(curr != index) {
			play(index);
			curr = index;
		};
			return false;
		});	
	});
 
	// 播放图片的函数
	var imgPlay = function() {
		next = curr + 1;
                // 若当前图片播放到最后一张，这设置下一张要播放的图片为第一张图片的下标
		if(curr == count-1) next=0;
		play(next);
 
		curr++;
                // 在当前图片的下标加1后，若值大于最后一张图片的下标，则设置下一轮其实播放的图片下标为第一张图片的下标，而next永远比curr大1
		if(curr > count-1) { curr=0; next = curr +1; }
	};
 
	// 控制播放效果的函数
	var play = function(next) {
                // 当前的图片滑到左边-500px，完成后返回到右边490px
                // 下一张图片滑到0px处，完成后导航的焦点切换到下一个点上
		$('#imgs li').eq(curr).css({'opacity': '0.5'}).animate({'left': '-500px', 'opacity': '1'}, 'slow', function() {
				$(this).css({'left': '490px'});
			}).end()
			.eq(next).animate({'left': '0px', 'opacity': '1'}, 'slow', function() {
				$('#img_list a').siblings('a').removeClass('active').end().eq(next).addClass('active');
			});
};
/* endof ----- play img*/

你也许会喜欢阅读这些：
2010年09月2日 -- 示例:Selectbox模拟实现效果 (22)
2009年07月14日 -- jQuery:使用css+jQuery模拟键盘 (10)
2009年07月10日 -- jQuery:书籍展示效果 (6)
2009年07月2日 -- jQuery:仿MSN网站的tab效果 (30)
2009年07月2日 -- jQuery：简单6行代码实现tab效果 (10)
2009年06月30日 -- jQuery：仿迅雷首页热片滑动效果 (6)
2010年02月26日 -- jQuery:丰富效果的Flash图片播放（JS重写版） (18)
2009年11月26日 -- jQuery:增强型走马灯公告栏，可以抛弃marquee标签了 (20)
2009年09月23日 -- Ajax:当前页面更改内容，前端实现 (14)
2009年07月6日 -- CSS:纯css的伪动态分页效果 (17)


jQuery:使用css+jQuery模拟键盘
Hiro — Tue, 14 Jul 2009 04:56:57 +0000
今天在阅读Nettuts+的Feed时看到了这个模拟键盘的效果，很是喜欢。便查看的源码后，了解了实现的原理，自己重新编写了CSS和JS代码，现效果如下：



外部链接查看效果：Demo,源代码下载：Download
1.html代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

	
	
		`~
		1!
		2@
		3#
		4$
		5%
		6^
		7&
		8*
		9(
		0)
		-_
		=+
		delete
		tab
		q
		w
		e
		r
		t
		y
		u
		i
		o
		p
		[{
		]}
		\|
		caps lock
		a
		s
		d
		f
		g
		h
		j
		k
		l
		;:
		'"
		enter
		shift
		z
		x
		c
		v
		b
		n
		m
		,< 
		.>
		/?
		shift
		space
	


2. CSS代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
* { margin:0; padding:0;}
body { font:10px Tahoma, Geneva, sans-serif; background:#eee;}
 
#container { width:430px; margin:10px;}
 
	#write { border:none; width:410px; height:120px; background:#fff; padding:5px; margin-bottom:5px; -moz-border-radius:5px; -webkit-border-radius:5px; border:1px solid #f9f9f9; font-size:11px;}
 
		#keyboard { list-style:none;}
			#keyboard li { float:left; width:20px; height:20px; line-height:20px; text-align:center; background:#fff; margin:0 5px 5px 0; -moz-border-radius:5px; -webkit-border-radius:5px; border:1px solid #f9f9f9;}
 
			.tab, .capslock, .left-shift, .space { clear:left;}
 
			#keyboard li.lastitem { margin-right:0;}
			#keyboard li.delete { width:70px;}
			#keyboard li.tab { width:70px;}
			#keyboard li.capslock { width:75px;}
			#keyboard li.enter { width:40px;}
			#keyboard li.left-shift { width:80px;}
			#keyboard li.right-shift { width:65px;}
			#keyboard li.space { width:420px;}
 
			#keyboard li:hover, .hover { position:relative; top:1px; left:1px; cursor:pointer; border-color:#e5e5e5;}
 
			.on { display:none;}
			.uppercase { text-transform:uppercase;}

为了兼容IE6和IE7，需在head标签对间加上如下代码：

1
2
3
4
5


3. JS代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
$(document).ready(function() {
 
	var $writeBox = $('#write'),
		shift = false,
		capslock = false;
 
	$('#keyboard li').hover(function() {
		$(this).addClass('hover');
	}, function() {
		$(this).removeClass('hover');
	}).click(function() {
		var $this = $(this),
			charater = $this.html();
 
		// 一键两意
		if($this.hasClass('symbol')) charater = $('span:visible', $this).html();
 
		// Button detele 
		if($this.hasClass('delete')) {
			var html = $writeBox.html();
			$writeBox.html(html.substring(0, html.length-1));
			return false;
		};
 
		// Button tab
		if($this.hasClass('tab')) charater = '\t';
 
		// Button capslock
		if($this.hasClass('capslock')) {
			$('.letter').toggleClass('uppercase');
			capslock = true;
			return false;
		};
 
		// Button enter
		if($this.hasClass('enter')) charater = '\n';
 
		// Button shift
		if($this.hasClass('left-shift') || $this.hasClass('right-shift')) {
			$('.letter').toggleClass('uppercase');
			$('.symbol span').toggle();
 
			shift = (shift === true) ? false : true;
			capslock = false;
			return false;
		};
 
		// Button space
		if($this.hasClass('space')) charater = ' ';
 
		// 转换为大写
		if($this.hasClass('uppercase')) charater = charater.toUpperCase();
 
		// 输出所按的键值
		$writeBox.html($writeBox.html() + charater);
 
	});
 
});

此效果由：http://net.tutsplus.com/tutorials/javascript-ajax/creating-a-keyboard-with-css-and-jquery/中的效果改编而来。
你也许会喜欢阅读这些：
2010年09月2日 -- 示例:Selectbox模拟实现效果 (22)
2009年08月28日 -- jQuery:热点图片轮换展示效果 (14)
2009年07月10日 -- jQuery:书籍展示效果 (6)
2009年07月2日 -- jQuery:仿MSN网站的tab效果 (30)
2009年07月2日 -- jQuery：简单6行代码实现tab效果 (10)
2009年06月30日 -- jQuery：仿迅雷首页热片滑动效果 (6)
2010年08月12日 -- Sizzle:开源JS选择器，如何自定义选择器 (31)
2010年02月26日 -- jQuery:丰富效果的Flash图片播放（JS重写版） (18)
2009年11月26日 -- jQuery:增强型走马灯公告栏，可以抛弃marquee标签了 (20)
2009年09月23日 -- Ajax:当前页面更改内容，前端实现 (14)


jQuery:书籍展示效果
Hiro — Fri, 10 Jul 2009 03:52:23 +0000
前段时间在国外的博客上看到这个jQuery的书籍展示效果，觉得很是不错，并下载了源码，自己重新编写了CSS和JS，效果:如下

说明：因为在此页面中是通过使用iframe标签引入外部页面，加上显示页面的宽度有限，所以当鼠标移动到Info图标上时，部分内容被遮盖住，这时你可以通过外部链接查看：Demo
具体代码实现如下：（源代码下载）
1.html代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

   
    
    
     
  
  
    
    
  
  
    
      
    
  
  
    
    
  


2.CSS代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
* { margin:0; padding:0;}
body { font:12px/16px Verdana, Geneva, sans-serif; color:#000;}
 
img { border:0;}
a { text-decoration:none; outline:none; hide-focus:expression(this.hideFocus=true);}
ul { list-style:none;}
 
#books { width:500px;}
.prev img, .next img { width:40px; height:30px;}
.top img, .btm img { width:20px; height:20px;}
.overclear { overflow:hidden; height:1%;}
.float_left { float:left;}
.float_right { float:right;}
.top { background:url(images/books_top.gif) repeat-x;}
.btm { background:url(images/books_btm.gif) repeat-x;}
 
.buttons { position:relative; height:32px; margin-bottom:5px;}
.prev { position:absolute; top:0; left:0;}
.next { position:absolute; top:0; right:0;}
 
.showing { margin:0 60px; height:80%; font-family:Tahoma, Geneva, sans-serif; text-align:center; padding-top:4px;}
 
.inner { height:125px; background:url(images/books_left_mid.gif) repeat-y;}
.inner ul { background:url(images/books_right_mid.gif) repeat-y right; height:100%; padding-left:25px;}
 
.loader { background:url(images/books_loader.gif) no-repeat 50% 50%;; height:100%;}
 
.book { width:90px; float:left; padding-right:25px; position:relative; padding-bottom:3px;}
 
.book .info { position:absolute; top:107px; left:88px;}
.book .thumb img { padding:3px; border:1px solid #ddd;}
 
.books-tooltip { display:none; position:absolute; background:#fff; z-index:2;}
.books-tooltip { width:320px;}
.books-info { border:1px solid #ccc; padding:10px; height:70px;}


为了兼容ie6，需在head标签内加上代码：

1
2
3
4
5



3.xml代码：
因为代码过长的原因，不在此贴出，请阅读外部链接的源代码：XML
4.jQuery代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
$(document).ready(function() {
 
	var perNum = 4;		//每页显示的书本数目
	var currentPage = 1;		//默认显示第一页
	var startPos = 0;		//默认从第一本书开始显示
	var endPos = 4;			//显示4本书
 
	//从xml中获得数据，并与html结合
	$.get('books.xml', function(data){
 
		$('div.inner ul').empty();
 
		var length = $('book', data).length;	
 
		$('book', data).each(function(index) {
 
			var $book = $(this);
			var link = $book.find('href').text();
			var title = $book.find('title').text();
			var author = $book.find('author').text();
			var imageSrc = $book.find('src').text();
			var total = $book.find('total').text();
			var average_rating = $book.find('average_rating').text();
 
			var html = '<li class="book">';
			html += '<a class="info" href="' + link + '">';
			html += '<img src="images/books_info.gif" alt="more info" />';
			html += '</a>';			
			html += '<a class="thumb" href="' + link + '" title="' + title + '">';
			html += '<img src="' + imageSrc + '" alt="' +  title + '" />';
			html += '</a>';
			html += '</li>';
 
			$('#books ul').append($(html));
 
			var bookToolTip = '<div id="books_ToolTip' + index + '" class="books-tooltip">';
			bookToolTip += '<div class="books_pointer_left"></div>';
			bookToolTip += '<div class="books-info">';
			bookToolTip += '<p>' + title + '(by<em>' + author + '</em>)</p>';
			bookToolTip += '<p><img src="images/stars_' + average_rating + '.gif" />(' + total + ')</p>';
			bookToolTip += '</div>';
			bookToolTip += '</div>';
			$('body').append($(bookToolTip));
 
		});
 
		//显示每页的书本
		var show =function(start, end) { 
 
			if(end &gt;= length) {
				end = length;
			}
 
			$('div.showing').empty();
			$('<p>Viewing ' + (start+1) + ' - '+ end + ' of ' + length + '</p>').appendTo($('div.showing'));
 
			$('#books ul li').hide().slice(start, end).fadeIn();
 
			if(currentPage &lt;= 1) {
				$('.prev').fadeOut('fast');
			} else {
				$('.prev').fadeIn('fast');
			}
			if(currentPage &gt;= length / perNum) {
				$('.next').fadeOut('fast');
			} else {
				$('.next').fadeIn('fast');
			}
		};
		show(startPos, endPos);
 
		//显示前一页
		$('.prev').click(function() {
			currentPage --;
			startPos = perNum * (currentPage - 1);
			endPos = perNum * currentPage;
			show(startPos, endPos);
		});
 
		//显示下一页
		$('.next').click(function() {
			currentPage ++;
			startPos = perNum * (currentPage - 1);
			endPos = perNum * currentPage;
			show(startPos, endPos);
		});
 
		//鼠标移动到Info图标上时，显示书本的描述信息
		$('.info').css({'opacity': '0.9'}).hover(function() {
			//$('a.info').index(this)   获得该超链接的index
			var offset = $(this).offset()
			var left = offset.left + 20;
			var top = offset.top + 20;
			$('#books_ToolTip' + $('a.info').index(this)).css({'opacity': '0.7', 'left': left, 'top': top}).fadeIn();
		}, function() {
			$('#books_ToolTip' + $('a.info').index(this)).fadeOut('fast');
		});
 
	});
 
});

你也许会喜欢阅读这些：
2010年09月2日 -- 示例:Selectbox模拟实现效果 (22)
2009年08月28日 -- jQuery:热点图片轮换展示效果 (14)
2009年07月14日 -- jQuery:使用css+jQuery模拟键盘 (10)
2009年07月2日 -- jQuery:仿MSN网站的tab效果 (30)
2009年07月2日 -- jQuery：简单6行代码实现tab效果 (10)
2009年06月30日 -- jQuery：仿迅雷首页热片滑动效果 (6)
2010年02月26日 -- jQuery:丰富效果的Flash图片播放（JS重写版） (18)
2009年11月26日 -- jQuery:增强型走马灯公告栏，可以抛弃marquee标签了 (20)
2009年09月23日 -- Ajax:当前页面更改内容，前端实现 (14)
2009年07月6日 -- CSS:纯css的伪动态分页效果 (17)


CSS:纯css的伪动态分页效果
Hiro — Mon, 06 Jul 2009 02:29:46 +0000
使用css编写的一个动态分页效果，通过使用opacity和filter实现透明效果，分页效果如下：

1.Html代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

	< <
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    >>


2.css代码：

1
2
3
4
5
6
7
8
9
10
* { margin:0; padding:0;}
body { font:11px Verdana, Geneva, sans-serif; color:#000; padding:10px;}
ul { list-style:none;}
a { text-decoration:none;}
 
#pageNav li { float:left;}
	#pageNav li a { display:block; float:left; padding:2px 5px; border:1px solid #666; margin-left:-1px; color:#fff; background:url(pageNav-bg.gif) repeat-x;}
	#pageNav li a.currPage { background-position:left bottom; color:#000;}
	#pageNav li a:hover { background-position:left bottom; position:relative; padding:4px 10px; margin:-2px -10px 0; opacity:.9; filter:Alpha(opacity=90);}
	#pageNav li a.arrow:hover { position:static; padding:2px 5px; margin:0 -1px 0 0;}

说明：本特效主要的要点在：a:hover时position:relative和margin:-2px -10px 0。为了兼容ie6，需要设置#pageNav li a { display:block; float:left;}
你也许会喜欢阅读这些：
2010年09月2日 -- 示例:Selectbox模拟实现效果 (22)
2009年08月28日 -- jQuery:热点图片轮换展示效果 (14)
2009年07月14日 -- jQuery:使用css+jQuery模拟键盘 (10)
2009年07月10日 -- jQuery:书籍展示效果 (6)
2009年07月2日 -- jQuery:仿MSN网站的tab效果 (30)
2009年07月2日 -- jQuery：简单6行代码实现tab效果 (10)
2009年06月30日 -- jQuery：仿迅雷首页热片滑动效果 (6)
2011年03月2日 -- CSS:区分IE版本的三个方法 (27)
2011年02月24日 -- Javascript:图片无限循环滚动 (27)
2010年11月25日 -- CSS:position属性定位总结 (27)


jQuery:仿MSN网站的tab效果
Hiro — Thu, 02 Jul 2009 09:51:21 +0000
今天不知怎的，一直在做tab的特效，看到MSN官网的tab效果不错，就花了一点点时间小做了一下，具体效果：如下


html代码：
因为过长的原因，请有意的朋友通过此链接查看外部效果，右键查看源文件！External Link
css代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
       * { margin:0; padding:0;}
	body { font:12px "宋体"; color:#049; padding:8px;}
	a { text-decoration:none; color:#049;}
	a:hover { text-decoration:underline;}
	ul { list-style:none;}
	li { height:23px; line-height:23px;}
 
	.popular { width:298px; border:1px solid #ace; padding-bottom:10px;}
 
		.tabs { overflow:hidden; height:1%;}
			.tabs li { border:1px solid #ace; border-width:0 1px 1px 0; background:#f1f7fc; width:84px; text-align:center; float:left;}
			.tabs li.active { background:#fff; border-bottom-color:#fff; font-weight:bold;}
			.tabs li.tab-r { border-right:0; width:118px; text-align:right; padding-right:10px;}
				.tabs li.tab-r a { color:#F06; font-weight:bold; font-family:Georgia;}
 
		.list { margin:7px 0 0 7px; padding-left:35px; background:url(popularlist.gif) no-repeat;}
 
		.weeklyPopular { display:none;}

jQuery代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
$(document).ready(function() {
	$('a').attr('target', '_blank');   
 
	$('.tabs li').mousemove(function() {
		//最右边的tab不进行任何操作							 
		if($(this).hasClass('tab-r')) {
			return;
		};
		//添加当前激活的状态
		$(this).siblings().removeClass('active').end()
			.addClass('active');
		//切换tab		
		if($(this).hasClass('tab-0')) {
		        $('.list').hide();
		        $('.dairyPopular').show();	
		        //也可以写成$(this).parent().nextAll('ul:eq(0)').show();,这样的好处是不必制定特定的class类
		} else if($(this).hasClass('tab-1')) {
			$('.list').hide();
			$('.weeklyPopular').show();
			//也可以写成$(this).parent().nextAll('ul:eq(1)').show();,这样的好处是不必制定特定的class类
		};
	});
});

需要源码包的朋友可以给我留言，我会发到你的邮箱中！
你也许会喜欢阅读这些：
2010年09月2日 -- 示例:Selectbox模拟实现效果 (22)
2009年08月28日 -- jQuery:热点图片轮换展示效果 (14)
2009年07月14日 -- jQuery:使用css+jQuery模拟键盘 (10)
2009年07月10日 -- jQuery:书籍展示效果 (6)
2009年07月2日 -- jQuery：简单6行代码实现tab效果 (10)
2009年06月30日 -- jQuery：仿迅雷首页热片滑动效果 (6)
2010年02月26日 -- jQuery:丰富效果的Flash图片播放（JS重写版） (18)
2009年11月26日 -- jQuery:增强型走马灯公告栏，可以抛弃marquee标签了 (20)
2009年09月23日 -- Ajax:当前页面更改内容，前端实现 (14)
2009年07月6日 -- CSS:纯css的伪动态分页效果 (17)


jQuery：简单6行代码实现tab效果
Hiro — Thu, 02 Jul 2009 02:37:57 +0000
简简单单的6行代码实现tab滑动门效果：如下


html代码：

1
2
3
4
5
6
7
8
9
    
    	
        热点新闻
        news
	    娱乐新闻
        enteriment
        就业形势
        jobs
    

CSS代码：

1
2
3
4
5
6
7
8
    * { margin:0; padding:0;}
    body { font:12px Verdana, Geneva, sans-serif; color:#404040;}
 
	.tabs { margin:10px 0 0 20px; width:360px; position:relative; overflow:hidden; height:1%; height:140px;}
		.tabs h3 { z-index:2; font-size:12px; background:url(pic.gif) no-repeat; width:95px; height:25px; line-height:25px; text-align:center; float:left; margin-right:5px;}
		h3.active { background-position:0 -25px; color:#fff;}
		#tab-01, #tab-02, #tab-03 { position:absolute; top:24px; left:0; width:338px; padding:10px; height:93px; border:1px solid #ace; z-index:1;}
		#tab-02, #tab-03 { display:none;}

jQuery代码：

1
2
3
4
5
6
7
    $(document).ready(function() {
	$('.tabs h3').mouseover(function() {
		$('.tabs div').hide();
		$(this).siblings('h3').removeClass('active').end()
					  .addClass('active').next('div').show();
	});	
    });

具体效果也可查看：效果查看
你也许会喜欢阅读这些：
2010年09月2日 -- 示例:Selectbox模拟实现效果 (22)
2009年08月28日 -- jQuery:热点图片轮换展示效果 (14)
2009年07月14日 -- jQuery:使用css+jQuery模拟键盘 (10)
2009年07月10日 -- jQuery:书籍展示效果 (6)
2009年07月2日 -- jQuery:仿MSN网站的tab效果 (30)
2009年06月30日 -- jQuery：仿迅雷首页热片滑动效果 (6)
2010年02月26日 -- jQuery:丰富效果的Flash图片播放（JS重写版） (18)
2009年11月26日 -- jQuery:增强型走马灯公告栏，可以抛弃marquee标签了 (20)
2009年09月23日 -- Ajax:当前页面更改内容，前端实现 (14)
2009年07月6日 -- CSS:纯css的伪动态分页效果 (17)


jQuery：仿迅雷首页热片滑动效果
Hiro — Tue, 30 Jun 2009 14:27:39 +0000
一直都很喜欢迅雷网站的设计，前端时间迅雷更新的主页的css风格，没了以前的tab效果，多了点变幻滑动的效果。

今天花了点时间，模仿了一下当前迅雷主页上的热点电视、电影的滑动效果：如下


模仿说明：
1. 因为时间的关系，没有花时间去解决ie6下图片透明的兼容；

2. 在兼容各浏览器编写时花费的时间较多，实现了多浏览器的兼容性，除了图片透明的问题（时间关系）；

3. 运用jQuery库对javascript进行编写；

4. 采用css sprite技术处理背景定位；

5. 计划实现自动播放效果。
代码说明：
一. CSS代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
html,body,
ul,ol,li,dl,dt,dd,
h1,h2,h3,h4,h5,h6,
form,input,blockquote,fieldset,pre,
div,p,span,label,em,strong { margin:0; padding:0;}
body { background:#FFFFFF; font:normal 12px/20px Arial, Verdana, Lucida, Helvetica, simsun, sans-serif; color:#313131;}
ul { list-style:none;}
a { text-decoration:none;}
 
 
.huanying { width:468px; height:208px; position:relative; overflow:hidden;}
	.huanying h2 { height:27px; line-height:27px; background:url(images/pic.png) no-repeat; font-size:13px; color:#193b5f; padding:0 11px;}
	.huanying .content { border:1px solid #CCDFF2; border-top-width:0; width:466px; height:180px;}
 
	.movList { padding:10px 8px;}
		.movList ul { overflow:hidden; padding-left:8px; position:absolute; width:432px;}
		.movList ul#ul_hp_0 { left:10px;}
		.movList ul#ul_hp_1, .movList ul#ul_hp_2 { left:500px;}
		.movList ul li { float:left; width:92px; margin:0 8px;}
 
			/* ----- 封面 ----- */
			.movList ul li a.playpic { display:block; width:92px; height:127px; color:#fff; text-align:right; margin-bottom:3px; position:relative;}
			.movList ul li a.playpic img { padding:2px; border:1px solid #eae4d1;}
			.movList ul li a.playpic em { display:none;}
			.movList ul li a.playpic:hover em { display:block; width:31px; height:31px; background:url(images/pic.png) no-repeat -95px -28px; position:absolute; top:48px; left:30.5px;}
			/* ----- 集数 ----- */
			.movList ul li a.playpic span { display:block; width:86px; height:15px; line-height:15px; position:absolute; left:3px; bottom:3px;}
			.movList ul li a.playpic span.bg { background:url(images/pic.png) no-repeat -130px -28px;}
 
			/* ----- 标题和简短描述 ----- */
			.movList ul li p { width:100px; height:17px; line-height:17px; text-align:center; overflow:hidden;}
			.movList ul li p.mov-title { width:82px; padding-right:10px; position:relative;}
			.movList ul li p.mov-title a { color:#016a9f;}
			.movList ul li p.mov-title a:hover { text-decoration:underline;}
			.movList ul li p.mov-title a.playMov { display:block; position:absolute; width:16px; height:16px; right:0; top:0; background:url(images/pic.png) no-repeat -240px -28px;}
 
 
.list-pager { width:75px; height:18px; position:absolute; top:4px; right:11px;}
	.list-pager a { display:block; text-indent:-9999px;}
	/* ----- page-num ----- */
	.pager-num { width:33px; height:18px; float:left; overflow:hidden;}
		.pager-num a { height:6px; width:6px; background:url(images/pic.png) no-repeat -80px -28px; float:left; margin:6px 5px 0 0; overflow:hidden;}
		.pager-num a:hover { background-position:-80px -38px;}
		/* ----- selected ----- */
		.currentNum { background:url(images/pic.png) no-repeat -80px -38px!important;}
 
	/* ----- prev next ----- */
	.pager-op { float:right; width:36px; overflow:hidden;}
		.pager-op a { height:18px; width:18px; background:url(images/pic.png) no-repeat;}
		.pager-op a.page-up { float:left; background-position:-40px -28px;}
		.pager-op a.page-up:hover { background-position:0 -28px;}
		.pager-op a.page-down { float:right; background-position:-17px -28px;}
		.pager-op a.page-down:hover { background-position:-57px -28px;}

二. jQuery代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
/*
 * 时间关系，未修复IE6下图像透明的问题。
 */
 
$(document).ready(function() {
 
	//修复IE6的：hover
	$('.movList ul li a.playpic').hover(function() {
		$(this).children('em').css({'display': 'block'});
	}, function() {
		$(this).children('em').css({'display': 'none'});
	})
 
	var lenght = $('#div_hp_content ul').size();
	// currId->当前显示页， clickId->点击页面的标记
	var currId = 0, clickId = 0;
	// 获得需滑动的整体对象
	var $box = $('#div_hp_content ul');
 
	if(currId &lt;= 0) {
		currId = 0;
	} else if (currId >= lenght - 1) {
		currId = lenght;
	}
 
	$('.pager-num a').click(function(event) {
		//获得当前点击对象的id值
		var index = $(this).attr('id');
		checkIndex(index);
 
		//判断当前点击页数，若当前点击页数大于当前显示页，向左滑动
		//若当前点击页数小于当前显示页，向右滑动
		//否则不进行任何操作
		if(clickId &gt; currId) {
			$box.eq(currId).animate({'left':'-480px'}, 'slow')
						   .end().eq(clickId).animate({'left':'10px'}, 'slow');
 
		} else if(clickId &lt; currId) {
			$box.eq(currId).animate({'left':'480px'}, 'slow')
						   .end().eq(clickId).animate({'left':'10px'}, 'slow');
 
		} else {
			return false;
		};
 
		//设置当前显示页标记等于点击的页数
		currId = clickId;
		changeSelected();
 
		event.preventDefault();
	});
 
	//上一页
	$('.page-up').click(function(event) {
		if(currId &lt;= 0) {
			return false;
		};
		$box.eq(currId).animate({'left':'480px'}, 'slow')
					   .end().eq(currId - 1).animate({'left':'10px'}, 'slow');
		currId--;
		changeSelected();
 
		event.preventDefault();
	});
	//下一页
	$('.page-down').click(function(event) {
		if(currId >= lenght - 1) {
			return false;
		};
		$box.eq(currId).animate({'left':'-480px'}, 'slow')
					   .end().eq(currId + 1).animate({'left':'10px'}, 'slow');
		currId++;
		changeSelected();
 
		event.preventDefault();
	});
 
	//点击页数按钮检查index
	var checkIndex = function(index) {
		switch(index) {
			case 'a_hp_0':
			clickId = 0;
			break;
			case 'a_hp_1':
			clickId = 1;
			break;
			case 'a_hp_2':
			clickId = 2;
			break;
		};
	};
 
	//改变当前所选择的页数
	var changeSelected = function() {
		$('.pager-num a').removeClass('currentNum').eq(currId).addClass('currentNum');
	};
});

题外话：
呵呵，因为图片都是从迅雷网站上下载，有点小剽窃的感觉哦。不过，在这效果上有链接到迅雷相关电视、电影页面，也算给他做个小小的推广。大家就算扯平了吧。
你也许会喜欢阅读这些：
2010年09月2日 -- 示例:Selectbox模拟实现效果 (22)
2009年08月28日 -- jQuery:热点图片轮换展示效果 (14)
2009年07月14日 -- jQuery:使用css+jQuery模拟键盘 (10)
2009年07月10日 -- jQuery:书籍展示效果 (6)
2009年07月2日 -- jQuery:仿MSN网站的tab效果 (30)
2009年07月2日 -- jQuery：简单6行代码实现tab效果 (10)
2010年02月26日 -- jQuery:丰富效果的Flash图片播放（JS重写版） (18)
2009年11月26日 -- jQuery:增强型走马灯公告栏，可以抛弃marquee标签了 (20)
2009年09月23日 -- Ajax:当前页面更改内容，前端实现 (14)
2009年07月6日 -- CSS:纯css的伪动态分页效果 (17)
Hiro技术站 » CSS

CSS:区分IE版本的三个方法

一、IE条件判断语句

二、CSS规则（IE CSS hacks）

三、HTML条件判断，给出不同的className

扩展阅读：

你也许会喜欢阅读这些：

CSS:position属性定位总结

Html代码：

CSS代码：

jQuery代码：

你也许会喜欢阅读这些：

示例:Selectbox模拟实现效果

一、HTML代码：

二、CSS代码：

三、jQuery代码：

你也许会喜欢阅读这些：

CSS:Firefox 4 将支持CSS3 calc方法

一、calc()

二、min() | max()

你也许会喜欢阅读这些：

CSS:通过一个样式表区分IE的各个版本

Demo的css样式：

Demo的Html源码：

你也许会喜欢阅读这些：

CSS:CSS3基础（附图）

1.RGBA

2.Text Shadow

3.Border Radius

4.Box Shadow

你也许会喜欢阅读这些：

jQuery:增强型走马灯公告栏，可以抛弃marquee标签了

1.Html代码：

2.CSS代码：

3.JS代码：（备了部分注释，不懂的可以留言询问。）

你也许会喜欢阅读这些：

Ajax:当前页面更改内容，前端实现

1.HTML代码：

Ajax Editing

一、电影列表

二、书籍列表

3. jQuery代码：

你也许会喜欢阅读这些：

CSS:分享一些常用的css技巧

1. 使用!important:

2. 使用background设置图片来替换文本：

3. 清除浮动：

4. 文字垂直居中

5. 网站整体内容居中

你也许会喜欢阅读这些：

jQuery:热点图片轮换展示效果

1.Html代码：

2.Css代码：

3.jQuery代码：

你也许会喜欢阅读这些：

jQuery:使用css+jQuery模拟键盘

1.html代码

2. CSS代码：

3. JS代码：

你也许会喜欢阅读这些：

jQuery:书籍展示效果

1.html代码:

2.CSS代码：

3.xml代码：

4.jQuery代码：

你也许会喜欢阅读这些：

CSS:纯css的伪动态分页效果

1.Html代码：

2.css代码：

你也许会喜欢阅读这些：

jQuery:仿MSN网站的tab效果

html代码：

css代码：

jQuery代码：

你也许会喜欢阅读这些：

jQuery：简单6行代码实现tab效果

html代码：

热点新闻

娱乐新闻

就业形势
