This example describes the jquery horizontal erase focus tut effect. Share to everyone for your reference. Specifically as follows:
Thunderbolt jquery Horizontal Erase focus diagram is a jquery based on the implementation of the 7-screen horizontal erase focus diagram Code, there are thumbnails and headings, you can customize the title.
Run Effect chart:-------------------View effect Download source code-------------------
Tip: If you are not running properly in your browser, you can try switching browsing mode.
(1) Introducing CSS styles in the head area:
<link rel= "stylesheet" href= "Css/zzsc.css" >
(2) 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>
For everyone to share the jquery horizontal erase Focus Map effect code is as follows
Above is for you to share the Thunder jquery horizontal erase Focus Map effect code, I hope you can like, and apply to practice.