Home >Web Front-end >JS Tutorial >jQuery Horizontal Erase Focus Image Special Effect Code Sharing_jquery

jQuery Horizontal Erase Focus Image Special Effect Code Sharing_jquery

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOriginal
2016-05-16 15:40:291159browse

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

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

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



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





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

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.

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article:Issues with wildcard support and dynamic file name generation when configuring Grunt's Task_javascript skillsNext article:Issues with wildcard support and dynamic file name generation when configuring Grunt's Task_javascript skills

Related articles

See more