首页 > 代码库 > div每点击一次 向右移动200px(带DOM动画过渡)

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

2024-09-17 11:03:50   216人阅读

 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动画过渡)


联系
我们