There is also a point that includes the use of filters, but one thing to be explained is that the filter is not recognized under Firefox can not see the effect,
Let's start with our code here.
HTML is relatively simple
Code
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 transitional//en" >
<TITLE>myjquerydirection</TITLE>
<meta http-equiv=content-type content= "text/html; charset=gb2312 ">
<link rel= "stylesheet" type= "Text/css" href= "Css/dirction.css" >
<script language=javascript src= "js/jquery.js" type= "Text/javascript" ></script>
<script type= "Text/javascript" src= "Js/drection.js" ></script>
<body>
<div id=nav>
<ul>
<li>
<div> an island </div></li>
<li>
<div> Wheat </div></li>
<li>
<div> a tree green leaf </div></li>
<li>
<div> a big tree </div></li>
<li>
<div> a sunflower </div></li></ul>
<div id=fronttextback></div>
<div id=fronttext></div>
<div id=fronttextsub></div>
<div id=bg></div>
<div id=mask></div>
<div id=back>
</div>
</body>
Here are a number of div tags id=fronttextback tags are displayed through the CSS filter to implement the shadow, the other code is nothing to say
Now we're going to start writing our CSS code.
Start writing from the top level first
Code
Copy Code code as follows:
body {padding:0;
Moz-user-select:none;
margin:0;
}
#nav {background:url ("loadsmall.gif") no-repeat scroll 330px 100px #000;
height:240px;
Overflow:hidden;
position:relative;
width:760px;
Display:block;
}
#nav ul {bottom:0px;
left:3px;
Position:absolute;
Text-align:left;
z-index:999;
}
#nav ul li {list-style:none;
Display:block;
Float:left;
height:50px;
width:140px;
font-size:12px;
position:relative;
}
#nav Li img{border:1px solid white;
Cursor:pointer;
Float:left;
height:35px;
left:10px;
top:5px;
width:52px;
margin-top:10px;
}
#nav Li div{filter:alpha (opacity=60);
margin-left:70px;
margin-top:5px;
padding-left:10px;
Color:white;
}
#frontTextBack {color: #000;
Font-family:verdana;
font-size:30px;
left:22px;
Position:absolute;
width:100%;
top:22px;
}
#frontText {color: #fff;
font-size:30px;
font-weight:900;
left:20px;
Position:absolute;
top:20px;
width:100%;
z-index:999;
}
#frontTextSub {color: #fff;
font-size:13px;
left:25px;
Position:absolute;
top:60px;
width:100%;
}
#BG {Background:none Repeat scroll 0 0 #000;
border-top:1px solid #999;
bottom:0;
height:50px;
Position:absolute;
Text-align:right;
width:100%;
}
#mask {background:repeat scroll 0 0 transparent;
height:100%;
Position:absolute;
width:100%;
z-index:990;
}
#back {text-align:center;
}
. Gray {Filter:gray ();}//Filter set to Gray
Next is JS's written JS
Code
Load First
Copy Code code as follows:
$ (function () {
First find the IMG that needs to be clicked
$ ("li img"). Click (function () {
Determine if the current IMG has been in the dot
if (This.className.indexOf ("active")!=-1)
{
Return
}
Get Data
var i=$ (this). attr ("pic");
Gets the text content to be displayed, and splits the text into groups with |
var t=$ (this). attr ("text"). Split ("|");
Change the fade of text, change the effect of animation by controlling transparency
$ ("#frontText"). fadeout ();
$ ("#frontTextBack"). fadeout ();
$ ("#frontTextSub"). fadeout ();
To handle the current active IMG Recovery
$ ("Li Img.active"). Animate ({top:5,width:52,left:10},300)
. Removeclass ("active")
. Fadeto (200,0.6)
To handle the current active img
$ (this). Animate ({top:-5,width:40,height:70,left:1},300)
. addclass ("active")
. Fadeto (200,1)
To handle the larger image of the div displayed
$ ("#back"). Children (). AddClass ("Gray"). End ()
. FadeIn (500,0.1,function () {
$ (this). Children ("img"). attr ("src", "imgaes/" +i+ ". jpg"). Removeclass ("Gray");
$ (this). Fadeto (500,1,function () {
$ ("#frontText"). html (t[0]). FadeIn (200); Change body text
$ ("#frontTextBack"). html (t[0]). FadeIn (200); Shadow text
$ ("#frontTextSub"). html (t[1]). FadeIn (200)}/Subtitle
);
});
});
});
Initialize the first picture
var i = 0;
Show ();
Function Show () {
if (i==$ ("Li img"). Size () i = 0
$ ("li img"). EQ (i). Click ();
i++;
SetTimeout (Show (), 1000);
}
