Advertising Elastic Ball Effect

Directly on the code

CSS just needs to give the moving element to position it on the line

1 <style type= "Text/css" > 2     #imgId{3        position:absolute;  4        left:0px;  5        top:0px;  6     }7</style>

JS Code

1<script type= "Text/javascript" >2 3     varLeftinc;4     varTopinc;5     varCurrleft;//the current left of the picture;6     varCurrtop;//the current top of the picture;7     varwidth;8     varheight;9     varclientwidth;Ten     varclientheight; One     varscrollleft; A     varscrolltop; -  -     functioninit () { theLeftinc = 1; -Topinc = 1; -Currleft = 0;//the current left of the picture; -currtop = 0;//the current top of the picture; +width = 200; -Height = 200; +Clientwidth=document.documentelement.clientwidth | |Document.body.clientWidth; AClientheight=document.documentelement.clientheight | |Document.body.clientHeight; atScrollleft=document.documentelement.scrollleft | |Document.body.scrollLeft; -Scrolltop=document.documentelement.scrolltop | |Document.body.scrollTop; -          -     } -  -     functionChangescroll () { inScrollleft=document.documentelement.scrollleft | |Document.body.scrollLeft; -Scrolltop=document.documentelement.scrolltop | |Document.body.scrollTop; to     } +  -     functionStartmove () { theSetInterval ("Gostep ()", 10); *     } $ Panax Notoginseng     functionGostep () { -Scrollleft=document.documentelement.scrollleft | |Document.body.scrollLeft; theScrolltop=document.documentelement.scrolltop | |Document.body.scrollTop; +          A         //2. Change the value of the left and top of the image label object; theCurrleft = currleft+Leftinc; +Currtop = currtop+Topinc; -          $         //if the left coordinate of the picture is greater than (the page visual width-the width of the picture) $         if(currleft>=clientwidth-width+scrollleft) { -Leftinc=-1; -}Else if(Currleft<=scrollleft) {//the left of the picture is less than or equal to 0; theLeftinc = 1; -         }Wuyi          the         if(currtop>=clientheight-height+scrolltop) { -Topinc=-1; Wu}Else if(currtop<=scrolltop) { -Topinc = 1; About         } $          -         //1. Get the image Tag object -         varimg = document.getElementById ("Imgid"); -Window.status = currleft+ "," +Currtop; AImg.style.left = currleft+ "px"; +Img.style.top = currtop+ "px"; the     } -  $</script>

Page

1 <Bodyonload= "init (); Startmove ()"onscroll= "Changescroll ()"onresize= "Changescroll ()">2     <imgID= "Imgid"src= "Fr.png"style= "width:150px;3 height:200px; " />    4     5 </Body>

This will allow you to run directly

Advertising Elastic Ball Effect