点击元素依次下落,在点击依次上升

最新推荐文章于 2020-05-09 17:09:18 发布
最新推荐文章于 2020-05-09 17:09:18 发布
阅读量212 收藏
点赞数
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sunjynyue/article/details/83818554
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
</body>
<script>
    window.οnlοad=function(){
        //创建div
        for(var i=0;i<10;i++){
            var oDiv=document.createElement('div');
            oDiv.style.width="100px";
            oDiv.style.height="100px";
            oDiv.style.background="blue";
            oDiv.style.position="absolute";
            oDiv.style.left=i*110+'px';
            oDiv.style.top="0px";
            oDiv.style.transition="0.5s all ease";
            document.body.appendChild(oDiv);
        }
        var allDiv=document.getElementsByTagName('div');
        var index=0;
        var num=1;
        var timer=null;
        document.οnclick=function(){
            if(num==2)return;
            num=2;
            if(index==0){
                clearInterval(timer);
                timer=setInterval(function(){
                    allDiv[index].style.top="500px";
                    index++;
                    if(index==allDiv.length){
                        index=allDiv.length-1;
                        num=1;
                        return;
                    }
                },50);
            }else{
                clearInterval(timer);
                timer=setInterval(function(){
                    allDiv[index].style.top="0px";
                    index--;
                    if(index==-1){
                        index=0;
                        num=1;
                        return;
                    }
                },50)
            }


        }
    }
</script>
</html>
sjy7329
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue监听事件实现计数点击依次增加
朦胧星海
05-12 9969
1.实现计数器功能，每点击一次按钮，count值增加一或增加二，鼠标在cordinates行移动时会更新当前坐标，通过自定义函数或者stop属性禁止事件传播。效果如下：代码如下：&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;计数器自增函数&lt;/title&gt;
要求实现9个红包依次执行，css+js
weixin_42997826的博客
12-19 486
首先说一下思路叭，想了半天 想法：一、控制css依次执行样式，9个红包平均分成9份，占百分百多少，9个动画控制在一个动画里面（很好写的很快，但是还有一个要求，点击一个动画，跳过这个动画执行下一个）能实现，但是想想好大的代码量还是算了 二、js控制动画的执行与不执行，设置动画循环播放，设置时间戳8s执行一次，依次执行动画（想法很好，但是实现起来会出现动画错乱，原因第一次执行设置时间的问题）设置第一次...
JS使用xxx.index=0 和 xxx.setAttribute(‘index’,0) 这两种设置自定义属性的区别？
CherryLee_1210的博客
11-14 1856
在JS中有两种设置自定义属性的的方式：第一种是 xxx.index:是把当前元素当做一个普通对象，为其设置一个属性名（和页面中HTML没有关系）。 第二种是 xxx.setAttribute：是把元素当做特殊元素来处理，设置的自定义属性是和页面结构中的DOM元素映射在一起的。在JS获取DOM的元素对象，我们可以理解为两种角色 与页面中的HTML结构无关的普通对象 与页面HTML结构的存在
var index = order =0 这种写法引起的问题
oShiBuGuanJi的博客
05-09 594
最近有个朋友说他写的轮播图有点问题，大概问题就是如果只加入一个轮播图效果就没问题，如果加上2个轮播图就出现每次播放的时候从第一张图轮播到第三张图。 (function() { var index = order = 0; })(); (function() { consle.log(order); console.log(index); })(); 这种var index = order = 0 的写法 会把order单程全局变量 所以在下面的闭包中能打印出来 但是index 因为是var
一排元素往下掉 【总结】
08-23 119
需求 点击当前元素，看看是否有上个兄弟节点或者下个兄弟节点，如果有，就让他们依次下落（当前元素也会下落），否则就不用下落 需求分析： 可以用之前做的那个拿来改改，重新做个也不难，就是用js生成一下div，再根据数量以及点击的位置一次向外延迟调用doMove函数 点击其中一个div --- 被点击的div不延迟 --- 左右向外扩展，每个都绑定doMove函数，每外一格...
CSS3点击按钮爆炸动画特效
06-24
如果希望在按钮点击后执行其他JavaScript操作，例如发送Ajax请求，可以在JavaScript中添加事件监听器，并在回调函数中触发动画： ```javascript document.getElementById('explode-btn').addEventListener('click',...
jQuery点击添加图片瀑布流布局效果特效代码
03-20
在点击事件的回调函数内，我们可以生成新的图片元素，并将其添加到页面中。为了模拟添加2张图片，可以使用以下代码： ```javascript var img1 = $("<img>", { src: "image1.jpg", class: "masonry-item" }); var ...
HTML5球体下落粒子爆炸特效
06-24
在这款特效中，"球体下落"是关键元素。通过JavaScript，我们可以生成多个虚拟的球体，并设定它们的初始位置、速度和重力等物理属性，模拟真实世界中的自由落体运动。每个球体在下落过程中，会根据时间改变其位置，...
瀑布流排版鼠标点击全屏放大图片代码.zip
07-11
这种布局通常由多个大小不一的元素按特定顺序排列，使得页面看起来像瀑布一样自然下落。在这个案例中，"瀑布流排版鼠标点击全屏放大图片代码" 是一种结合了瀑布流布局和图片全屏展示功能的JavaScript特效。 首先，...
vc++ opengl 茶叶在杯中慢慢下落
03-31
在这个项目中，“vc++ opengl 茶叶在杯中慢慢下落”是一个利用VC++和OpenGL实现的简单模拟场景，旨在展示基本的OpenGL渲染技巧和动态物体模拟。 首先，要创建这样的场景，你需要理解OpenGL的基本概念，如顶点、图元...
for循环详解
Hard_work_的博客
03-22 237
全面解析js中的for循环 JavaScript诞生已经有20多年了，我们一直使用的用来循环一个数组的方法是这样的： for(var index=0;index<myArray.length;index++) { console.log(myArray[index]); } 自从JavaScript5起，我们开始可以使用内置的forEach方法： myArray.forEach(functi...
关于let 和var 声明的选项卡
AnlanJion的博客
06-12 537
首先简单布局一下：&lt;div id="tab-ctrl"&gt; &lt;div class="tab-list"&gt;     &lt;span class="active"&gt;娱乐&lt;/span&gt;     &lt;span&gt;新闻&lt;/span&gt;     &lt;span&gt;体育&
鼠标划过旋转180度并且切换图片
sunjunyue的博客
09-12 1704
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;style&gt; .test { width
css3实现幻灯片效果
sunjunyue的博客
11-02 1102
&lt;!DOCTYPE HTML&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;style&gt; body { width:
摇色子效果
sunjunyue的博客
11-19 1062
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;摇色子&lt;/title&gt; &lt;style&gt; #div1{ width:10
用css伪类实现文字左右两边有横线的效果
sunjunyue的博客
10-11 957
&lt;!doctype html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="Generator" content="EditPlus®"&gt; &lt;meta name="Author" content=&
简单的弹出框拖拽关闭事件
sunjunyue的博客
12-07 825
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;弹出框拖拽关闭事件&lt;/title&gt; &lt;style&gt; *{ margin
用unity写一个点击盒子盒子击飞盒子到尽头的时候生成下落盒子
最新发布
06-07
好的，这是一个简单的游戏开发问题，我可以为您提供一些思路和代码示例。 首先，您需要在 Unity 中创建一个场景，并在场景中添加一个立方体作为“盒子”。然后，您需要编写一个脚本来控制盒子的行为。以下是示例代码： ```csharp using UnityEngine; public class BoxController : MonoBehaviour { public float force = 10f; public GameObject fallingBoxPrefab; private Rigidbody rigidBody; private void Start() { rigidBody = GetComponent<Rigidbody>(); } private void OnMouseDown() { rigidBody.AddForce(Vector3.up * force, ForceMode.Impulse); } private void OnTriggerEnter(Collider other) { if (other.CompareTag("End")) { GameObject fallingBox = Instantiate(fallingBoxPrefab, transform.position, Quaternion.identity); Destroy(gameObject); } } } ``` 在这个脚本中，我们首先声明了一个公共变量 `force`，它表示盒子被点击时受到的冲击力大小。然后，我们还声明了一个公共变量 `fallingBoxPrefab`，它表示我们要生成的下落盒子的预制体。 在 `Start` 方法中，我们获取了盒子的 `Rigidbody` 组件，以便在点击时向上施加冲击力。 在 `OnMouseDown` 方法中，我们使用 `AddForce` 方法向上施加冲击力。 在 `OnTriggerEnter` 方法中，我们检测盒子是否碰到了终点，如果是，就生成一个下落盒子并销毁当前盒子。 接下来，您需要创建一个空物体作为“终点”，并将其标记为 “End” 标签，以便在代码中进行检测。然后，您需要创建一个下落盒子的预制体，它可以是另一个立方体或任何您想要的形状。最后，把盒子脚本挂在盒子上，将下落盒子预制体赋值给 `fallingBoxPrefab` 变量，然后运行场景即可。 希望这些代码和思路对您有所帮助！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值