jQuery橫向擦除焦點圖特效代碼分享

更新時間：2015年09月06日 16:31:31 投稿：lijiao

這篇文章主要介紹了jQuery橫向擦除焦點圖特效，一個具有自己特色的焦點圖會吸引用戶的注意力，讓用戶產(chǎn)生瀏覽網(wǎng)站的興趣至關(guān)重要，現(xiàn)在小編推薦給大家一款特別棒的焦點圖，感興趣的小伙伴可以參考下。

本文實例講述了jQuery橫向擦除焦點圖特效。分享給大家供大家參考。具體如下：
迅雷jQuery橫向擦除焦點圖是一款基于jQuery實現(xiàn)的7屏橫向擦除焦點圖代碼，有縮略圖和標(biāo)題，可以自定義標(biāo)題。
運(yùn)行效果圖：-------------------查看效果下載源碼-------------------

小提示：瀏覽器中如果不能正常運(yùn)行，可以嘗試切換瀏覽模式。
（1）在head區(qū)域引入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.dhdzp.com/jiaoben/"><img src="images/Gintama.jpg" 

title="素材"></a></li>
   <li><a href="http://www.dhdzp.com/jiaoben/"><img src="images/SteinsGate.jpg" 

title="素材"></a></li>
   <li><a href="http://www.dhdzp.com/jiaoben/"><img src="images/Unicorn.jpg" 

title="素材"></a></li>
   <li><a href="http://www.dhdzp.com/jiaoben/"><img src="images/Berserk.jpg" 

title="素材"></a></li>
   <li><a href="http://www.dhdzp.com/jiaoben/"><img src="images/SummerWars.jpg" 

title="素材"></a></li>
   <li><a href="http://www.dhdzp.com/jiaoben/"><img src="images/akito.jpg" title="

素材"></a></li>
   <li><a href="http://www.dhdzp.com/jiaoben/"><img src="images/EVA.jpg" title="素

材"></a></li>
  </ul>
  </div> 
  <div class="focustool">
  <ul class="ftoollist clearfix"><!--通過控制該ul的left值來實現(xiàn)列表的左右移動，增量為

931px-->
   <li class="on"><a href="http://www.dhdzp.com/jiaoben/"><img 

src="images/Gintama_s.jpg"><p class="imgname">銀魂劇場版</p><p class="imgshortcat">永遠(yuǎn)的萬

事屋</p></a></li><!--當(dāng)前項時為該li添加class: on-->
   <li><a href="http://www.dhdzp.com/jiaoben/"><img 

src="images/SteinsGate_s.jpg"><p class="imgname">石頭門劇場版</p><p class="imgshortcat">負(fù)

荷領(lǐng)域的既視感</p></a></li>
   <li><a href="http://www.dhdzp.com/jiaoben/"><img src="images/Unicorn_s.jpg"><p 

class="imgname">高達(dá)UC</p><p class="imgshortcat">Gundam Unicorn</p></a></li>
   <li><a href="http://www.dhdzp.com/jiaoben/"><img src="images/Berserk_s.jpg"><p 

class="imgname">劍風(fēng)傳奇</p><p class="imgshortcat">黃金時代</p></a></li>
   <li><a href="http://www.dhdzp.com/jiaoben/"><img 

src="images/SummerWars_s.jpg"><p class="imgname">夏日大作戰(zhàn)</p><p 

class="imgshortcat">Summer Wars</p></a></li>
   <li><a href="http://www.dhdzp.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.dhdzp.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>
<!-- 代碼 結(jié)束 -->

</div>
</body>
</html>

以上就是為大家分享的迅雷jQuery橫向擦除焦點圖特效代碼，希望大家可以喜歡，并應(yīng)用到實踐中。

您可能感興趣的文章: