In the past, the majority of front-end special effects were written using JavaScript. The code was too much and debugging was troublesome. With the support of third-party plug-ins, this work was much easier, such as JQuery and ExtJS.
JQuery is popular. It is Easy to use JQuery for animation! EasyUI in JQuery is even more powerful!
For example, the popular image focus effect on the Internet, that is, the picture with the mouse moving is normal, the text description is provided, and the picture with no focus turns translucent.
<! Doctype html public "-// W3C // dtd html 4.01 Frameset // EN" "http://www.w3.org/TR/html4/frameset.dtd">
<Html>
<Head>
<Script type = "text/javascript" src = "jquery-1.11.0.min.js"> </script>
<Title> Jquery-image focus effect </title>
<Style type = "text/css">
* {Padding: 0; Margin: 0; list-style: none ;}
# DivSlide {position: relative; margin: auto; width: 996px; height: 300px; overflow: hidden ;}
# DivSlide ul {position: absolute; top: 0px; left: 0px; text-align: left; cursor: pointer ;}
# DivSlide ul li {position: relative; display: block; width: 196px; float: left ;}
. PSP {position: absolute; left: 0; width: 100%; height: 35%; cursor: pointer; word-break: normal; background-color: #333333 ;}
. P1 {width: 100%; height: 100%; color: # FFFFFF; word-wrap: break-word; line-height: 20px ;}
</Style>
<Script language = "javascript">
Window. onload = function (){
Self. moveTo (0, 0)
Self. resizeTo (screen. availWidth, screen. availHeight)
}
$ (Function (){
$ ("# DivSlide> ul li"). mouseover (function (){
$ (This). stop (). fadeTo ("fast", 1 );
Certificate (this).css ("border", "1px solid # d70008 ");
S00000000(this0000.css ("height ");
S = s. substring (0, s. length-2 );
S = (parseInt (s) * 2/3). toString ();
$ (This ). append ("<div class = 'psp 'style = 'top:" + s + "px;'> <p class = 'p1'>" + $ (this ). children (). attr ("alt") + "</p> </div> ");
$ (". PSP"). stop (). fadeTo ("fast", 0.5 );
$ (This). siblings (). stop (). fadeTo ("fast", 0.3 );
$ (This). siblings (). children (". PSP"). remove ();
})
})
</Script>
<Head>
<Body>
<Div ID = divSlide>
<Ul>
<Li> </li>
<Li> </li>
<Li> </li>
<Li> </li>
<Li> </li>
</Ul>
</Div>
</Html>
The image stretch effect, that is, the image to be moved by the mouse becomes wider, and other images are restored to the normal width.
You can use a line of code.
((This).css ("width", "380" ).css ("border", "5px solid # d70008" ..siblings().css ("width", "140" ).css ("border ", "0 ");
The most image scrolling effect on the network. Using JQuery can save a lot of code and transform more special effects.
Var zIndex = 6;
$ (Function (){
$ ("# PicScroll> ol li"). mouseover (function (e ){
ZIndex = zIndex + 1;
$ (This). attr ("class", "current ");
$ (This). siblings (). attr ("class ","");
Var num = $ (this). index ();
$ ("Ul li" ).eq(num).css ("left", "500px ");
$ ("Ul li" ).eq(num).css ("z-index", zIndex );
$ ("Ul li"). eq (num). stop (). animate ({left: '0'}, 500 );
})
})
Chain programming is a highlight of JQuery. Other languages can also do this, and later mixed language programming can also do this. Second, using JQuery to write code is better for subsequent maintenance.