H5-JavaScript（七） JavaScript动画特效 - DOM艺术2nd Chapter10 - 卜戈的博客

H5-JavaScript（七） JavaScript动画特效 - DOM艺术2nd Chapter10

一、什么是动画

就是一个元素在时间纬度上发生了空间位置的变动，所以涉及两个方面：时间、空间

1、位置：在其他地方也已经讲过了： position 属性

2、时间：同样提到过 setTimeout("function",interval);

二、Show U The Code

　　1、Basic

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>JavaScript 实现动画特效</title>
 6 <!--     静态设置
 7     <style>
 8         #message {
 9             position: absolute;
10             left: 100px;
11             top: 50px;
12         }
13     </style> -->
14 </head>
15 <body>
16     <p id="message">Whee!</p>
17     <script src="js/addLoadEvent.js"></script>
18     <script>
19         addLoadEvent(positionMessage);
20         //addLoadEvent(moveMessage);
21         // postionMessage(); 动态设置#message 属性
22         function positionMessage() {
23             if (!document.getElementById) return false;
24             if (!document.getElementById("message")) return false;
25             var elem = document.getElementById("message");
26             elem.style.position = "absolute";
27             elem.style.left ="50px";
28             elem.style.top ="100px";
29             // moveMessage();
30             moveElement("message",200,200,10);
31         }
32         //moveMessage();
33         function moveMessage() {
34 
35             var elem = document.getElementById("message");
36             var xpos = parseInt(elem.style.left);
37             var ypos = parseInt(elem.style.top);
38             if(xpos==200 && ypos==200) {
39                 return true;
40             }
41             if(xpos < 200) xpos++;
42             if(xpos > 200) xpos--;
43             if(ypos < 200) ypos++;
44             if(ypos > 200) ypos--;
45             elem.style.left = xpos + "px";
46             elem.style.top = ypos + "px";
47             movement = setTimeout('moveMessage()',5);
48 
49         }
50         //moveElement() 这个更加具有扩展性
51         function moveElement(elementID,final_x,final_y,interval) {
52             var elem = document.getElementById(elementID);
53             var xpos = parseInt(elem.style.left);
54             var ypos = parseInt(elem.style.top);
55             if(xpos==final_x && final_y==200) {
56                 return true;
57             }
58             if(xpos < final_x) xpos++;
59             if(xpos > final_x) xpos--;
60             if(ypos < final_y) ypos++;
61             if(ypos > final_y) ypos--;
62             elem.style.left = xpos + "px";
63             elem.style.top = ypos + "px";
64             var repeat = "moveElement('"+elementID+"'"+","+final_x+","+final_y+","+interval+")";
65             movement = setTimeout(repeat,interval);
66 
67         }
68     </script>
69 </body>
70 </html>

问题&思考：

1.1 style 标签中的东西叫静态的东西，和Js 中的style 属性没有一毛钱关系

1.2 parsInt,setTimeout 函数使用

1.3 编写代码的一般过程，先做出来，之后优化

　　2、实战

　　　　2.1 需求

点击哪个超链，显示什么图片

　　　　2.2 编码

【HTML】

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Web Design</title>
 6     <link rel="stylesheet" href="css/layout.css">
 7 </head>
 8 <body>
 9     <h1>Web Design</h1>
10     <p>These are things you should know:</p>
11     <ol id="linklist">
12         <li><a href="structure.html">Structure</a></li>
13         <li><a href="presentation.html">Presentation</a></li>
14         <li><a href="behavior.html">Behavior</a></li>
15     </ol>
16     <div id="slideshow">
17         <img src="img/topics.gif" alt="building blocks of web desgin" id="preview">
18     </div>
19     <script src="js/addLoadEvent.js"></script>
20     <script src="js/moveElement.js"></script>
21     <script src="js/prepareSlideShow.js"></script>
22 </body>
23 </html>

【CSS】

1 #slideshow {
2     width: 100px;
3     height: 100px;
4     position: relative;
5     overflow: hidden;
6 }

【JavaScript】

 1 function prepareSlideShow() {
 2     //兼容性
 3     if(!document.getElementById || !document.getElementsByTagName) return false;
 4     if(!document.getElementById("linklist")) return false;
 5     if(!document.getElementById("preview")) return false;
 6     var preview = document.getElementById("preview");
 7     //初始化图片格式
 8     preview.style.position = "absolute";
 9     preview.style.left = "0px";
10     preview.style.top = "0px";
11     //获取有用信息 - a 标签
12     var linklist = document.getElementById("linklist");
13     var links = linklist.getElementsByTagName("a");
14     //移动图片
15     links[0].onmouseover = function() {
16         moveElement("preview",-100,0,10);
17     }    
18     links[1].onmouseover = function() {
19         moveElement("preview",-200,0,10);
20     }    
21     links[2].onmouseover = function() {
22         moveElement("preview",-300,0,10);
23     }
24 }
25 addLoadEvent(prepareSlideShow);

　　　　2.3 测试：问题&分析

　　　　2.3.1 快速在连接之间切换，会乱。原因定时器存储了很多事件，所以每次执行前清空一下

　　　　2.3.2 移动距离上需要优化，即离得远走的快，离的近走的慢点

　　　　2.3.3 img图标和Js 关系密切，即：没有js动态效果img 没有存在的意义，所以是动态添加的元素

修改后的代码：

【HTML】这块内容和 js 关系密切，所有动态生成

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Web Design</title>
 6     <link rel="stylesheet" href="css/layout.css">
 7 </head>
 8 <body>
 9     <h1>Web Design</h1>
10     <p>These are things you should know:</p>
11     <ol id="linklist">
12         <li><a href="structure.html">Structure</a></li>
13         <li><a href="presentation.html">Presentation</a></li>
14         <li><a href="behavior.html">Behavior</a></li>
15     </ol>
16 <!--     <div id="slideshow">
17         <img src="img/topics.gif" alt="building blocks of web desgin" id="preview">
18     </div> -->
19     <script src="js/addLoadEvent.js"></script>
20     <script src="js/moveElement.js"></script>
21     <script src="js/insertAfter.js"></script>
22     <script src="js/prepareSlideShow.js"></script>
23 </body>
24 </html>

【CSS】动态生成的标签，CSS 照样可以改变样式

1 #slideshow {
2     width: 100px;
3     height: 100px;
4     position: relative;
5     overflow: hidden;
6 }
7 #preview {
8     position: absolute;
9 }

【JS】

 1 function prepareSlideShow() {
 2     //兼容性
 3     if(!document.getElementById || !document.getElementsByTagName) return false;
 4     if(!document.createElement) return false;
 5     if(!document.getElementById("linklist")) return false;
 6     //创建div 标签
 7     var slideshow = document.createElement("div");
 8     slideshow.setAttribute("id","slideshow");
 9     var preview = document.createElement("img");
10     preview.setAttribute("id","preview");
11     preview.setAttribute("src","img/topics.gif");
12     preview.setAttribute("alt","building blocks of web desgin");
13     slideshow.appendChild(preview);
14     var linklist = document.getElementById("linklist");
15     insertAfter(slideshow,linklist);
16     //移动图片
17     var links = linklist.getElementsByTagName("a");
18     links[0].onmouseover = function() {
19         moveElement("preview",-100,0,10);
20     }    
21     links[1].onmouseover = function() {
22         moveElement("preview",-200,0,10);
23     }    
24     links[2].onmouseover = function() {
25         moveElement("preview",-300,0,10);
26     }
27 }
28 addLoadEvent(prepareSlideShow);

 1 function moveElement(elementID, final_x, final_y, interval) {
 2     var elem = document.getElementById(elementID);
 3     if (elem.movement) {
 4         clearTimeout(elem.moveElement);
 5     }
 6     if (!elem.style.left) {
 7         elem.style.left = "0px";
 8     }
 9     if (!elem.style.top) {
10         elem.style.top = "0px";
11     }
12     var xpos = parseInt(elem.style.left);
13     var ypos = parseInt(elem.style.top);
14     var dist;
15     if (xpos == final_x && ypos == final_y) {
16         return true;
17     }
18     if (xpos < final_x) {
19         dist = Math.ceil((final_x - xpos) / 10);
20         xpos += dist;
21         console.log(dist);
22     }
23     if (xpos > final_x) {
24         dist = Math.ceil((xpos - final_x) / 10);
25         xpos -= dist;
26     }
27     if (ypos < final_y) {
28         dist = Math.ceil((final_y - ypos) / 10);
29         ypos += dist;
30     }
31     if (ypos > final_y) {
32         dist = Math.ceil((ypos - final_y) / 10);
33         ypos -= dist;
34     }
35     elem.style.left = xpos + "px";
36     elem.style.top = ypos + "px";
37     var repeat = "moveElement('" + elementID + "'" + "," + final_x + "," + final_y + "," + interval + ")";
38     elem.movement = setTimeout(repeat, interval);
39 }

1 function insertAfter(newElement,targetElement) {
2     var parent = targetElement.parentNode;
3     if (parent.lastChild == targetElement) {
4         parent.appendChild(newElement);
5     }else {
6         parent.insertBefore(newElement,targetElement.nextSibling);
7     }
8 }

posted on 2017-09-26 12:12 卜戈的博客阅读(126) 评论(0) 收藏举报

刷新页面返回顶部

风清扬

导航

公告

H5-JavaScript（七） JavaScript动画特效 - DOM艺术2nd Chapter10