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.