jQuery Horizontal Erase Focus Image Special Effect Code Sharing

jQuery Horizontal Erase Focus Image Special Effect Code Sharing_jquery

WBOY

Release： 2016-05-16 15:40:29

Original

1106 people have browsed it

The example in this article describes the jQuery horizontal erasing focus image special effect. Share it with everyone for your reference. The details are as follows:
Xunlei jQuery Horizontal Erase Focus Image is a 7-screen horizontal erasure focus image code based on jQuery. It has thumbnails and titles, and the title can be customized.
Operation rendering: -------------------View the effect Download the source code---------- --------

Tips: If the browser does not work properly, you can try switching the browsing mode.
(1) Introduce CSS style in the head area:

<link rel="stylesheet" href="css/zzsc.css">

Copy after login

(2) The js code is placed at the bottom of the document:

<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>

Copy after login

The jQuery horizontal erasing focus image special effect code shared with you is as follows



迅雷jQuery横向擦除焦点图
<link rel="stylesheet" href="css/zzsc.css">








    
  
  
   
   
   
   
   
   
   
  
   
  
  
   银魂剧场版
永远的万

事屋

   石头门剧场版
负

荷领域的既视感
   高达UC
Gundam Unicorn
   剑风传奇
黄金时代
   夏日大作战
Summer Wars
   亡国的阿基德
Code Geass
   新EVA剧场版
New Evangelion
  
  
  上一页


  下一页


 


<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>

Copy after login

The above is the Thunder jQuery horizontal erasing focus image special effect code shared with you. I hope you can like it and apply it in practice.