社交平台应用jQuery图文列表切换
1、准备好需要用到的图标。
3、书写hmtl代码。<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="#">植物</a></div> <div class="app-show-block"> <a href="#" class="pic"><img src="images/1.png" alt="植物"><span class="mask mask2"></span></a> <div class="s-index-star s-index-star-8">s <div class="s-index-star-big wrap"><span class="one"> </span><span class="two"> </span><span class="three"> </span><span class="four"> </span><span class="five"> </span></div> </div> <a href="###" data-sname="植物">安 装</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"> </span><span class="two"> </span><span class="three"> </span><span class="four"> </span><span class="five"> </span></div> </div> <a href="###">安 装</a> </div> </li> <li> <div class="app-show-title"><span class="num s-index-org">3.</span><a href="#">神庙逃亡</a></div> <div class="app-show-block"> <a href="#" class="pic"><img src="images/3.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"> </span><span class="two"> </span><span class="three"> </span><span class="four"> </span><span class="five"> </span></div> </div> <a href="###">安 装</a> </div> </li> </ul> </div></div>
5、书写并添加js代码。<script src="js/jquery-1.6.2.min.js"></script><script>$(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").an1mate({height:100}, 300);});</script>
7、查看效果。
