JS 动画

时间：2016-08-16 19:57:20 阅读：197 评论：0 收藏：0 [点我收藏+]

标签：

简单动画

HTML

 1 <!doctype html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>简单动画</title>
 6         <link rel="stylesheet" href="css/style.css">
 7         <script type="text/javascript" src="js/script.js"></script>
 8     </head>
 9     <body>
10         <div id="box">
11             <img src="http://pic1.win4000.com/wallpaper/c/537b28b60619b.jpg" alt="A picture" style="width:240px;height:180px" />
12             <span>萌萌哒</span>
13         </div>
14         <div id="box2">
15             <img src="http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg" alt="A picture" style="width:200px;height:300px" />
16         </div>
17     </body>
18 </html>

View Code

CSS

 1 * {
 2     margin: 0;
 3     padding: 0;
 4 }
 5 
 6 #box {
 7     padding: 10px;
 8     margin: 10px;
 9     border: 1px solid #aaa;
10     border-radius: 5px;
11     width: 240px;
12     box-shadow: 0 0 1px #aaa, 0 0 2px #aaa;
13     position: absolute;
14     top: 0;
15     left: -270px;
16 }
17 
18 #box span {
19     position: absolute;
20     display: block;
21     width: 20px;
22     background-color: black;
23     color: white;
24     margin-left: 250px;
25     margin-top: -125px;
26     cursor: pointer;
27 }
28 
29 #box2 {
30     padding: 10px;
31     margin: 10px 10px 10px 400px;
32     border: 1px solid #aaa;
33     border-radius: 5px;
34     box-shadow: 0 0 1px #aaa, 0 0 2px #aaa;
35     width:200px;
36     opacity: 0.5;
37 }

View Code

JavaScript

  1 window.onload = function() {
  2     move();
  3 }
  4 
  5 function move() {
  6     var box = document.getElementById("box");
  7     box.onmouseover = function() {
  8         show();
  9     };
 10     box.onmouseout = function() {
 11         hide();
 12     };
 13 
 14     var box2 = document.getElementById("box2");
 15     // box2.onmouseover = function() {
 16     //     highlight();
 17     // };
 18     // box2.onmouseout = function() {
 19     //     weaken();
 20     // };
 21 
 22     // box.onmouseover = function() {
 23     //     slide(10, 0);
 24     // };
 25     // box.onmouseout = function() {
 26     //     slide(-20, -260);
 27     // };
 28 
 29     box2.onmouseover = function() {
 30         changeOpacity(1);
 31     };
 32     box2.onmouseout = function() {
 33         changeOpacity(0.5);
 34     };
 35 }
 36 
 37 var timer = null;
 38 
 39 //移动动画
 40 function show() {
 41     clearInterval(timer);
 42     var box = document.getElementById("box");
 43     timer = setInterval(function() {
 44         //这里使用 >= 
 45         if(box.offsetLeft == 0) {
 46             clearInterval(timer);
 47         } else {
 48             box.style.left = box.offsetLeft + 10 +"px";
 49         }
 50     },50)
 51 }
 52 
 53 function hide() {
 54     clearInterval(timer);
 55     var box = document.getElementById("box");
 56     timer = setInterval(function() {
 57         if(box.offsetLeft == -260) {
 58             clearInterval(timer);
 59         } else {
 60             //在图片绝对定位并且自带margin属性时，减少的幅度必须超过margin值，才会向左移动
 61             box.style.left = box.offsetLeft - 20 + "px";
 62         }
 63     }, 50);
 64 }
 65 
 66 //将上面两个函数合并为一个
 67 function slide(speed,target) {
 68     clearInterval(timer);
 69     var box = document.getElementById("box");
 70     timer = setInterval(function() {
 71         if(box.offsetLeft == target) {
 72             clearInterval(timer);
 73         } else {
 74             box.style.left = box.offsetLeft + speed + "px";
 75         }
 76     }, 50);
 77 }
 78 
 79 
 80 //透明度动画
 81 var opacity = 0.5;
 82 function highlight() {
 83     clearInterval(timer);
 84     var box2 = document.getElementById("box2");
 85     timer = setInterval(function() {
 86         if(opacity >= 1) {
 87             clearInterval(timer);
 88         } else {
 89             opacity += 0.1;
 90             box2.style.opacity = opacity;
 91         }
 92     }, 50);
 93 }
 94 
 95 function weaken() {
 96     clearInterval(timer);
 97     var box2 = document.getElementById("box2");
 98     timer = setInterval(function() {
 99         if(opacity <= 0.5) {
100             clearInterval(timer);
101         } else {
102             opacity -= 0.1;
103             box2.style.opacity = opacity;
104         }
105     }, 100);
106 }
107 
108 //将上面两个函数合并为一个
109 function changeOpacity(target) {
110     clearInterval(timer);
111     var box2 = document.getElementById("box2");
112     var speed = 0.1;
113     if(opacity < target) {
114         speed = 0.1;
115     } else {
116         speed = -0.1;
117     }
118     timer = setInterval(function() {
119         if(opacity == target) {
120             clearInterval(timer);
121         } else {
122             opacity = opacity + speed;
123             box2.style.opacity = opacity;
124         }
125     }, 100)
126 }

View Code

（1）关于使用 >= 和 <=

理论上说，每50毫秒执行一次，每次增加10px，是可以捕捉到 == 0 或者 ==-260 的那一个瞬间，但是浏览器有时候会捕捉不到那一个特定的值，导致动画停不下来，所以用 >=或<=比较保险。

（2）关于隐藏动画的速度问题，减小的速度值必须大于margin值；如果小于margin值，会继续移动，如果等于margin值，会停止不动，只有大于margin值，才会开始隐藏，原因未知。。。

（3）合并的函数为了简便将>=和<=都写成了 == ，有待完善。。。

JS 动画

标签：

原文地址：http://www.cnblogs.com/cc156676/p/5777495.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行