码迷,mamicode.com
首页 > 移动开发 > 详细

div每点击一次 向右移动200px(带DOM动画过渡)

时间:2017-04-26 01:10:50      阅读:455      评论:0      收藏:0      [点我收藏+]

标签:color   var   nts   tco   click   end   nbsp   round   else   

 1 <body>
 2 <div id ="box" style="width: 100px;height: 100px;background: #b2ff5b;position:absolute;left: 0;"></div>
 3 <script>
 4     var box = document.getElementById(‘box‘);
 5     box.addEventListener(‘click‘,function () {
 6         var left = parseInt(getStyle(box,‘left‘))
 7         var endLeft = left + 200;
 8         var interval = setInterval(function () {
 9             left++;
10             box.style.left = left + ‘px‘;
11             if(left >= endLeft){
12                 clearInterval(interval);
13             }
14         },20)
15     });
16     function getStyle(obj, attr) {
17         if (obj.currentStyle) {
18             return obj.currentStyle[attr];
19         } else {
20             return getComputedStyle(obj, "伪类")[attr];
21         }
22     }
23 </script>
24 </body>

 

div每点击一次 向右移动200px(带DOM动画过渡)

标签:color   var   nts   tco   click   end   nbsp   round   else   

原文地址:http://www.cnblogs.com/jiaoyue/p/6765398.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!