jquery--Clone 360 pop-up window in the lower right corner

Original: jquery--clone 360 pop-up window in the lower right corner

First send the browser, for everyone to see.

To achieve this effect, follow the idea, the first step, write a good CSS layout, put the picture in the bottom right corner of the browser location

CSS code is very flexible, I write only a simple one, for reference only:

<style type= "Text/css" >body{margin:0;padding:0;Height:100%;Overflow:Auto; }. Bottomshow{position:fixed;Bottom:-320px; Right:0;width:522px;/*the width of the picture*/Height:320px;/*the height of the picture*/}</style>

The second step, to consider writing jquery animation, in fact, my first thought is to put. Bottomshow this div gives style= "Display:none", and then in jquery (. bottomshow). Show (' Slow ') But it doesn't change the direction of the animation, so I gave it up. Animate () is then selected to set the bottom default to -320px, which is exactly the height of the image, so the picture is outside the lower part of the browser, and this time through animate ({bottom: ' 0px '}, ' Slow ') has done the 360 effect from the bottom up, the jquery code is as follows,

<script src= ". /scripts/jquery-1.3.1.js "type=" Text/javascript "></script><script type=" Text/javascript ">//  wait for the DOM element to finish loading. function Showbottom () {                     $ (". Bottomshow"). Animate ({bottom: "0px"}, ' slow ');    } $ (document). Ready (function() {                           setTimeout (' showbottom () ', +);                                 }) </script>

The third step is to consider the ads can be closed, click on the image in the upper right corner of the x can be closed, this time will use the IMG map click. For specific usage, please refer to code understanding:

IMG Map:

<Divclass= "Bottomshow"><imgsrc= "Images/360.jpg"Border= "0"Usemap= "#planetmap" /><Mapname= "Planetmap"ID= "Planetmap">  < AreaShape= "Rect"coords= "450,0,520,20"href= "javascript:void (0)"onclick= "Bottomclose ()"alt= "Sun" /></Map></Div>

Adding href is mainly to let the mouse on the change hand type, map plus style= "Cursor:pointer" is not working.

After writing close ():

function Bottomclose () {                     $ (". Bottomshow"). Animate ({bottom: " -320px"}, ' slow ');    }

Finally, if the image ads need to jump link, only need jquery Select to this image to join the onclick link.
The code is not yet mature, welcome to spit Groove.