匀速运动
简而言之就是使用定时器,让某一个物体以均匀地速度移动
function move(target) {
var silderBar = document.getElementById("silderBar");
clearInterval(timer);
timer = setInterval(function() {
var speed = 0;
if(silderBar.offsetLeft > target) {
speed = -10;
} else {
speed = 10;
}
if(silderBar.offsetLeft == target) {
clearInterval(timer);
} else {
silderBar.style.left = silderBar.offsetLeft + speed + 'px';
}
}, 30);
};
变速运动
让物体运动的速度和到达目标位置的距离成正比,即与目标位置的距离越短,则速度越小(减速运动)或者越大(加速运动)
function decelerateMove(target) {
var silderBar = document.getElementById("silderBar2");
clearInterval(timer);
timer = setInterval(function() {
var speed = 0;
if(silderBar.offsetLeft > target) {
var dLength = target - silderBar.offsetLeft;
speed = Math.floor(dLength / 10);
} else {
var dLength = target - silderBar.offsetLeft;
speed = Math.ceil(dLength / 20);
}
if(silderBar.offsetLeft == target) {
clearInterval(timer);
} else {
silderBar.style.left = silderBar.offsetLeft + speed + 'px';
}
}, 30);
};
这里用到Math的工具包,有两个函数 Math.floor(),向下取整。Math.ceil(),向上取整。
完整例子:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>侧边栏分享</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#line {
width: 1px;
height: 900px;
background: black;
position: absolute;
left: 200px;
}
#silderBar {
width: 200px;
height: 300px;
background: pink;
position: absolute;
left: -200px;
top: 100px;
}
#silderBar2 {
width: 200px;
height: 300px;
background: pink;
position: absolute;
left: -200px;
top: 500px;
}
#shareText {
width: 30px;
height: 100px;
background: red;
line-height: 30px;
position: absolute;
text-align: center;
vertical-align: middle;
right: -30px;
top: 100px;
}
#shareText2 {
width: 30px;
height: 100px;
background: yellow;
line-height: 30px;
position: absolute;
text-align: center;
vertical-align: middle;
right: -30px;
top: 100px;
}
</style>
<script type="text/javascript">
window.onload = function() {
var silderBar = document.getElementById("silderBar");
var silderBar2 = document.getElementById("silderBar2");
silderBar.onmouseover = function() {
move(0);
};
silderBar.onmouseout = function() {
move(-200);
}
silderBar2.onmouseover = function() {
decelerateMove(0);
};
silderBar2.onmouseout = function() {
decelerateMove(-200);
}
};
//多物体运动必须有有多个timer,否则会出现不可控的错误,各自有各自的额timer
var timer = null;
var decelerateTimer = null;
function move(target) {
var silderBar = document.getElementById("silderBar");
clearInterval(timer);
timer = setInterval(function() {
var speed = 0;
if(silderBar.offsetLeft > target) {
speed = -10;
} else {
speed = 10;
}
if(silderBar.offsetLeft == target) {
clearInterval(timer);
} else {
silderBar.style.left = silderBar.offsetLeft + speed + 'px';
}
}, 30);
};
function decelerateMove(target) {
var silderBar = document.getElementById("silderBar2");
var iPosition = document.getElementById("position");
clearInterval(decelerateTimer);
decelerateTimer = setInterval(function() {
var speed = 0;
if(silderBar.offsetLeft > target) {
var dLength = target - silderBar.offsetLeft;
speed = Math.floor(dLength / 10);
iPosition.value = speed + "***" + silderBar.offsetLeft + "***" + target;
} else {
var dLength = target - silderBar.offsetLeft;
speed = Math.ceil(dLength / 20);
}
if(silderBar.offsetLeft == target) {
clearInterval(decelerateTimer);
} else {
silderBar.style.left = silderBar.offsetLeft + speed + 'px';
}
}, 30);
};
</script>
</head>
<body>
<div id="line">
<input type="text" value="adsa" id="position" />
</div>
<div id="silderBar">
匀速弹出
<span id="shareText">
分享到
</span>
</div>
<div id="silderBar2">
减速弹出
<span id="shareText2">
分享到
</span>
</div>
</body>
</html>