• 售前

  • 售后

热门帖子
入门百科

JS实现点击掉落特效

[复制链接]
天使798 显示全部楼层 发表于 2021-10-25 20:08:34 |阅读模式 打印 上一主题 下一主题
js实现点击掉落特效 先看看结果图

话不多说代码
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <title>无标题文档</title>
  6. <script src="jquery.js"></script>
  7. <script>
  8. window.onload = function () {
  9.         var str = '';
  10.         var len = 20;
  11.         var aDiv = document.getElementsByTagName('div');
  12.         var timer = null;
  13.         var num = 0;
  14.        
  15.         for ( var i=0; i<len; i++ ) {
  16.                 str += '<div style="width:50px; height:50px; background:red; position:absolute; top:0px; left:'+ i*60 +'px;"></div>';
  17.         }
  18.        
  19.         document.body.innerHTML = str;
  20.        
  21.         document.onclick = function () {
  22.                 clearInterval( timer );
  23.                 timer = setInterval( function (){
  24.                         DM( aDiv[num], 'top', 23, 500 );
  25.                         num ++;
  26.                         if ( num === len ) {
  27.                                 clearInterval( timer );
  28.                         }
  29.                 }, 100 );
  30.         };
  31. };
  32. </script>
  33. </head>
  34. <body>
  35. </body>
  36. </html>
复制代码
我这里引用了封装方法
  1. function DM( obj, attr, dir, target, endFn ) {
  2.        
  3.         dir = parseInt(getStyle( obj, attr )) < target ? dir : -dir;
  4.        
  5.         clearInterval( obj.timer );
  6.        
  7.         obj.timer = setInterval(function () {
  8.                
  9.                 var speed = parseInt(getStyle( obj, attr )) + dir;                        // 步长
  10.                
  11.                 if ( speed > target && dir > 0 || speed < target && dir < 0 ) {
  12.                         speed = target;
  13.                 }
  14.                
  15.                 obj.style[attr] = speed + 'px';
  16.                
  17.                 if ( speed == target ) {
  18.                         clearInterval( obj.timer );
  19.                        
  20.                         /*
  21.                         if ( endFn ) {
  22.                                 endFn();
  23.                         }
  24.                         */
  25.                         endFn && endFn();
  26.                        
  27.                 }
  28.                
  29.         }, 30);
  30. }
复制代码
到此这篇关于JS实现点击掉落特效的文章就介绍到这了,更多相干js点击掉落内容请搜索脚本之家从前的文章或继承浏览下面的相干文章希望各人以后多多支持脚本之家!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作