运动基础:
让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>
缓冲运动总结::只要你用了缓冲运动,记得一定要取整,否则每次达不到你想要的位置,这个时候就运动错乱。