百度应用jQuery图文列表切换特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是百度应用jQuery图文列表切换特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<link rel="stylesheet" href="css/zzsc.css" />
<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
<title>百度应用jQuery图文列表切换</title>    
</head>
<body>
<div style="margin:50px auto; width:250px;">
<div class="s-index-side">
<div class="part weekly game-top10 cls">
<div class="title"><h3>游戏Top10</h3><span class="s-index-icon game-top10-icon">icon图标</span></div>
<ul class="weekly-list cls">
<li>
<div class="app-show-title"><span class="num s-index-org">1.</span><a href="#">植物大战僵尸2(高清版)</a></div>
<div class="app-show-block">
<a href="#" class="pic"><img src="images/1.png" alt="植物大战僵尸2(高清版)"><span class="mask mask2"></span></a>
<div class="s-index-star s-index-star-8"><div class="s-index-star-big wrap"><span class="one">&nbsp;</span><span class="two">&nbsp;</span><span class="three">&nbsp;</span><span class="four">&nbsp;</span><span class="five">&nbsp;</span></div></div>
<a href="###" data-sname="植物大战僵尸2(高清版)" data-icon="images/1.png" data-type="game" data-size="33461069" data-versionname="1.0.4" data-versioncode="4" data-package="com.popcap.pvz2cthdbddk" data-download_url="#" data-updatetime="2013-09-30" class="event-exe-install s-index-down s-index-icon" tjurl="#">安&nbsp;装</a>
</div>
</li>
<li>
<div class="app-show-title"><span class="num s-index-org">2.</span><a href="#">节奏大师</a></div>
<div class="app-show-block">
<a href="#" class="pic"><img src="images/2.png" alt="节奏大师"><span class="mask mask2"></span></a>
<div class="s-index-star s-index-star-6"><div class="s-index-star-big wrap"><span class="one">&nbsp;</span><span class="two">&nbsp;</span><span class="three">&nbsp;</span><span class="four">&nbsp;</span><span class="five">&nbsp;</span></div></div>
<a href="###" data-sname="节奏大师" data-icon="images/2.png" data-type="game" data-size="27834715" data-versionname="2.0.4.10" data-versioncode="13" data-package="com.tencent.game.rhythmmaster" data-download_url="#" data-updatetime="2013-09-02" class="event-exe-install s-index-down s-index-icon" tjurl="#">安&nbsp;装</a>
</div>
</li>
<li>
<div class="app-show-title"><span class="num s-index-org">3.</span><a href="#">神庙逃亡2</a></div>
<div class="app-show-block">
<a href="#" class="pic"><img src="images/3.png" alt="神庙逃亡2"><span class="mask mask2"></span></a>
<div class="s-index-star s-index-star-9"><div class="s-index-star-big wrap"><span class="one">&nbsp;</span><span class="two">&nbsp;</span><span class="three">&nbsp;</span><span class="four">&nbsp;</span><span class="five">&nbsp;</span></div></div>
<a href="###" data-sname="神庙逃亡2" data-icon="images/3.png" data-type="game" data-size="25360687" data-versionname="1.3.2" data-versioncode="4503" data-package="com.imangi.templerun2" data-download_url="#" data-updatetime="2013-09-30" class="event-exe-install s-index-down s-index-icon" tjurl="#">安&nbsp;装</a>
</div>
</li>
<li>
<div class="app-show-title"><span class="num">4.</span><a href="#">地铁跑酷</a></div>
<div class="app-show-block">
<a href="#" class="pic"><img src="images/4.png" alt="地铁跑酷"><span class="mask mask2"></span></a>
<div class="s-index-star s-index-star-8"><div class="s-index-star-big wrap"><span class="one">&nbsp;</span><span class="two">&nbsp;</span><span class="three">&nbsp;</span><span class="four">&nbsp;</span><span class="five">&nbsp;</span></div></div>
<a href="###" data-sname="地铁跑酷" data-icon="images/4.png" data-type="game" data-size="21359627" data-versionname="2.10.4" data-versioncode="44" data-package="com.kiloo.subwaysurf" data-download_url="#" data-updatetime="2013-09-30" class="event-exe-install s-index-down s-index-icon" tjurl="#">安&nbsp;装</a>
</div>
</li>
<li>
<div class="app-show-title"><span class="num">5.</span><a href="#">天天爱消除</a></div>
<div class="app-show-block">
<a href="#" class="pic"><img src="images/5.png" alt="天天爱消除"><span class="mask mask2"></span></a>
<div class="s-index-star s-index-star-7"><div class="s-index-star-big wrap"><span class="one">&nbsp;</span><span class="two">&nbsp;</span><span class="three">&nbsp;</span><span class="four">&nbsp;</span><span class="five">&nbsp;</span></div></div>
<a href="###" data-sname="天天爱消除" data-icon="images/5.png" data-type="game" data-size="24309275" data-versionname="1.0.3.0" data-versioncode="11" data-package="com.tencent.peng" data-download_url="#" data-updatetime="2013-09-22" class="event-exe-install s-index-down s-index-icon" tjurl="#">安&nbsp;装</a>
</div>
</li>
<li>
<div class="app-show-title"><span class="num">6.</span><a href="#">天天酷跑</a></div>
<div class="app-show-block">
<a href="#" class="pic"><img src="images/6.png" alt="天天酷跑"><span class="mask mask2"></span></a>
<div class="s-index-star s-index-star-8"><div class="s-index-star-big wrap"><span class="one">&nbsp;</span><span class="two">&nbsp;</span><span class="three">&nbsp;</span><span class="four">&nbsp;</span><span class="five">&nbsp;</span></div></div>
<a href="###" data-sname="天天酷跑" data-icon="images/6.png" data-type="game" data-size="31396115" data-versionname="1.0.6.0" data-versioncode="10" data-package="com.tencent.pao" data-download_url="http://gdown.baidu.com/data/wisegame/cb148bef52629659/tiantiankupao_10.apk" data-updatetime="2013-09-13" class="event-exe-install s-index-down s-index-icon" tjurl="#">安&nbsp;装</a>
</div>
</li>
<li>
<div class="app-show-title"><span class="num">7.</span><a href="#">欢乐斗地主(完整版)</a></div>
<div class="app-show-block">
<a href="#" class="pic"><img src="images/7.png" alt="欢乐斗地主(完整版)"><span class="mask mask2"></span></a>
<div class="s-index-star s-index-star-9"><div class="s-index-star-big wrap"><span class="one">&nbsp;</span><span class="two">&nbsp;</span><span class="three">&nbsp;</span><span class="four">&nbsp;</span><span class="five">&nbsp;</span></div></div>
<a href="###" data-sname="欢乐斗地主(完整版)" data-icon="images/7.png" data-type="game" data-size="34738978" data-versionname="3.0.102" data-versioncode="32" data-package="com.qqgame.hlddz" data-download_url="#" data-updatetime="2013-09-24" class="event-exe-install s-index-down s-index-icon" tjurl="#">安&nbsp;装</a>
</div>
</li>
<li>
<div class="app-show-title"><span class="num">8.</span><a href="#">水果忍者</a></div>
<div class="app-show-block">
<a href="http://as.baidu.com/a/item?docid=3666615&pre=web_am_indexhot&pos=home_2015_7&f=home_2015_7" class="pic"><img src="images/8.png" alt="水果忍者"><span class="mask mask2"></span></a>
<div class="s-index-star s-index-star-8"><div class="s-index-star-big wrap"><span class="one">&nbsp;</span><span class="two">&nbsp;</span><span class="three">&nbsp;</span><span class="four">&nbsp;</span><span class="five">&nbsp;</span></div></div>
<a href="###" data-sname="水果忍者" data-icon="images/8.png" data-type="game" data-size="34067302" data-versionname="1.8.6" data-versioncode="1807" data-package="com.halfbrick.fruitninja" data-download_url="#" data-updatetime="2013-10-02" class="event-exe-install s-index-down s-index-icon" tjurl="#">安&nbsp;装</a>
</div>
</li>
<li>
<div class="app-show-title"><span class="num">9.</span><a href="#">保卫萝卜</a></div>
<div class="app-show-block">
<a href="#" class="pic"><img src="images/9.png" alt="保卫萝卜"><span class="mask mask2"></span></a>
<div class="s-index-star s-index-star-9"><div class="s-index-star-big wrap"><span class="one">&nbsp;</span><span class="two">&nbsp;</span><span class="three">&nbsp;</span><span class="four">&nbsp;</span><span class="five">&nbsp;</span></div></div>
<a href="###" data-sname="保卫萝卜" data-icon="images/9.png" data-type="game" data-size="49775047" data-versionname="1.1.1" data-versioncode="258" data-package="com.carrot.carrotfantasy" data-download_url="#" data-updatetime="2013-09-30" class="event-exe-install s-index-down s-index-icon" tjurl="#">安&nbsp;装</a>
</div>
</li>
<li>
<div class="app-show-title"><span class="num">10.</span><a href="#">消灭星星</a></div>
<div class="app-show-block">
<a href="#" class="pic"><img src="images/10.png" alt="消灭星星"><span class="mask mask2"></span></a>
<div class="s-index-star s-index-star-8"><div class="s-index-star-big wrap"><span class="one">&nbsp;</span><span class="two">&nbsp;</span><span class="three">&nbsp;</span><span class="four">&nbsp;</span><span class="five">&nbsp;</span></div></div>
<a href="###" data-sname="消灭星星" data-icon="images/10.png" data-type="game" data-size="2865622" data-versionname="2.0.3" data-versioncode="203" data-package="com.wpd.game.popstar" data-download_url="#" data-updatetime="2013-09-17" class="event-exe-install s-index-down s-index-icon" tjurl="#">安&nbsp;装</a>
</div>
</li>
</ul>
</div>
</div>
<script type="text/javascript">
$(function(){
$(".weekly-list li").bind("mouseenter",weekly_ani).bind("mouseleave",function(){clearTimeout($(this).data("setTime"));});
function weekly_ani(e){
var me=$(e.target).closest("li");
if(me.hasClass("current")) return;
var orili=me.parent().find(".current");
$(this).data("setTime",setTimeout(function(){weekly_move(me,orili,100,39)},150));
}
function weekly_move(me,orili,h,h2){
me.addClass("current");
$(".weekly-list li").unbind("mouseenter",weekly_ani);
setTimeout(function(){
var cur_h=me.height();
if(cur_h < h-2){
var cur_orih=orili.height();
var dh=Math.round((h-cur_h)/2.5);
me.css("height",cur_h+dh);
orili.css("height",cur_orih-dh);
setTimeout(arguments.callee,25);
}
else{
me.addClass("current").css("height",h);
orili.css("height",h2);
$(".weekly-list li").bind("mouseenter",weekly_ani);
orili.removeClass("current");
}
},25);
}
$(".weekly-list").find("li:first").addClass("current").animate({height:100}, 300);
});

</script>
<br>
</div>
</body>
</html>

CSS代码(zzsc.css):

/*reset文件 */
html{overflow-x:hidden;overflow-y:scroll;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,textarea,select,optgroup,option,fieldset,legend,p,blockquote,th,td{margin:0;padding:0;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,th,var,optgroup{font-style:normal;font-weight:normal;}
ins{text-decoration:none;}
li{list-style:none;}
table{font-size:inherit;font:100%;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;}
q:before,q:after{content:'';}
abbr,acronym{border:0;font-variant:normal;}
legend{color:#000;}
input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;}
input,button,textarea,select{margin:0;*font-size:100%;line-height:1.2;}
a img,img{-ms-interpolation-mode:bicubic;}
.cls:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
.cls{zoom:1;}
article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary{display:block;}
/*reset文件结束 */
body{background:#fff;font-size:14px;font-family:arial,verdana,sans-serif;color:#333;}
.clear{clear:both;line-height:0px;height:0px;overflow:hidden;}
a{text-decoration:none;color:#666;outline:none;}
a:hover{text-decoration:underline;}
.gray{color:#666}
.red{color:#cc0000}
.bold{font-weight:bold;}
.middleline{text-decoration:line-through;}
/*thre*/
.s-index-org{color:#FF4E00;}
.s-index-icon,.s-index-star span{display:block;background-image:url(http://m.baidu.com/static/as/images/s-index-icon-3.png?ver=201208010);overflow:hidden;text-indent:-1000em;}
.s-index-content{}
.main-content{float:left;width:752px;}
.part{border:1px solid #d8d8d8;padding-bottom:5px;margin-top:10px;}
.part .title{height:43px;background-color:#f5f5f5;position:relative;}
.part .title h3{height:40px;line-height:40px;color:#000;border-bottom:1px solid #d8d8d8;padding-left:40px;}
.part .title .s-index-icon{position:absolute;width:20px;height:18px;top:11px;left:15px;}
.part .title .more{position:absolute;right:10px;top:12px;color:#333;font-family:"宋体",arial,verdana,sans-serif}
.part .title .hot-icon{background-position:-137px 0px;*top:10px;}
.part .title .op-page{position:absolute;top:0px;right:0px;width:120px;font-size:16px;font-weight:bold}
.part .title .op-page li{float:left;width:39px;border-left:1px solid #d8d8d8;height:40px;line-height:40px;text-align:center;cursor:pointer;}
.part .title .op-page li.select{color:#fff;padding-left:1px;width:38px;background:#FF4E00 url(http://m.baidu.com/static/as/images/s-index-icon-1.png?ver=20120730) no-repeat -291px -47px;}
.part .title .op-page li.select span{display:block;height:40px;background:url(http://m.baidu.com/static/as/images/s-index-icon-1.png?ver=20120730) no-repeat right -47px;}
.app-list{font-size:12px;padding-left:10px;}
.app-list li{float:left;width:104px;height:124px;padding-top:14px;text-align:center;z-index:1;overflow:hidden;}
.app-list li a:hover{color:#ff4e00;}
.app-list li .normal-wrap{margin:0px 10px;height:124px;}
.app-list li .normal-wrap .down-num{color:#888;}
.app-list li .normal-wrap .rank-down-num{color:#999;}
.app-list li .pic{display:block;width:68px;height:68px;overflow:hidden;margin:0px auto;cursor:pointer;}
.app-list li .pic img{width:68px;height:68px;display:block;}
.app-list li h4{color:#555;height:24px;line-height:24px;margin:5px auto 0px auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.app-list li h4 a{color:#555}
.app-info-pannel{display:none;position:absolute;z-index:3;width:200px;height:114px;top:14px;left:74px;text-align:left;padding:10px 0px 0px 28px;background:url(http://m.baidu.com/static/as/images/li-pannel.png);_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://m.baidu.com/static/as/images/li-pannel.png',sizingMethod='crop');}
.app-list li .app-info-pannel h4{font-size:14px;color:#333;height:26px;margin-top:0px;}
.app-info-pannel .detail{padding:8px 25px 0px 0px;height:56px;overflow:hidden;line-height:1.5em;color:#797979;word-wrap:break-word;word-break:break-all;}
.app-info-pannel .score{position:absolute;top:12px;right:18px;font-style:italic;font-weight:bold;}
.app-info-pannel .score .num{font-size:24px;color:#FF4E00;}
.app-info-pannel .score .num em{font-size:30px;font-style:italic;font-weight:bold;}
.app-list li.hover .app-info-pannel{display:block;}
.app-list li .download{display:none;}
.app-list li.hover .download,.s-index-down{display:block;text-align:center;font-size:12px;margin:0px auto;text-indent:0px;width:60px;height:25px;line-height:25px;color:#fff;text-decoration:none;background-position:-228px -47px;background-color:#FF4E00;}
.app-list li.hover .download:hover,.s-index-down:hover{background-position:-228px -74px;text-decoration:none;}
.app-list li.hover .download:hover{color:#fff}
.app-list li.hover .down-num{display:none;}
.app-list li.hover .rank-down-num{display:none;}
.s-index-star{height:15px;_margin-top:-2px;font-size:0px;line-height:0px;}
.s-index-star span{display:inline-block;margin-top:0px;width:13px;height:13px;overflow:hidden;background-position:-181px -22px;text-indent:0px;}
.s-index-star-0 .one,.s-index-star-0 .two,.s-index-star-0 .three,.s-index-star-0 .four,.s-index-star-0 .five{background-position:-211px -22px;}
.s-index-star-1 .two,.s-index-star-1 .three,.s-index-star-1 .four,.s-index-star-1 .five{background-position:-211px -22px;}
.s-index-star-2 .two,.s-index-star-2 .three,.s-index-star-2 .four,.s-index-star-2 .five{background-position:-211px -22px;}
.s-index-star-3 .three,.s-index-star-3 .four,.s-index-star-3 .five{background-position:-211px -22px;}
.s-index-star-4 .three,.s-index-star-4 .four,.s-index-star-4 .five,.s-index-star-5 .four,.s-index-star-5 .five{background-position:-211px -22px;}
.s-index-star-6 .four,.s-index-star-6 .five,.s-index-star-7 .five,.s-index-star-8 .five{background-position:-211px -22px;}
.s-index-star-1 .one,.s-index-star-3 .two,.s-index-star-5 .three,.s-index-star-7 .four,.s-index-star-9 .five{background-position:-196px -22px;}
.s-index-side{width:220px;}
.s-index-side .part{padding:0px;}
.s-index-side .part .title{height:41px;}
.s-index-side .part .title .s-index-icon{left:10px;}
.s-index-side .part .title h3{padding-left:32px;font-size:14px;}
.s-index-side .part .game-icon{background-position:-155px 0px;}
.s-index-side .part .rank-game-icon{background-position:-228px -302px;}
.s-index-side .part .rank-soft-icon{background-position:-250px -302px;}
.s-index-side .types{width:218px;overflow:hidden;border-bottom:none;position:relative}
.s-index-side .types .title h3{padding-left:0px;text-align:center;}
.s-index-side .types .title .s-index-icon{top:13px;left:58px;}
.s-index-side .types-list{margin:0px -5px 0px 0px;}
.s-index-side .types-list li{width:109px;height:44px;position:relative;border-right:1px solid #d8d8d8;overflow:hidden;line-height:44px;text-align:center;float:left;border-bottom:1px solid #d8d8d8;background-color:#f5f5f5;}
.s-index-side .types-list li a{display:block;color:#333;height:44px;line-height:44px;border-left:1px solid #fff;border-top:1px solid #fff;}
.s-index-side .types-list li a:hover{color:#ff4e00}
.s-index-side .types-list li.select{background:#FF4E00 url(http://m.baidu.com/static/as/images/s-index-icon-1.png?ver=20120730) no-repeat -235px 0px;}
.s-index-side .types-list li.select a{margin-left:2px;color:#fff;border:none;background:url(http://m.baidu.com/static/as/images/s-index-icon-1.png?ver=20120730) no-repeat right 0px;font-weight:bold;cursor:default;}
.s-index-side .types-list li.select a:hover{text-decoration:none;color:#fff;}
.s-index-side .types-list li .s-index-icon{display:none;}
.s-index-side .types-list li.select .s-index-icon{position:absolute;display:block;width:6px;height:8px;top:19px;left:11px;background-position:-72px -59px;}
.s-index-side .types-list li.left,.s-index-side .types-list li:nth-child(odd){border-right:1px solid #d8d8d8;width:108px;}
.s-index-side .types-list li.left a{border-left-color:#f5f5f5;}
.s-index-side .weekly{margin-top:10px;font-size:12px;zoom:1;}
.s-index-side .app-show-block{padding:2px 0px 0px 80px;position:relative;height:78px;text-align:left;}
.s-index-side .app-show-block h4{height:24px;line-height:24px;font-size:14px;}
.s-index-side .app-show-block h4 span{font-weight:bold;}
.s-index-side .app-show-block h4 a{color:#555}
.s-index-side .app-show-block h4 a:hover{color:#FF4E00}
.s-index-side .app-show-block .s-index-down{margin:0px;margin-top:7px;font-weight:normal;background-color:#FF4E00}
.s-index-side .app-show-block .pic{position:absolute;top:4px;left:0px;cursor:pointer;}
.s-index-side .app-show-block img{display:block;width:68px;height:68px;}
.s-index-side .weekly .app-show-block{margin:0px 0px 0px 12px;padding-left:65px;height:60px;}
.s-index-side .weekly .app-show-block a{height:25px;}
.s-index-side .weekly .app-show-block .pic{position:absolute;top:0px;left:0px;}
.s-index-side .weekly .app-show-block img{display:block;height:52px;width:52px;}
.s-index-side .part .weekly-icon{background-position:-193px 0px;}
.s-index-side .weekly-list{padding:0px 10px 2px 10px;margin-top:-1px;position:relative;}
.s-index-side .weekly-list li{height:39px;line-height:39px;border-top:1px dotted #d8d8d8;overflow:hidden;*position:relative;zoom:1;}
.s-index-side .weekly-list .app-show-title{padding-left:10px;}
.s-index-side .weekly-list li .num{font-size:12px;height:40px;line-height:40px;padding-right:10px;font-weight:bold;}
.s-index-side .weekly-list li a{}
.s-index-side .weekly-list li.current a{font-weight:bold;}
.s-index-side .weekly-list li.current .app-show-title a:hover{color:#ff4e00;}
.s-index-side .weekly-list li.current .s-index-down{font-weight:normal;}
.s-index-side .s-index-ad img{height:193px;width:220px;}
.s-index-side .we-down{margin-top:10px;padding-bottom:8px;}
.s-index-side .we-down-icon{background-position:-138px -19px;}
.s-index-side .we-down .title h3{padding-left:36px;}
.s-index-side .tip-info{color:#969696;font-size:12px;}
.s-index-side .we-down-list{padding:0px 12px;height:230px;overflow-y:hidden;position:relative;}
.s-index-side .we-down-list li{padding:8px 0px 5px 0px;border-bottom:1px dotted #d8d8d8;}
.s-index-side .we-down .app-show-block{margin-top:8px;}
.s-index-side .part .title .game-top10-icon{background-position:-140px -54px}
.s-index-side .part .title .soft-top10-icon{background-position:-165px -54px}
.s-index-side .part .title .soft-must-icon{background-position:-182px -54px}

附件:下载该文件资源,减少时间成本(增值服务)