广告弹力球效果

Posted 2020-08-27 haonanElva

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了广告弹力球效果相关的知识，希望对你有一定的参考价值。

直接上代码

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="width:150px;
3     height:200px;" />    
4     
5 </body>

这样便直接可以运行

以上是关于广告弹力球效果的主要内容，如果未能解决你的问题，请参考以下文章

js版弹力球实例

跟我一起学编程—《Scratch编程》第22课：颠弹力球