简单的JS动画的实现文字在页面飘动

最新推荐文章于 2023-07-04 16:52:15 发布

丑心疼

最新推荐文章于 2023-07-04 16:52:15 发布

阅读量617

点赞数

文章标签： xhtml javascript ViewUI

原文链接：http://www.cnblogs.com/net515/archive/2012/06/22/2558389.html

版权

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3     <head>
 4         <title>文字移动</title>
 5         <script type="text/javascript">
 6         
 7                 //初始化，给要移动的元素一个初始值，可理解为移动的起点
 8          function prepareElement(){
 9          var elem = document.getElementById("pp");
10     elem.style.position = "absolute"; //表示定位于相对于包含它的元素的指定坐标
11     elem.style.left = "0px";
12     elem.style.top = "0px";
13     }
14             function moveElement(elementId,final_x,final_y,interval){
15              
16                     //验证元素是否存在
17               if(!elementId) return false; //当elementId为空时对应值false，加！为真，则不再向下执行，
18             
19                     //获得指定元素
20                     //var elem=document.getElementById(elementId);
21               var elem = document.getElementById(elementId);
22               
23                     //获得现在的坐标
24               var x=parseInt(elem.style.left);
25               var y=parseInt(elem.style.top);
26                     //判断是否到了指定位置
27                if(x==final_x && y==final_y) return;
28                     //没有到达时继续向执行
29                 if(x>final_x){
30                 x--;
31                 }
32                 if(x<final_x){
33                 x++;
34                 }
35                 if(y>final_y){
36                 y--;
37                 }
38                 if(y<final_y){
39                 y++;
40                 }
41                 
42                     //修改坐标位置
43                 elem.style.left=x+"px";
44                 elem.style.top=y+"px";
45                     
46                     //自己调自己，实现连续移动
47                 js="moveElement('"+elementId+"',"+final_x+","+final_y+","+interval+")";
48                     //此句代码很费解，elementId,final_x等是变量，所有要在引号外，
49                        //而elementId加两层引号是因为elementId中传来的是字符串的变量
50                 setTimeout(js,interval); 
51                     //setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。
52                     //提示：setTimeout() 只执行 code 一次。
53                     //如果要多次调用，请使用 setInterval() 或者让 code 自身再次调用 setTimeout()。
54                  
55             }
56             
57             window.οnlοad=function() {
58             prepareElement();
59             moveElement("pp",200,100,100);//括号中分别代表 元素ID，X移动多少，Y移动多少，多长时间完成移动
60             }
61         </script>
62     </head>
63     <body>
64         <p id="pp">我是一个移动元素 </p>
65         
66     </body>
67 </html>

转载于:https://www.cnblogs.com/net515/archive/2012/06/22/2558389.html

丑心疼

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
简单的JS动画的实现文字在页面飘动

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <h...
复制链接

扫一扫