Home > Developer > Web Develop
1. Effect and Function description
Hover event making product picture mouse slide over picture translucent, title text sliding from left to right animation move show hidden
2. Principle of realization
First the effect is hidden, and then define a pseudo-class to trigger all the effect, next when the pseudo-class trigger will have a traversal stop all the effect, the new trigger effect is the title from the left fade and the background color changes, when the mouse left the picture after a traversal, stop all the animation title back to the original is missing, Background color back to the same
The Main method
$ (". Section ul li"). Hover (function ()
Triggering of pseudo-classes
$ (this). Find (". RSP"). Stop (). FadeTo (0.5)
$ (this). Find (". Text"). Stop (). Animate ({left:' 0 '}, {duration: $ )
These two paragraphs are the fade of the title and the change of background color.
$ (this). Find (". RSP"). Stop (). FadeTo (0)
$ (this). Find (". Text"). Stop (). Animate ({left:' 318 '}, {duration: "Fast"})
$ (this). Find (". Text"). Animate ({left:' -318 '}, {duration: 0})
These three paragraphs let the title playback to the original position, so that the background color back to the same
3.
4. Operating Environment
IE6 IE7 IE8 and above can be implemented under Firefox and Google Chrome Explorer
5, all pictures of the compressed package to create a new file after the package extracted into the folder image of the compressed package at the bottom of the page can see and download the download without modifying the folder name because it is already written and HTML5 within the path of the match
6, the creation of the HTML file will be saved when the encoding type (UTF-8 signed) so that some Chinese normal display, the save type (T) replaced (All Files (*. *)), the HTML5 and press the picture folder in the same folder inside the effect
7. code [HTML5]
<! DOCTYPE htm>
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<body>
<style type= "Text/css" >
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, Sans-serif, "new song Body";}
. Clearfix:after{content: "."; Display:block;height:0;clear:both;visibility:hidden;}
. clearfix{display:inline-table;} /* Hides from Ie-mac \*/
*html. clearfix{height:1%;}
. Clearfix{display:block;} /* End Hide from Ie-mac */
*+html. clearfix{min-height:1%;}
/* Section */
. section{width:981px;margin:40px auto 0 auto;overflow:hidden;}
. Section ul{width:996px;}
. Section ul Li{float:left;margin-right:14px;margin-bottom:13px;display:inline;width:318px;height:343px;overflow: Hidden;position:relative;}
. section ul li Photo{width:318px;height:343px;overflow:hidden;}
. section. Rsp{width:318px;height:343px;overflow:hidden;position:absolute;background: #000; top:0px;left:0px;}
. section. Text{position:absolute;width:318px;height:343px;left:-318px;top:0px;overflow:hidden;}
. section. Text h3{width:318px;margin-top:130px;height:55px;line-height:55px;text-align:center;color: #FFFFFF; Background: #000000; font-family: "Microsoft Yahei"; font-size:26px;}
</style>
<div class= "section" >
<ul class= "Clearfix" >
<li>
<div class= "Photo" ></div>
<div class= "RSP" ></div>
<div class= "text" ><a href= "http://www.17sucai.com/" ></li>
<li>
<div class= "Photo" ></div>
<div class= "RSP" ></div>
<div class= "text" ><a href= "http://www.17sucai.com/" ></li>
<li>
<div class= "Photo" ></div>
<div class= "RSP" ></div>
<div class= "text" ><a href= "http://www.17sucai.com/" ></li>
<li>
<div class= "Photo" ></div>
<div class= "RSP" ></div>
<div class= "text" ><a href= "about.asp" ></li>
<li>
<div class= "Photo" ></div>
<div class= "RSP" ></div>
<div class= "text" ><a href= "http://www.17sucai.com/" ></li>
<li>
<div class= "Photo" ></div>
<div class= "RSP" ></div>
<div class= "text" ><a href= "http://www.17sucai.com/" ></li>
</ul>
<div class= "Clear" ></div>
</div>
<script type= "Text/javascript" src= "Http://code.jquery.com/jquery-1.9.1.js" ></script>
<script type= "Text/javascript" >
$ (document). Ready (function () {
Defines a method that can activate all functions
$ (". Section ul li. RSP"). Hide ();
Get the Hidden element method
$ (". Section ul li"). Hover (function () {
Defining a pseudo-class mouse touch Event
$ (this). Find (". RSP"). Stop (). FadeTo (500,0.5)
Get a fade-out event by traversing to stop all running animations when the mouse moves over the picture
$ (this). Find (". Text"). Stop (). Animate ({left: ' 0 '}, {duration:500})
When the mouse moves over the picture, stops all running animations by traversing, moves an animation so that the caption appears from the left side
},function () {
In jquery in defining a method
$ (this). Find (". RSP"). Stop (). FadeTo (500,0)
When the mouse leaves is stopped by traversing the animation in let fade effect back
$ (this). Find (". Text"). Stop (). Animate ({left: ' 318 '}, {duration: "Fast"})
After stopping the animation through the traversal, when triggering an animation to let the original title start recycling, so that the background color changes normal
$ (this). Find (". Text"). Animate ({left: ' -318 '}, {duration:0})
Animate the title back to its original position by looping through the brake animation, allowing the background value to change back to 0
});
});
</script>
</body>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
