gpt4 book ai didi

JS实现点击掉落特效

转载 作者:qq735679552 更新时间:2022-09-27 22:32:09 28 4
gpt4 key购买 nike

CFSDN坚持开源创造价值,我们致力于搭建一个资源共享平台,让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章JS实现点击掉落特效由作者收集整理,如果你对这篇文章有兴趣,记得点赞哟.

js实现点击掉落特效 先看看效果图 。

JS实现点击掉落特效

话不多说代码 。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv= "Content-Type" content= "text/html; charset=utf-8" >
<title>无标题文档</title>
 
<script src= "jquery.js" ></script>
<script>
window.onload = function () {
     var str = '' ;
     var len = 20;
     var aDiv = document.getElementsByTagName( 'div' );
     var timer = null ;
     var num = 0;
    
     for ( var i=0; i<len; i++ ) {
         str += '<div style="width:50px; height:50px; background:red; position:absolute; top:0px; left:' + i*60 + 'px;"></div>' ;
     }
    
     document.body.innerHTML = str;
    
     document.onclick = function () {
         clearInterval( timer );
         timer = setInterval( function (){
             DM( aDiv[num], 'top' , 23, 500 );
             num ++;
             if ( num === len ) {
                 clearInterval( timer );
             }
         }, 100 );
     };
};
</script>
 
</head>
 
<body>
</body>
</html>

我这里引用了封装方法 。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
function DM( obj, attr, dir, target, endFn ) {
    
     dir = parseInt(getStyle( obj, attr )) < target ? dir : -dir;
    
     clearInterval( obj.timer );
    
     obj.timer = setInterval( function () {
        
         var speed = parseInt(getStyle( obj, attr )) + dir;          // 步长
        
         if ( speed > target && dir > 0 || speed < target && dir < 0 ) {
             speed = target;
         }
        
         obj.style[attr] = speed + 'px' ;
        
         if ( speed == target ) {
             clearInterval( obj.timer );
            
             /*
             if ( endFn ) {
                 endFn();
             }
             */
             endFn && endFn();
            
         }
        
     }, 30);
}

到此这篇关于JS实现点击掉落特效的文章就介绍到这了,更多相关js点击掉落内容请搜索我以前的文章或继续浏览下面的相关文章希望大家以后多多支持我! 。

原文链接:https://blog.csdn.net/qq_38259997/article/details/103764058 。

最后此篇关于JS实现点击掉落特效的文章就讲到这里了,如果你想了解更多关于JS实现点击掉落特效的内容请搜索CFSDN的文章或继续浏览相关文章,希望大家以后支持我的博客! 。

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com