Jquery implements code to roll up, down, and down images

This article will introduce a jquery-based animate method to Dashboard a code that shows the effects of top, bottom, left, and right tumbling on images. Next I will send it to Dashboard, And I will integrate jquery to show the code of examples of top, bottom, and right tumbling on images, for more information, see.

Let's take a look at the core code.

The Code is as follows:

Copy code

$ (Document). ready (function (){ $ (". Top div a"). hover (function (){ $ ("Img", this). stop (). animate ({top: "-56px" },{ queue: false, duration: 200 }); }, Function (){ $ ("Img", this). stop (). animate ({top: "0px" },{ queue: false, duration: 200 }); });   $ (". Bottom div a"). hover (function (){ $ ("Img", this). stop (). animate ({left: "-122px" },{ queue: false, duration: 200 }); }, Function (){ $ ("Img", this). stop (). animate ({left: "0px" },{ queue: false, duration: 200 }); }); })

DEMO code of a specific instance

The Code is as follows:

Copy code

<Style type = "text/css"> Body {margin: 0 auto; font: 12px/1.5 tahoma, arial, 5b8b4f53; color: #828282; background: # fff} Body, div, p, span, a, ul, li, B, form, input, h2, h3, img {margin: 0; padding: 0} Ul, li {list-style-type: none} Img {border: none ;} . Top {width: 500px; margin: 20px auto} . Top div {width: 122px; height: 56px; float: left; margin-left: 5px; display: inline; border: 1px # ccc solid; position: relative; overflow: hidden} . Top div img {position: absolute} . Bottom {width: 500px; margin: 20px auto} . Bottom div {width: 122px; height: 56px; float: left; margin-left: 5px; display: inline; border: 1px # ccc solid; position: relative; overflow: hidden} . Bottom div img {position: absolute} </Style> <Div class = "top"> <Div> <a href = "http://www.bkjia.com/" target = "_ blank" rel = "nofollow"> </a> </ div> </Div> <Div class = "bottom"> <Div> <a href = "http://www.hzhuti.com/" target = "_ blank" rel = "nofollow"> </a> </ div> </Div> <Script type = "text/javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"> </script> <Script type = "text/javascript"> $ (Document). ready (function (){ $ (". Top div a"). hover (function (){ $ ("Img", this). stop (). animate ({top: "-56px" },{ queue: false, duration: 200 }); }, Function (){ $ ("Img", this). stop (). animate ({top: "0px" },{ queue: false, duration: 200 }); });   $ (". Bottom div a"). hover (function (){ $ ("Img", this). stop (). animate ({left: "-122px" },{ queue: false, duration: 200 }); }, Function (){ $ ("Img", this). stop (). animate ({left: "0px" },{ queue: false, duration: 200 }); }); }) </Script>