本文實例講述了jQuery橫向擦除焦點圖特效。分享給大家供大家參考。具體如下：
迅雷jQuery橫向擦除焦點圖是一款基于jQuery實現的7屏橫向擦除焦點圖代碼，有縮略圖和標題，可以自定義標題。
運行效果圖：-------------------查看效果 下載源碼-------------------
小提示：瀏覽器中如果不能正常運行，可以嘗試切換瀏覽模式。
（1）在head區域引入CSS樣式：
<link rel="stylesheet" href="css/zzsc.css">
（2）js代碼放在文檔最底端：
<script type="text/javascript" src="js/jquery.js"></script><script type="text/javascript"> jQuery.noConflict(); jQuery(document).ready(function($){ $(".guidelist li").hover( function () { $(this).attr("class", "mouseon"); }, function () { $(this).attr("class", "mouseout"); } ); $(".ftoollist li").mouseover(function(){ $(this).siblings().removeClass("on"); $(this).addClass("on"); var preNumber=$(this).prevAll().size(); $(".fimglist li").removeClass("onpre"); $(".fimglist li:nth-child("+preNumber+")").addClass("onpre"); var margin = 990; margin = margin *preNumber; margin = margin * -1; $(".fimglist").stop().animate({marginLeft: margin + "px"}, {duration: 500}); }); });</script>為大家分享的jQuery橫向擦除焦點圖特效代碼如下
<head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>迅雷jQuery橫向擦除焦點圖</title><link rel="stylesheet" href="css/zzsc.css"><base target="_blank"></head><body><!-- 代碼 開始 --><br /><br /><div class="focus"> <div class="focusbox"> <div class="focusimg"> <ul class="fimglist clearfix"> <li><a href="http://www.survivalescaperooms.com/jiaoben/"><img src="images/Gintama.jpg" title="素材"></a></li> <li><a href="http://www.survivalescaperooms.com/jiaoben/"><img src="images/SteinsGate.jpg" title="素材"></a></li> <li><a href="http://www.survivalescaperooms.com/jiaoben/"><img src="images/Unicorn.jpg" title="素材"></a></li> <li><a href="http://www.survivalescaperooms.com/jiaoben/"><img src="images/Berserk.jpg" title="素材"></a></li> <li><a href="http://www.survivalescaperooms.com/jiaoben/"><img src="images/SummerWars.jpg" title="素材"></a></li> <li><a href="http://www.survivalescaperooms.com/jiaoben/"><img src="images/akito.jpg" title="素材"></a></li> <li><a href="http://www.survivalescaperooms.com/jiaoben/"><img src="images/EVA.jpg" title="素材"></a></li> </ul> </div> <div class="focustool"> <ul class="ftoollist clearfix"><!--通過控制該ul的left值來實現列表的左右移動，增量為931px--> <li class="on"><a href="http://www.survivalescaperooms.com/jiaoben/"><img src="images/Gintama_s.jpg"><p class="imgname">銀魂劇場版</p><p class="imgshortcat">永遠的萬事屋</p></a></li><!--當前項時為該li添加class: on--> <li><a href="http://www.survivalescaperooms.com/jiaoben/"><img src="images/SteinsGate_s.jpg"><p class="imgname">石頭門劇場版</p><p class="imgshortcat">負荷領域的既視感</p></a></li> <li><a href="http://www.survivalescaperooms.com/jiaoben/"><img src="images/Unicorn_s.jpg"><p class="imgname">高達UC</p><p class="imgshortcat">Gundam Unicorn</p></a></li> <li><a href="http://www.survivalescaperooms.com/jiaoben/"><img src="images/Berserk_s.jpg"><p class="imgname">劍風傳奇</p><p class="imgshortcat">黃金時代</p></a></li> <li><a href="http://www.survivalescaperooms.com/jiaoben/"><img src="images/SummerWars_s.jpg"><p class="imgname">夏日大作戰</p><p class="imgshortcat">Summer Wars</p></a></li> <li><a href="http://www.survivalescaperooms.com/jiaoben/"><img src="images/akito_s.jpg"><p class="imgname">亡國的阿基德</p><p class="imgshortcat">Code Geass</p></a></li> <li><a href="http://www.survivalescaperooms.com/jiaoben/"><img src="images/EVA_s.jpg"><p class="imgname">新EVA劇場版</p><p class="imgshortcat">New Evangelion</p></a></li> </ul> </div> <a href="javascript://" class="btn_pre" target="_self" style="display:none">上一頁</a> <a href="javascript://" class="btn_next" target="_self" style="display:none">下一頁</a> </div></div><script type="text/javascript" src="js/jquery.js"></script><script type="text/javascript"> jQuery.noConflict(); jQuery(document).ready(function($){ $(".guidelist li").hover( function () { $(this).attr("class", "mouseon"); }, function () { $(this).attr("class", "mouseout"); } ); $(".ftoollist li").mouseover(function(){ $(this).siblings().removeClass("on"); $(this).addClass("on"); var preNumber=$(this).prevAll().size(); $(".fimglist li").removeClass("onpre"); $(".fimglist li:nth-child("+preNumber+")").addClass("onpre"); var margin = 990; margin = margin *preNumber; margin = margin * -1; $(".fimglist").stop().animate({marginLeft: margin + "px"}, {duration: 500}); }); });</script><!-- 代碼 結束 --></div></body></html>以上就是為大家分享的迅雷jQuery橫向擦除焦點圖特效代碼，希望大家可以喜歡，并應用到實踐中。
新聞熱點
疑難解答
