您的位置：首页 > Web前端 > JavaScript

Javascript 运动基础

2017-01-17 19:37 513 查看

运动基础：

让Div运动起来

2.速度——物体运动的快慢

3.运动中的Bug

4.不会停止

5.速度取某些值会无法停止

6.到达位置后再点击还会运动

7.重复点击速度加快

物体运动原理：通过改变物体的位置，而发生移动变化。

方法：1.运动的物体使用绝对定位

2.通过改变定位物体的属性（left、right、top、bottom）值来使物体移动。例如向右或左移动可以使用offsetLeft的数值来控制左右移动。

步骤：

1、开始运动前，先清除已有定时器（原因：是连续点击按钮，物体会运动越来越快,造成运动混乱）

2、开启定时器，计算速度

3、把运动和停止隔开（if/else),判断停止条件，执行运动

一.定时器

1.倒计定时器：timename=setTimeout(“function();”,delaytime);

2.循环定时器：timename=setInterval(“function();”,delaytime);

function()是定时器触发时要执行的是事件的函数，可以是一个函数，也可以是几个函

数，或者javascript的语句也可以，单要用;隔开；delaytime则是间隔的时间，以毫秒

为单位。

倒计时定时器就是在指定时间后触发事件，而循环定时器就是在间隔时间到来时反复触发事件，其区别在于：前者只是作用一次，而后者则不停地作用。
循环定时器一般用于站点上需要从复执行的效果。这些事件需要隔一段时间运行一次。有时候我们也想去掉一些加上的定时器，此时可以用clearTimeout(timename) 来关闭倒计时定时器，而用clearInterval(timename)来关闭循环定时器。


盒子的运动例子：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box {
width: 200px;
height: 200px;
background: red;
position: absolute;
left: 0;
top: 50px;
}
</style>
<script type="text/javascript">
window.onload = function() {
var oBox = document.getElementById('box');
var oBtn = document.getElementById('btn');
var timer = null;  //  shezhi
function tot() {
var oBox = document.getElementById('box');
var oBtn = document.getElementById('btn');
clearInterval(timer);//   先声明一个空定义 名 每次运动先关闭原有的定时器，否则会出现运动错乱，
timer=setInterval(function(){
if(oBox.offsetLeft >= 400) {   //  纠正这个Bug，用>=0;//  解决点击按钮多次加速的问题，到了规定时间自动停下来
console.log(oBox.offsetLeft) // 点击会继续运动，用if，else解决
clearInterval(timer);                       }
else{
oBox.style.left = oBox.offsetLeft + 10 + 'px'; //  左边往右边每次增加5个像素
}
},30);
}
oBtn.onclick=function(){
tot();  // 点击调用函数开始运动
}
}
</script>
</head>
<body>
<input type="button"id="btn" value="按钮" />
<div id="box"></div>
</body>
</html>


2.运动框架及应用

1.运动框架：在开始运动时，关闭已有的定时器

2.把运动和停止隔开（if/else）

3.简单的淡出淡入

例1：

百度分享侧边栏，通过目标值计算速度值

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#div1 {
width: 185px;
height: 116px;
background: red;
filter: alpha(opacity: 30);
opacity: 0.3;
}
</style>
<script>
window.onload = function() {
var oDiv1 = document.getElementById('div1');
oDiv1.onmouseover = function() {
startMove(100);
};
oDiv1.onmouseout = function() {
startMove(30);
};
var alpha = 30;  // 设置一个空的
var timer = null;  // 定义一个空的值
function startMove(a1) {    //  定义一个有参函数
clearInterval(timer);   //  每次开始运动时，先关闭定时器
timer = setInterval(function () {
var speed = 10;  // 定义一个初始值
if(alpha < a1) {
speed = 10;
} else {
speed = -10;
}
if(alpha ==a1) {
clearInterval(timer);
} else {
alpha += speed;
oDiv1.style.filter = 'alpha(opacity:' + alpha + ')';//  解决兼容性问题
oDiv1.style.opacity = alpha / 100;
}
},30);
}
}
</script>
</head>
<body>
<div id="box">
<img src="img/a1.jpeg" id="div1"/>
</div>
</body>
</html>


3.缓冲运动

逐渐变慢，最后停止

距离越远速度越大

速度由距离决定

速度=(目标值-当前值)/缩放系数

1.缓冲运动就是距离越大，速度就愈大，距离越小，速度就越小，即速度与距离有关。

2.一开始速度为0，即对速度进行重新定义。

3.此时会有一个严重的问题，因为屏幕的最小单位为px，所以会出现最终的left值为小数，而不为目标的iTarget,可以通过判断来解决，这里要引入Math.floor（），这是向下取整，同样还有Math.ceil()，这是向上取整，Math.round();这是四舍五入。这样完全保证速度都是整数，并且在临界值上都为0。

代码:var speed=(iTarget-oDiv.offsetLeft)/10;

例2：运用缓冲效果完善上面例1的百度分享侧边栏

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box{width: 150px;height: 200px;background:
greenyellow;margin-top: 20px;position: absolute;left: -150px;}
#box span{width: 20px;height: 60px;background:
blue;position: absolute;right: -20px;top: 70px;}
</style>
<script type="text/javascript">
window.onload=function(){
var oBox=document.getElementById('box');
var oBox1=document.getElementById('box1');
var timer=null;//  全局变量
function move(iTarget){  //  目标值，设置一个有参函数
clearInterval(timer)  //  清空原有的定时器
timer=setInterval(function(){
////通过位移量除以目标值，使speed递减，实现减速停止。通过除的数字，控制快慢
var speed=(iTarget-oBox.offsetLeft)/10;
speed=speed>0?Math.ceil(speed):Math.floor

(speed);  // 只要用到缓冲运动，就一定要记得取整，否则会达不到自己想要的效果，出现运动错乱
oBox.style.left= oBox.offsetLeft+speed
+'px';  //设置每次向有增加10个像素
},30);
}
oBox.onmouseenter=function(){  // 鼠标移入
move(0);
}
oBox.onmouseleave=function(){  // 鼠标移出
move(-150);
}
}
</script>
</head>
<body>
<div id="box">
<span>分享到</span>
</div>
</body>
</html>


缓冲运动总结:：只要你用了缓冲运动，记得一定要取整，否则每次达不到你想要的位置，这个时候就运动错乱。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航