js实现点击掉落特效

先看看效果图

话不多说代码

<!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>

我这里引用了封装方法


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实现点击掉落特效相关推荐

html实现文字隐藏展开特效代码,js实现点击展开隐藏效果（实例代码）
js实现点击展开隐藏效果(实例代码) 发布时间:2020-09-20 10:47:49 来源:脚本之家阅读:69 作者:laozhang 本章给大家介绍用js事件冒泡实现鼠标点击显示提示框效果(代码 ...
HTML怎么编写可关闭广告,JS实现关闭小广告特效
本文实例为大家分享了JS实现关闭小广告特效的具体代码,供大家参考,具体内容如下知识点 1.获取元素 2.通过元素获取父元素 3.删除节点 4.设置元素隐藏运行效果直接删除隐藏代码 Title ...
html 点击按钮js自增,JS实现点击按钮自动增加一个单元格的方法
本文实例讲述了JS实现点击按钮自动增加一个单元格的方法.分享给大家供大家参考.具体分析如下: 这是一个网页在线自助生成表格的特效代码. 核心功能代码是JS实现,点击网页中的添加按钮,网页中自动增加一个 ...
html5点击切换选项卡,简单纯js实现点击切换TAB标签实例
一个不需要jQuery实现的tab选项卡切换效果,代码简洁易用. 默认是鼠标悬停显示tab效果,可将其中的onmouseover 修改为 onclick 点击效果使用方法: 1.将附件中的index ...
html页面点击小图弹出大图代码,利用JS实现点击小图弹出大图代码
特效描述:利用JS实现点击小图弹出大图代码.利用JS实现点击小图弹出大图代码代码结构 1. HTML代码 (function(){ var LightBox = function(options ...
原生JS实现图片跑马灯特效
今天给大家分享一个用原生JS实现的图片跑马灯特效,效果如下: 实现的代码如下,欢迎大家复制粘贴. <!DOCTYPE html> <html><head><m ...
如何使用js实现电影海报画廊特效？
js实现电影海报画廊特效特效需求: 加载页面依次自动播放下一张海报点击向前按钮,移动到钱一张海报点击向后按钮,移动到后一张海报点击底部圆点按钮,移动到对应的海报所用重点函数/方法/语句(部分 ...
原生JS实现VR看图特效
现在很多看车或是看房的网站都有VR看图的效果,看起来比较高端,类似于下面这样的效果: 那么这种效果是如何实现的呢?其实原理很简单,就是连续拍摄了多个角度的图片, 然后根据用户的操作加载不同角度的图片. ...
html鼠标点击切换图片,js鼠标点击图片切换效果代码分享
本文实例讲述了js鼠标点击图片切换效果.分享给大家供大家参考.具体如下: 实现原理很简单,其实是多张图片叠加起来,点击图片后依次赋予图片一个class,使其看起来在表面而已,点击图片,可以实现图片的不 ...

js实现点击掉落特效

js实现点击掉落特效

先看看效果图

话不多说代码

我这里引用了封装方法

js实现点击掉落特效相关推荐

最新文章

热门文章