运动 — 每个滑块依次落下

这篇博客介绍了一个点击任意位置,红色方块依次落下的JavaScript动画效果。文章中提到动画函数封装在doMove.js文件中,读者可以参考作者的上一篇文章了解更多细节。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

这里写图片描述

点击任意位置,红色方块都会依次落下;

首先引用动画文件doMove.js,动画函数是封装好的,具体参考上篇文章:

<script src="doMove.js"></script>

js:

var str = '';
var len = 20;
var oDiv = document.getElementsByTagName('div');//选中页面上的所有div元素
var timer = null;//开定时器
var num = 0;//num是红色小方块的序号

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(){// 在页面中任何一个地方点击,div会像下雨一样落下
    clearInterval(timer);// 开定时器之前为了防止用户连续点击,所以要先清除定时器
    timer = setInterval(function(){                 
        doMove(oDiv[num],'top',23,500);//从第0个开始往下掉,依次下落,所以要写一个变量num存储;top是往下掉
        num ++;//红色小方块序号自动加1
        if(num === len){//如果num的值等于div元素的个数(全部都掉下来),那么关闭定时器
            clearInterval(timer);
        }
    },100); 
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值