直接上代码
css只需要，给出移动的元素让其定位就行
1 <style type="text/css"> 2 #imgId{ 3 position:absolute; 4 left:0px; 5 top:0px; 6 } 7 </style>
js代码
1 <script type="text/javascript"> 2 3 var leftInc ; 4 var topInc ; 5 var currLeft;//图片的当前left； 6 var currTop ;//图片的当前top； 7 var width; 8 var height ; 9 var clientWidth; 10 var clientHeight; 11 var scrollLeft; 12 var scrollTop; 13 14 function init(){ 15 leftInc = 1; 16 topInc = 1; 17 currLeft =0;//图片的当前left； 18 currTop =0;//图片的当前top； 19 width = 200; 20 height = 200; 21 clientWidth=document.documentElement.clientWidth || document.body.clientWidth; 22 clientHeight=document.documentElement.clientHeight || document.body.clientHeight; 23 scrollLeft=document.documentElement.scrollLeft || document.body.scrollLeft; 24 scrollTop=document.documentElement.scrollTop || document.body.scrollTop; 25 26 } 27 28 function changeScroll(){ 29 scrollLeft=document.documentElement.scrollLeft || document.body.scrollLeft; 30 scrollTop=document.documentElement.scrollTop || document.body.scrollTop; 31 } 32 33 function startMove(){ 34 setInterval("goStep()",10); 35 } 36 37 function goStep(){ 38 scrollLeft=document.documentElement.scrollLeft || document.body.scrollLeft; 39 scrollTop=document.documentElement.scrollTop || document.body.scrollTop; 40 41 //2、把图片标签对象的left和top的值进行更改； 42 currLeft = currLeft+leftInc; 43 currTop = currTop+topInc; 44 45 //如果图片的left坐标大于（页面可视宽度-图片的宽度） 46 if(currLeft>=clientWidth-width+scrollLeft){ 47 leftInc=-1; 48 }else if(currLeft<=scrollLeft){//图片的left小于等于0； 49 leftInc = 1; 50 } 51 52 if(currTop>=clientHeight-height+scrollTop){ 53 topInc=-1; 54 }else if(currTop<=scrollTop){ 55 topInc = 1; 56 } 57 58 //1、获得图片标签对象 59 var img = document.getElementById("imgId"); 60 window.status = currLeft+","+currTop; 61 img.style.left = currLeft+"px"; 62 img.style.top = currTop+"px"; 63 } 64 65 </script>
页面
1 <body onload="init();startMove()" onscroll="changeScroll()" onresize="changeScroll()"> 2 <img id="imgId" src="fr.png" style="150px; 3 height:200px;" /> 4 5 </body>
这样便直接可以运行