简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > js的运动与拖拽特效
Blogger Information
Blog 40
fans 1
comment 0
visits 32699
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
js的运动与拖拽特效
李明伟的博客
Original
564 people have browsed it

js的运动与拖拽

1.小球的运动原理

    第一步——设置DOM结构

<button>动起来</button>
<div>
</div>

    第二步——设置样式

div {
width: 50px;
height: 50px;
background: lightblue;
padding: 10px;
border: 2px solid red;
margin: 20px;
border-radius: 50%;
position: absolute;
top: 50px;
left: 10px;
}

    第三步——获取结点

var btn = document.querySelector('button');
var ball = document.querySelector('div');

    第四步——设置点击事件

btn.onclick = function () {

    第五步——在点击事件中设置一个定时器，在定时器中改变div的属性从而实现其运动（定时器函数 setInterval()用于间歇行某一函数）

timer = setInterval(function () {
ball.style.left = ball.offsetLeft + 5 + 'px';
}，1000);

    第六步——添加条件判断，并在不满足条件的情况下清除定时器

clearInterval(timer);
timer = setInterval(function () {
if (ball.offsetLeft < 1000) {
ball.style.left = ball.offsetLeft + 5 + 'px';
} else {
clearInterval(timer);
}
}, 100);
}

    全部代码：

实例

<!DOCTYPE html>
<style>
    div {
        width: 50px;
        height: 50px;
        background: lightblue;
        padding: 10px;
        border: 2px solid red;
        margin: 20px;
        border-radius: 50%;
        position: absolute;
        top: 50px;
        left: 10px;
    }
</style>
<html>

<head>
    <meta charset="utf-8" />
    <title>js中的元素运动原理</title>
</head>

<body>
    <button>动起来</button>
    <div>
    </div>
    <script>
        var btn = document.querySelector('button');
        var ball = document.querySelector('div');
        //offsetWidth(盒子的可视宽度)offsetWidth = width + padding +border
        //当前盒子的可视宽度: 50 + 10*2 + 2*2 = 74 (数值不是字符串)
        //offsetLeft(盒子相对定位父级的左边定位相对位置)：left + margin-left

        // 经过分析,只需要改变offsetLeft就可以使这个小球向右动起来
        // 小球的margin-left不会改变,只要不断的改变left就可以
        // 需要使用到定时器函数 setInterval()用于间歇执行某一函数
        var timer = null;
        btn.onclick = function () {
            
            // console.log(timer);
            clearInterval(timer);
        timer = setInterval(function () {
            //clearInterval(timer);
            if (ball.offsetLeft < 1000) {
                ball.style.left = ball.offsetLeft + 5 + 'px';
            } else {
                clearInterval(timer);
            }
        }, 100);
        }
    </script>
</body>

</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例


2.小球的拖拽原理

  第一步——设置DOM结构

<div id="ball"></div>

  第二步——添加样式

#ball {
width: 50px;
height: 50px;
background-color: lightpink;
border-radius: 50%;
box-shadow: 2px 2px 1px #888;
position: absolute;
}

  第三步——获取所有节点

var ball = document.getElementById('ball');

  第四步——为小球设置鼠标按下事件，通过按下事件得出现在鼠标与小球的相对位置

ball.onmousedown = function (event) {
var x = event.clientX - this.offsetLeft;
var y = event.clientY - this.offsetTop;

  第五步——在按下事件中为整个HTML文档（document对象）设置鼠标移动事件，并得出鼠标的坐标，将giant坐标减去相对位置的x，y值，得到此时小球应该在的坐标。

document.onmousemove = function (event) {
ball.style.left = event.clientX - x + 'px';
//console.log(ball.style.left); 
ball.style.top = event.clientY - y + 'px';
}

   第六步——再按下事件中设置鼠标放开事件，在其中清空移动事件的值，让小球在鼠标放开后不再跟随鼠标

document.onmouseup = function(){
document.onmousemove = null;
}
}

全部代码：

实例

<!DOCTYPE html>
<html>
<style>
    #ball {
        width: 50px;
        height: 50px;
        background-color: lightpink;
        border-radius: 50%;
        box-shadow: 2px 2px 1px #888;
        position: absolute;
    }
</style>

<head>
    <meta charset="utf-8" />
    <title>Page Title</title>
</head>

<body>
    <div id="ball"></div>
</body>
<script>
    var ball = document.getElementById('ball');
    ball.onmousedown = function (event) {
        var x = event.clientX - this.offsetLeft;
       var y = event.clientY - this.offsetTop;
        //console.log(x, y);
        document.onmousemove = function (event) {
            ball.style.left = event.clientX - x + 'px';
            //console.log(ball.style.left); 
            ball.style.top = event.clientY - y + 'px';
        }
        document.onmouseup = function(){
            document.onmousemove = null;
        }
    }
</script>

</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例


Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！