JQuery horizontal erasure focus chart special effect code sharing, jquery special effect code
This example describes the Special Effect of jQuery horizontal erasure of focus graphs. Share it with you for your reference. The details are as follows:
Xunlei jQuery's horizontal erasure focus chart is a 7-screen horizontal erasure focus chart code based on jQuery. It has thumbnails and titles and can be customized.
Run: ------------------- view the download result source code -------------------
TIPS: If the browser cannot run properly, you can try to switch the browsing mode.
(1) Introduce CSS styles in the head area:
<link rel="stylesheet" href="css/zzsc.css">
(2) Place the js Code 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 following code shows the special effect of jQuery horizontal erasure focus chart.
<Head> <meta http-equiv = "Content-Type" content = "text/html; charset = gb2312 "/> <title> thunder jQuery horizontal erasure focus chart </title> <link rel =" stylesheet "href =" css/zzsc.css "> <base target = "_ blank ">
The above is the special effect code of the focus chart that Xunlei jQuery has shared with you. I hope you will like it and apply it to practice.