广告弹力球效果

直接上代码

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>

这样便直接可以运行

浩楠哥

相关阅读:
Java知识体系之基础知识
 002-JavaNIO
001-四种常见的IO模型
 c/c++面试题(6)运算符重载详解
 c/c++面试题(5)(c++重要的概念详解)
c/c++面试题(4)字符串翻转/打印任意进制格式/类型转换
 c/c++面试题(3)strcat/strcmp/strlen/strcpy的实现
 c/c++面试题(2)
c/c++面试题(1)
cocos2dx 3.0 之 lua 创建类 (二)
原文地址：https://www.cnblogs.com/haonanZhang/p/6265975.html