He Min Blog» Blog Archive » 各种jquery实例效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>仿迅雷首页视频展示JQ版 hemin</title> <link href="style.css" rel="stylesheet" type="text/css" /> <style type="text/css"> * { margin:0; padding:0; word-break:break-all; } body { background:#FFF; color:#333; font:12px/1.5em Helvetica, Arial, sans-serif; } h1, h2, h3, h4, h5, h6 { font-size:1em; } a { color:#2B93D2; text-decoration:none; } a:hover { color:#E31E1C; text-decoration:underline; } ul, li { list-style:none; } fieldset, img { border:none; } /* v_show style */ .v_show { width:595px; margin:20px 0 1px 60px; } .v_caption { height:35px; overflow:hidden; background:url(http://www.hemin.cn//Photo/btn_cartoon.gif) no-repeat 0 0; } .v_caption h2 { float:left; width:84px; height:35px; overflow:hidden; background:url(http://www.hemin.cn//Photo/btn_cartoon.gif) no-repeat; text-indent:-9999px; } .v_caption .cartoon { background-position: 0 -100px; } .v_caption .variety { background-position:-100px -100px; } .highlight_tip { display:inline; float:left; margin:14px 0 0 10px; } .highlight_tip span { display:inline; float:left; width:7px; height:7px; overflow:hidden; margin:0 2px; background:url(http://www.hemin.cn//Photo/btn_cartoon.gif) no-repeat 0 -320px; text-indent:-9999px; cursor:pointer; } .highlight_tip .current { background-position:0 -220px; } .change_btn { float:left; margin:7px 0 0 10px; } .change_btn span { display:block; float:left; width:30px; height:23px; overflow:hidden; background:url(http://www.hemin.cn//Photo/btn_cartoon.gif) no-repeat; text-indent:-9999px; cursor:pointer; } .change_btn .prev { background-position:0 -400px; } .change_btn .next { width:31px; background-position:-30px -400px; } .v_caption em { display:inline; float:right; margin:10px 12px 0 0; font-family:simsun; } .v_content { position:relative; width:592px; height:160px; overflow:hidden; border-right:1px solid #E7E7E7; border-bottom:1px solid #E7E7E7; border-left:1px solid #E7E7E7; } .v_content_list { position:absolute; width:2500px;top:0px; left:0px; } .v_content ul {float:left;} .v_content ul li { display:inline; float:left; margin:10px 0px 0; padding:10px; background:url(http://www.hemin.cn//Photo/v_bg.gif) no-repeat; } .v_content ul li a { display:block; width:128px; height:80px; overflow:hidden; } .v_content ul li img { width:128px; height:96px; } .v_content ul li h4 { width:128px; height:18px; overflow:hidden; margin-top:12px; font-weight:normal; } .v_content ul li h4 a { display:inline !important; height:auto !important; } .v_content ul li span { color:#666; } .v_content ul li em { color:#888; font-family:Verdana; font-size:0.9em; } .ccc{ background-color:#ccc!important;} </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript"> $(function(){ var page = 1; var i = 4; $('.v_content_list li').click(function(){ $(this).addClass("ccc").siblings().removeClass("ccc"); }); $('.highlight_tip span').click(function(){ var $index = $('.highlight_tip span').index(this); $('.highlight_tip span').eq($index).addClass("current").siblings().removeClass("current"); if(!$('.v_content_list').is(":animated")){ if($index == 0){ $('.v_content_list').animate({left:'0px'},"slow");page = 1; }else if($index == 1){ $('.v_content_list').animate({left:'-592px'},"slow");page = 2; }else if($index == 2){ $('.v_content_list').animate({left:'-1184px'},"slow");page = 3; }else if($index == 3){ $('.v_content_list').animate({left:'-1776px'},"slow");page = 4; } } }); $('span.next').click(function(){ var $parent = $(this).parents("div.v_show"); var $v_show = $parent.find("div.v_content_list"); var $v_content = $parent.find("div.v_content"); var v_width = $v_content.width(); var len = $v_show.find("li").length; var page_count = Math.ceil(len / i); if(!$v_show.is(":animated")){ if(page == page_count){ $v_show.animate({left:'0px'},"slow"); page = 1; }else{ $v_show.animate({left:'-='+v_width},"slow"); page++; } } $parent.find("span").eq((page-1)).addClass("current").siblings().removeClass("current"); }); $('span.prev').click(function(){ var $parent = $(this).parents("div.v_show"); var $v_show = $parent.find("div.v_content_list"); var $v_content = $parent.find("div.v_content"); var v_width = $v_content.width(); var len = $v_show.find("li").length; var page_count = Math.ceil(len / i); if(!$v_show.is(":animated")){ if(page == 1){ $v_show.animate({ left : '-='+v_width*(page_count-1) }, "slow"); page = page_count; }else{ $v_show.animate({left:'+='+v_width},"slow"); page--; } } $parent.find("span").eq((page-1)).addClass("current").siblings().removeClass("current"); }); }); </script> </head> <body> <div class="v_show"> <div class="v_caption"> <h2 class="cartoon" title="卡通动漫">卡通动漫</h2> <div class="highlight_tip"> <span class="current">1</span><span>2</span><span>3</span><span>4</span> </div> <div class="change_btn"> <span class="prev" >上一页</span> <span class="next">下一页</span> </div> <em><a href="#">更多>></a></em> </div> <div class="v_content"> <div class="v_content_list"> <ul> <li><a href="#"><img src="http://www.hemin.cn//Photo/01.jpg" alt="海贼王" /></a><h4><a href="#">海贼王</a></h4><span>播放:<em>28,276</em></span></li> <li><a href="#"><img src="http://www.hemin.cn//Photo/01.jpg" alt="海贼王" /></a><h4><a href="#">海贼王</a></h4><span>播放:<em>28,276</em></span></li> <li><a href="#"><img src="http://www.hemin.cn//Photo/01.jpg" alt="海贼王" /></a><h4><a href="#">海贼王</a></h4><span>播放:<em>28,276</em></span></li> <li><a href="#"><img src="http://www.hemin.cn//Photo/01.jpg" alt="海贼王" /></a><h4><a href="#">海贼王</a></h4><span>播放:<em>28,276</em></span></li> <li><a href="#"><img src="http://www.hemin.cn//Photo/02.jpg" alt="哆啦A梦" /></a><h4><a href="#">哆啦A梦</a></h4><span>播放:<em>33,326</em></span></li> <li><a href="#"><img src="http://www.hemin.cn//Photo/02.jpg" alt="哆啦A梦" /></a><h4><a href="#">哆啦A梦</a></h4><span>播放:<em>33,326</em></span></li> <li><a href="#"><img src="http://www.hemin.cn//Photo/02.jpg" alt="哆啦A梦" /></a><h4><a href="#">哆啦A梦</a></h4><span>播放:<em>33,326</em></span></li> <li><a href="#"><img src="http://www.hemin.cn//Photo/02.jpg" alt="哆啦A梦" /></a><h4><a href="#">哆啦A梦</a></h4><span>播放:<em>33,326</em></span></li> <li><a href="#"><img src="http://www.hemin.cn//Photo/03.jpg" alt="火影忍者" /></a><h4><a href="#">火影忍者</a></h4><span>播放:<em>28,276</em></span></li> <li><a href="#"><img src="http://www.hemin.cn//Photo/03.jpg" alt="火影忍者" /></a><h4><a href="#">火影忍者</a></h4><span>播放:<em>28,276</em></span></li> <li><a href="#"><img src="http://www.hemin.cn//Photo/03.jpg" alt="火影忍者" /></a><h4><a href="#">火影忍者</a></h4><span>播放:<em>28,276</em></span></li> <li><a href="#"><img src="http://www.hemin.cn//Photo/03.jpg" alt="火影忍者" /></a><h4><a href="#">火影忍者</a></h4><span>播放:<em>28,276</em></span></li> <li><a href="#"><img src="http://www.hemin.cn//Photo/04.jpg" alt="龙珠" /></a><h4><a href="#">龙珠</a></h4><span>播放 <em>57,865</em></span></li> <li><a href="#"><img src="http://www.hemin.cn//Photo/04.jpg" alt="龙珠" /></a><h4><a href="#">龙珠</a></h4><span>播放 <em>57,865</em></span></li> <li><a href="#"><img src="http://www.hemin.cn//Photo/04.jpg" alt="龙珠" /></a><h4><a href="#">龙珠</a></h4><span>播放 <em>57,865</em></span></li> <li><a href="#"><img src="http://www.hemin.cn//Photo/04.jpg" alt="龙珠" /></a><h4><a href="#">龙珠</a></h4><span>播放 <em>57,865</em></span></li> </ul> </div> </div> </div> </body> </html>

提示：你可以先修改部分代码再运行。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-loose.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>按字母顺序分类导航－－ hemin jq版</title> <style type="text/css"> *{ margin:0;padding:0;} body{ font:normal 12px Verdana, Arial, Helvetica, sans-serif; text-align:center;} #warpper{ position:absolute; left:100px; top:100px;} h4{ padding-left:5px; float:left;} a{ text-decoration:underline; font-weight:bold;} dl{ height:18px; line-height:18px; background:#f7f7f7; border:1px solid #ccc; border-right:0;} dt,.normal{ position:relative; float:left; padding:0 5px; border-right:1px solid #ccc; text-decoration:none; width:14px; cursor:pointer;} dt.over{ border:1px solid #86e5f0; padding:0 5px 15px; border-bottom:1px solid #caf1f1; margin:-1px 0 0 -1px; z-index:1000; color:#ff6026; background:#caf1f1; height:9px; } ul{ overflow:hidden;} li{ float:left; list-style-type:none; margin:5px 10px; width:120px;} li a{ color:#000;} dl dd{ position:absolute; width:719px; left:-1px;top:24px!important; border:1px solid #86e5f0; background:#caf1f1; padding:10px 0;} #tooltip{margin-top:-40px;margin-left:-1px;display:none;color:#336699; } </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript"> $(function(){ var $dt = $('#warpper dt'); var $dd = $('#warpper dd'); $dd.hide(); for(var i = 0; i < $dd.length; i++){ //扫描dd有多少个。 var this_zero = $dd.eq(i).find("ul").find("li").length; if(this_zero == 0){ $dt.eq(i).css("color","#ccc"); } } $dt.mouseover(function(e){ var $index = $dt.index(this); var $this_dt = $dt.eq($index); var $this_dd = $dd.eq($index); var myNumber = $this_dd.find("ul").find("li").length; var tooltip = "<div id='tooltip'>"+myNumber+"</div>"; $this_dt.append(tooltip); $('#tooltip').show(); $this_dt.addClass("over").siblings("dt").removeClass("over"); $this_dd.show().siblings("dd").hide(); }).mouseout(function(){ $('#tooltip').remove(); }); }) </script> </head> <body> <dl id="warpper"> <h4>拼音检索：</h4> <dt>a</dt> <dd> <ul> <li><a href="#">Adidas</a></li> <li><a href="#">AEE/爱意</a></li> <li><a href="#">AF</a></li> <li><a href="#">AF棒球帽</a></li> <li><a href="#">Agatha</a></li> <li><a href="#">Albion/奥尔滨</a></li> <li><a href="#">AMD</a></li> <li><a href="#">Andox</a></li> <li><a href="#">Artini</a></li> <li><a href="#">爱普生</a></li> </ul> </dd> <dt>b</dt> <dd> <ul> <li><a href="#">fasfs</a></li> <li><a href="#">fsdfsd</a></li> </ul> </dd> <dt>c</dt> <dd> <ul> <li><a href="#">fasfs</a></li> <li><a href="#">fsdfsd</a></li> <li><a href="#">fdsfas</a></li> </ul> </dd> <dt>d</dt> <dd> <ul> <li><a href="#">fasfs</a></li> <li><a href="#">fsdfsd</a></li> <li><a href="#">fdsfas</a></li> <li><a href="#">fasdffsd</a></li> </ul> </dd> <dt>e</dt> <dd> <ul> <li><a href="#">fasfs</a></li> <li><a href="#">fsdfsd</a></li> <li><a href="#">fdsfas</a></li> <li><a href="#">fasdffsd</a></li> <li><a href="#">fasdfsaf</a></li> </ul> </dd> <dt>f</dt> <dd> <ul> <li><a href="#">贺敏贺敏贺敏</a></li> <li><a href="#">贺敏贺贺敏</a></li> <li><a href="#">贺敏贺敏贺贺敏贺敏</a></li> <li><a href="#">贺敏贺敏</a></li> <li><a href="#">Fancl</a></li> <li><a href="#">Fancl</a></li> <li><a href="#">Fancl</a></li> <li><a href="#">Fancl</a></li> <li><a href="#">Fancl</a></li> <li><a href="#">Fancl</a></li> <li><a href="#">Fancl</a></li> <li><a href="#">Fancl</a></li> <li><a href="#">Fancl</a></li> <li><a href="#">Fancl</a></li> </ul> </dd> <dt>g</dt> <dd> <ul> <li><a href="#">fasfs</a></li> <li><a href="#">fsdfsd</a></li> </ul> </dd> <dt>h</dt> <dd>No matching entries</dd> <dt>i</dt> <dd> <ul> <li><a href="#">fasfs</a></li> <li><a href="#">fsdfsd</a></li> <li><a href="#">fdsfas</a></li> <li><a href="#">fasdffsd</a></li> <li><a href="#">fasdfsaf</a></li> </ul> </dd> <dt>j</dt> <dd>No matching entries</dd> <dt>k</dt> <dd> <ul> <li><a href="#">贺敏贺敏贺敏</a></li> <li><a href="#">贺敏贺贺敏</a></li> <li><a href="#">贺敏贺敏贺敏贺贺</a></li> <li><a href="#">贺敏贺敏</a></li> <li><a href="#">Fancl</a></li> <li><a href="#">Fancl</a></li> <li><a href="#">Fancl</a></li> <li><a href="#">Fancl</a></li> <li><a href="#">Fancl</a></li> <li><a href="#">Fancl</a></li> <li><a href="#">Fancl</a></li> <li><a href="#">Fancl</a></li> <li><a href="#">Fancl</a></li> <li><a href="#">Fancl</a></li> </ul> </dd> <dt>l</dt> <dd>No matching entries</dd> <dt>m</dt> <dd> <ul> <li><a href="#">fasfs</a></li> <li><a href="#">fsdfsd</a></li> </ul> </dd> <dt>n</dt> <dd>No matching entries</dd> <dt>o</dt> <dd> <ul> <li><a href="#">fasfs</a></li> <li><a href="#">fsdfsd</a></li> <li><a href="#">fdsfas</a></li> <li><a href="#">fasdffsd</a></li> <li><a href="#">fasdfsaf</a></li> </ul> </dd> <dt>p</dt> <dd>No matching entries</dd> <dt>q</dt> <dd> <ul> <li><a href="#">贺敏贺敏贺敏</a></li> <li><a href="#">贺敏贺贺敏</a></li> <li><a href="#">贺敏贺敏贺敏贺敏</a></li> <li><a href="#">贺敏贺敏</a></li> <li><a href="#">Fancl</a></li> <li><a href="#">Fancl</a></li> <li><a href="#">Fancl</a></li> <li><a href="#">Fancl</a></li> <li><a href="#">Fancl</a></li> <li><a href="#">Fancl</a></li> <li><a href="#">Fancl</a></li> <li><a href="#">Fancl</a></li> <li><a href="#">Fancl</a></li> <li><a href="#">Fancl</a></li> </ul> </dd> <dt>r</dt> <dd>No matching entries</dd> <dt>s</dt> <dd>No matching entries</dd> <dt>t</dt> <dd> <ul> <li><a href="#">fasfs</a></li> <li><a href="#">fsdfsd</a></li> </ul> </dd> <dt>u</dt> <dd>No matching entries</dd> <dt>v</dt> <dd> <ul> <li><a href="#">fasfs</a></li> <li><a href="#">fsdfsd</a></li> <li><a href="#">fdsfas</a></li> <li><a href="#">fasdffsd</a></li> <li><a href="#">fasdfsaf</a></li> </ul> </dd> <dt>w</dt> <dd>No matching entries</dd> <dt>x</dt> <dd> <ul> <li><a href="#">fasfs</a></li> <li><a href="#">fsdfsd</a></li> <li><a href="#">fdsfas</a></li> <li><a href="#">fasdffsd</a></li> <li><a href="#">fasdfsaf</a></li> </ul> </dd> <dt>y</dt> <dd>No matching entries</dd> <dt>z</dt> <dd> <ul> <li><a href="#">贺敏贺敏贺敏</a></li> <li><a href="#">贺敏贺贺敏</a></li> <li><a href="#">贺敏贺敏贺贺敏</a></li> <li><a href="#">贺敏贺敏</a></li> <li><a href="#">Fancl</a></li> <li><a href="#">Fancl</a></li> <li><a href="#">Fancl</a></li> <li><a href="#">Fancl</a></li> <li><a href="#">Fancl</a></li> <li><a href="#">Fancl</a></li> <li><a href="#">Fancl</a></li> <li><a href="#">Fancl</a></li> <li><a href="#">Fancl</a></li> <li><a href="#">Fancl</a></li> </ul> </dd> </dl> <a href="http://www.hemin.cn/blog">http://www.hemin.cn/blog</a> </body> </html>

提示：你可以先修改部分代码再运行。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery 手风琴竖向菜单</title> <style type="text/css"> * {margin:0; padding:0} #accordion {width:259px; margin:50px auto; border:1px solid #333; border-top:none} .accordion {width:259px; font:12px Verdana, Arial; color:#333} .accordion dt {width:247px; padding:4px 6px; font-weight:bold; cursor:pointer; background-color:#666; background-image:url(images/arrow_down.gif); background-position: right center; background-repeat:no-repeat; color:#fff; border-top: 1px solid #333} .accordion dt:hover {background-color:#555} .accordion .open {background-color:#444; background-image:url(images/arrow_up.gif)} .accordion dd {overflow:hidden; background:#fff; display:0;} .accordion dd div { width:229px; border-top:none; padding:15px} </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $('#slider dd:eq(1),#slider dd:eq(2),#slider dd:eq(3)').css({height:0,display:"none"}); $('#slider dt:first').addClass("open"); $('#slider dd:first').css({display:"block"}); var $dt = $('#slider dt'); var $dd = $('#slider dd'); $dt.click( function(){ var $index = $dt.index(this); var $this_dt = $dt.eq($index); var $this_dd = $dd.eq($index); if($this_dd.css("display") == ("block")){ //判断dd是否显示 $this_dt.removeClass("open"); $this_dd.animate({height:0,opacity:0,},600,function(){$(this).css("display","none");}); }else{ var $div_h = $this_dd.css("display","block").find("div").innerHeight(); $this_dt.addClass("open").siblings("dt").removeClass("open"); $this_dd.animate({height:"+"+$div_h,opacity:1},600).siblings("dd").animate({height:0,opacity:0,},500,function(){$(this).css("display","none");}); } } ); }); </script> </head> <body> <div id="accordion"> <dl id="slider" class="accordion"> <dt>火影忍者</dt> <dd> <div> 从小身上封印着邪恶的九尾妖狐，无父无母的鸣人受尽了村里人的冷落，但是他却不知道原因，只是拼命用各种恶作剧试图吸引大家的注意力，人们却反而更远离他。好在还有依鲁卡老师关心他， <img src="http://hiphotos.baidu.com/jonny1008/pic/item/16c65216d09434224a90a712.jpg" width="100" height="102" alt="佩恩六道" /> <img src="http://hiphotos.baidu.com/w2008wjay/pic/item/f4c1ad7a80acfbd72f73b349.jpg" width="100" height="100" alt="漩涡鸣人" /> <br/> 鸣人的性格才没有变得扭曲。他总是干劲十足，嘻嘻哈哈，超级乐观。为了让更多的人认可自己，鸣人的目标是——成为第六代火影！ </div> </dd> <dt>天空之城</dt> <dd> <div> 故事发生的时间大概是十九世纪初，是个带有欧洲工业革命时期味道的年代，女孩希达被政府军软禁在飞艇上，灵敏的海盗们嗅到了希达身上不同一般人的身份，在深夜向飞艇发动了进攻，就在两方人马争夺西大的时候，慌乱逃跑的女孩不小心从飞艇上调了下去，可就在向着地面追落得时候，希达胸前的石头发出了耀眼的光芒，温柔的包围住希达，并慢慢落下地面，就在这时，矿工机师的徒弟巴斯在回程的路上看到了光芒中心的希达，并接下了她......<br/> <img src="http://hiphotos.baidu.com/xlycy1/pic/item/293347d1c1ad4208960a167a.jpg" width="220" height="100" alt="天空之城" /> </div> </dd> <dt>海贼王</dt> <dd> <div> 在某个海岛小渔村长大。和暂驻在渔村的大海盗红发杰克感情很好，于是一心想成为海盗。眼下的疤痕就是为了显示自己够狠自己用刀划的。可是路飞7岁时因为和杰克斗气糊里糊涂的吃了海盗们抢来的恶魔果实——橡皮果实（ゴムゴムの実），从此再也学不会游泳。<br/> <img src="http://hiphotos.baidu.com/haigevsjunjie/pic/item/e6525c44bd65900ecefca3e9.jpg" width="220" height="100" alt="海贼王" /> </div> </dd> <dt>死神</dt> <dd> <div> 主角是名叫黑崎一护的15岁高中生，是个热血少年。因一次被一种叫"虚"的怪物攻击时，认识了一个自称是死神的少女"露琪亚"。一护因为露琪亚给予了他力量而变成了死神，从此开始履行作为一个死神的职责--消灭虚... 露琪亚将死神的力量传给人类这件事被尸魂界得知，于是朽木白哉和阿散井恋次被派到现世执行将露琪亚带回尸魂界并关押的任务（人物应该不用介绍吧~！）。露琪亚不想让一护卷进此事，于是孤身一人前去迎战，可是能力终究敌不上队长级的。就在危急关头，一护找到了露琪亚，并想阻止他们将其带走。但现在的一护毕竟不强，被朽木白哉连砍两刀，倒在血泊中。露琪亚含泪离开... <br/> <img src="http://hiphotos.baidu.com/zxcc1121/pic/item/de773508284dae0ae824886c.jpg" width="220" height="100" alt="死神" /> </div> </dd> </dl> </div> </body> </html>

提示：你可以先修改部分代码再运行。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>jQuery 手风琴横向菜单</title> </head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> <link rel="stylesheet" href="/normal.css" /> <style type="text/css"> .wrapper_box {background-color:#FFFFFF;margin:0 auto;padding:8px 10px;width:916px;} #imageMenu {height:421px;overflow:hidden;position:relative;width:916px;} #imageMenu ul {display:block;height:421px;width:1500px;} #imageMenu ul li {float:left;} #imageMenu ul li a {background:#FFFFFF none no-repeat left top;border-right:5px solid #FFFFFF;cursor:pointer;display:block;height:421px;overflow:hidden;text-indent:-1000px;width:224px;} #imageMenu ul li.stap1 a {background:#FFFFFF url(http://www.dshos.com/images/step1.jpg) no-repeat left top;} #imageMenu ul li.stap2 a {background:#FFFFFF url(http://www.dshos.com/images/step2.jpg) no-repeat scroll left top;} #imageMenu ul li.stap3 a {background:#FFFFFF url(http://www.dshos.com/images/step3.jpg) no-repeat scroll left top;} #imageMenu ul li.stap4 a {background:#FFFFFF url(http://www.dshos.com/images/step4.jpg) no-repeat scroll left top;} </style> <script type="text/javascript"> var thisId; $(function (){ var curimg; $("#imageMenu li a").hover(start,clos); }) function start(){ $("#imageMenu li a").stop(true); if(!$(this).is(":animated")){ var $this=$(this); $("#imageMenu li a").animate({width:'48'},"slow",null,function(){ }); thisId = $this.parent().attr("class"); thisId = "#"+thisId; $this.animate({width:'759'},600).stop(); showInfo(thisId); } } function clos(){ $("#imageMenu li a").stop(true); $("#imageMenu li a").animate({width:'224'},600); $("#info").show(); } function showInfo(hh){ if(!$(this).is(":animated")){ $(".contain_box div").hide(0,function(){$(hh).fadeIn(0);}) } } </script> <body> <div class="wrapper_box"> <div id="imageMenu"> <ul> <li class="stap1"><a href="/"></a></li> <li class="stap2"><a href="/"></a></li> <li class="stap3"><a href="/"></a></li> <li class="stap4"><a href="/"></a></li> </ul> </div> </div> </body> </html>

提示：你可以先修改部分代码再运行。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>淡入淡出选项卡 hemin</title> <style type="text/css"> ul,li {margin: 0;padding: 0;list-style: none;} #tabfirst li {float: left;background-color: #868686;color: white;padding: 5px;margin-right: 2px;border: 1px solid white;} #tabfirst li.tabin{background-color:#6E6E6E;border: 1px solid #6E6E6E;} .contentfirst {clear: left;background-color:#6E6E6E;color: white;width: 300px;height: 100px;padding: 10px;display: none;} .contentin {display: block;} </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript"> $(function(){ var $div_li =$("#tabfirst li"); $div_li.click(function(){ var index = $div_li.index(this); $(this).addClass("tabin").siblings().removeClass("tabin"); setTimeout(function(){$('#tab_box > div').eq(index).fadeIn()},400); $('#tab_box > div').eq(index).siblings().fadeOut(); }); }) </script> </head> <body> <ul id="tabfirst"> <li class="tabin">标签1</li> <li>标签2</li> <li>标签3</li> </ul> <div id="tab_box"> <div class="contentin contentfirst">我是内容1 我是内容1 我是内容1 我是内容1 我是内容1 我是内容1 我是内容1 我是内容1 我是内容1 我是内容1 我是内容1 我是内容1 我是内容1 我是内容1 我是内容1 我是内容1 </div> <div class="contentfirst">我是内容2 我是内容2 我是内容2 我是内容2 我是内容2 我是内容2 我是内容2 我是内容2 我是内容2 我是内容2 我是内容2 我是内容2 我是内容2 我是内容2 </div> <div class="contentfirst">我是内容3 我是内容3 我是内容3 我是内容3 我是内容3 我是内容3 我是内容3 我是内容3 我是内容3 我是内容3 我是内容3 </div> </div> </body> </html>

提示：你可以先修改部分代码再运行。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>文字立体渐变</title> <style type="text/css" title=""> body{background:#333} .en{font-family:"lucida grande",verdana,sans-serif;font-size:35px;} .cn{font-family:黑体;font-size:50px;height:80px;overflow:hidden} .rainbows{position:relative;display:block;} .rainbow {background: transparent;display: block;position: relative;height: 1px;overflow: hidden;z-index: 5;} .rainbow span {position: absolute;display: block;top: 0;left: 0px;} .rainbows .highlight {color: #fff;display:block;position: absolute;top: -2px;left: 0px;z-index: 4;} .rainbows .shadow {color: #000;display:block;position: absolute;opacity: 0.5;filter:alpha(opacity=50);top: 2px;left: 2px;z-index: 3;} </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript"> function initGradients(s) { $(function() { $(s).each(function() { var el = this; var from = $(el).attr('gradFromColor')||'#ffffff', to = $(el).attr('gradToColor')||'#000000'; var fR = parseInt(from.substring(1, 3), 16), fG = parseInt(from.substring(3, 5), 16), fB = parseInt(from.substring(5, 7), 16), tR = parseInt(to.substring(1, 3), 16), tG = parseInt(to.substring(3, 5), 16), tB = parseInt(to.substring(5, 7), 16); var h = $(this).height() * 1.5; var html,cacheHTML=[]; this.initHTML = html = this.initHTML||this.innerHTML; this.innerHTML = ''; for (var i = 0; i < h; i++) { var c = '#' + (Math.floor(fR * (h - i) / h + tR * (i / h))).toString(16) + (Math.floor(fG * (h - i) / h + tG * (i / h))).toString(16) + (Math.floor(fB * (h - i) / h + tB * (i / h))).toString(16); cacheHTML.push('<span class="rainbow rainbow-' + i + '" style="color: ' + c + ';"><span style="top: ' + ( - i - 1) + 'px;">' + html + '</span></span>') } cacheHTML.push('<span class="highlight">' + html + '</span>','<span class="shadow">' + html + '</span>'); $(cacheHTML.join('')).appendTo(this) }) }) } initGradients('.rainbows'); </script> </head> <body> <span class="rainbows en">© 2009 Dragon Interactive. All Rights Reserved.</span> <span class="rainbows cn" gradToColor="#ff0000">汉字测试：红色渐变</span> <span class="rainbows cn" gradToColor="#00ff00">汉字测试：绿色渐变</span> <span class="rainbows cn" gradToColor="#0000ff">汉字测试：蓝色渐变</span> <span class="rainbows cn" gradToColor="#ffff00">汉字测试：黄色渐变</span> <span class="rainbows cn" gradToColor="#ff00ff">汉字测试：粉色渐变</span> <span class="rainbows cn" gradToColor="#00ffff">汉字测试：浅绿渐变</span> <span class="rainbows cn" gradFromColor="#000000" gradToColor="#ffffff">汉字测试：黑白渐变（不是从白色开始的渐变显示有点异常）</span> </body> </html>

提示：你可以先修改部分代码再运行。