Direction picture gradient animation effect based on jquery_jquery

Another point is the use of filters, but one thing that must be explained is that filters cannot be recognized and the effect is not visible in Firefox.
Let’s start writing our code
html is relatively simple The
code

Copy the code The code is as follows:

< META http-equiv=content-type content="text/html; charset=gb2312">

• 
  
  An island


• ;/li>
  
• 
  
  A tree with green leaves


• 
  
  A big tree


• 
  
  Sunflowers in a field

< ;/div>

There are multiple div tags with id=frontTextBack here It shows that the shadow is realized through the css filter. There is nothing to say about the other code
Now let’s start writing our css code
First start writing the code from the top level

Copy code The code is 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(); } //Set the filter to gray

The next step is to write js
Code
Load first

Copy code The code is as follows:

$(function(){
//First find the img that needs to be clicked
$("li img").click(function(){
//Determine whether the current img Already clicked
if(this.className.indexOf("active") !=-1)
{
return;
}
//Get data
var i= $(this).attr("pic");
//Get the text content to be displayed, and split the text into arrays with |
var t=$(this).attr("text"). split("|");
//Change the fade-out of the text and change the animation effect by controlling the transparency
$("#frontText").fadeOut();
$("#frontTextBack") .fadeOut();
$("#frontTextSub").fadeOut();
//Process the currently active img and restore it to its original state
$("li img.active").animate({top: 5,width:52,left:10},300)
.removeClass("active")
.fadeTo(200,0.6)
//Process the current active img
$(this ).animate({top:-5,width:40,height:70,left:1},300)
.addClass("active")
.fadeTo(200,1)
// Process the large image of the displayed div
$("#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 the 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);
}

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：Select implementation code to control web page content to be hidden from display_form effectsNext article：Select implementation code to control web page content to be hidden from display_form effects

Related articles

See more

• An in-depth analysis of the Bootstrap list group component
• Detailed explanation of JavaScript function currying
• Complete example of JS password generation and strength detection (with demo source code download)
• Angularjs integrates WeChat UI (weui)
• How to quickly switch between Traditional Chinese and Simplified Chinese with JavaScript and the trick for websites to support switching between Simplified and Traditional Chinese_javascript skills