html中滚动小球的demo

最新推荐文章于 2024-10-18 21:46:58 发布

原创最新推荐文章于 2024-10-18 21:46:58 发布 · 278 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #前端 #javascript

本文介绍了如何在HTML中创建滚动小球的演示，通过结合HTML、CSS和JavaScript技术，实现动态的小球滚动效果。详细代码如下：...（省略具体代码）

类似于下图的效果：

代码：

  1 <!DOCTYPE html>
  2 
  3 <html>
  4 <head>
  5     <title>Promise animation</title>
  6     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  7     <style type="text/css">
  8         .ball{
  9             width: 40px;
 10             height: 40px;
 11             border-radius: 20px;
 12         }
 13 
 14         .ball1{
 15             background: red;
 16         }
 17         .ball2{
 18             background: yellow;
 19         }
 20         .ball3{
 21             background: orange;
 22         }
 23         .ball4{
 24             background: orange;
 25         }
 26         .ball5{
 27             background: yellow;
 28         }
 29         .ball6{
 30             background: red;
 31         }
 32     </style>
 33 </head>
 34 <body>
 35     <div class="ball ball1" style="margin-left: 100px;"></div>
 36     <div class="ball ball2" style="margin-left: 120px;"></div>
 37     <div class="ball ball3" style="margin-left: 140px;"></div>
 38     <div class="ball ball4" style="margin-left: 100px;"></div>
 39     <div class="ball ball5" style="margin-left: 120px;"></div>
 40     <div class="ball ball6" style="margin-left: 140px;"></div>
 41     
 42     <br>
 43     <input id="id_txt" value="" />
 44     <br>
 45     <input id="id_button" value="点我 window.location='新url'" type="button"  onclick="newUrl();"/>
 46     <script type="text/javascript">
 47         var ball1 = document.querySelector('.ball1');
 48         var ball2 = document.querySelector('.ball2');
 49         var ball3 = document.querySelector('.ball3');
 50         var ball4 = document.querySelector('.ball4');
 51         var ball5 = document.querySelector('.ball5');
 52         var ball6 = document.querySelector('.ball6');
 53 
 54         // alert(ball1);
 55         function newUrl(){
 56             var obj = {};
 57             obj.target =  document.getElementById('id_button');
 58             var tmp_localhost = window.location.origin;//    "http://localhost:8080"
 59             var pathName = window.location.pathname;// "/Mytag/locationtest.html"
 60             var index_ = pathName.indexOf("/", "1");// 
 61             var projectName = pathName.substring(0, index_);//获取到 当前的项目名 类似于 /Mytag
 62             if(obj.target){
 63                 //跳转到另一个页面，就有点和点超链接类似
 64                 //                  主机名(包含端口号)  项目名        资源路径
 65                 window.location = tmp_localhost+projectName+'/declaration.jsp';
 66             }
 67         }
 68         function recyle(obj) {
 69             // 用来保存所有的属性名称和值
 70             var props = "";
 71             // 开始遍历
 72             for ( var p in obj) { // 方法
 73                 if (typeof (obj[p]) == "function") {
 74                     if(p=="querySelector"){
 75                         console.log('--------------asfawa');
 76                     }
 77                     props += "function:"+p+"\n";
 78                 } else { // p 为属性名称，obj[p]为对应属性的值
 79                     props += p + " = " + obj[p] + " \n ";
 80                 }
 81             } // 最后显示所有的属性
 82             console.log(props+"\n");
 83             // document.getElementById('id_txt').value = props;
 84         }
 85 
 86 
 87         function animate(ball,distance,callback){
 88             var margin_left =parseInt(ball.style.marginLeft,10);
 89             setTimeout(function(){
 90                 if(margin_left===distance){
 91                     callback&&callback();
 92                 }else{
 93                     if(margin_left<distance){
 94                         margin_left++;
 95                     }else{
 96                         margin_left--;
 97                     }
 98                     ball.style.marginLeft = margin_left+'px';
 99                     animate(ball,distance,callback);
100                 }
101             },12);
102             
103             
104         }
105         function re(){
106             animate(ball1,170,function(){
107                 animate(ball2,170,function(){
108                     animate(ball3,170,function(){
109                         animate(ball3,90,function(){
110                             animate(ball2,90,function(){
111                                 animate(ball1,90,function(){
112                                     re();
113                                 });
114                             });
115                         });
116                     });
117                 });
118             });
119         }
120 
121         function re2(){
122             animate(ball4,170,function(){
123                 animate(ball5,170,function(){
124                     animate(ball6,170,function(){
125                         animate(ball6,90,function(){
126                             animate(ball5,90,function(){
127                                 animate(ball4,90,function(){
128                                     re2();
129                                 });
130                             });
131                         });
132                     });
133                 });
134             });
135         }
136         
137 
138         re();
139         re2();
140 
141         // animate(ball1,600,animate);
142 
143     </script>
144 </body>
145 </html>