JS模拟百度分享侧边栏效果
模拟百度分享侧边栏的弹出与滑入效果。当鼠标移入#div1分享侧边栏，#div1分享侧边栏区块匀速滑出直至其全部露出。当鼠标移除#div1分享侧边栏，#div1分享侧边栏区块匀速滑入隐藏，直至恢复初始位置。若#div1区块未全部露出时，鼠标移出，#div1区块则开始滑入隐藏；若#div1区块未全部滑入隐藏，鼠标移入，则div1区块则开始匀速弹出。
<!DOCTYPE html>
<html>
<head>
<title>JS运动框架案例：类百度分享制作</title>
<meta charset="UTF-8">
</head>
<style>
#div1 {
width: 150px;
height: 200px;
background: green;
position: absolute;
left: -150px;
top: calc(50% - 100px);
}
#div1 span {
width: 20px;
height: 60px;
line-height: 20px;
right: -20px;
top: 70px;
background: blue;
position: absolute;
}
html,
body {
margin: 0;
padding: 0;
}
</style>
<script>
// 补充代码
</script>
<body>
<div id='div1'>
<span>分享到</span>
</div>
</body>
</html>
参考代码：
参考代码（1）以目标点作为参数，如果目标点为0，速度为正，目标点为-150，速度为负。如果运动抵达目标点，那么关闭定时器；否则left值发生变化。
function startMove(iTarget)
{
var oDiv=document.getElementById('div1');
clearInterval(timer);
timer=setInterval(function (){
var speed=0;
if(oDiv.offsetLeft>iTarget)
{
speed=-10;
}
else
{
speed=10;
}
if(oDiv.offsetLeft==iTarget)
{
clearInterval(timer);
}
else
{
oDiv.style.left=oDiv.offsetLeft+speed+'px';
}
}, 30);
}
参考代码（2）以每次运动的距离作为参数，鼠标移入参数为正，鼠标移除参数为负。
window.onload = function () {
oDiv = document.getElementById('div1');
function startMove(speed) {
var iTarget = null;
clearInterval(oDiv.timer);
oDiv.timer = setInterval(function () {
if (speed > 0) {
iTarget = 0;
} else {
iTarget = -150;
}
var l=Math.abs(iTarget-oDiv.offsetLeft);
var s=Math.abs(speed);
if (l<=s) {
oDiv.style.left=iTarget+'px';
clearInterval(oDiv.timer);
} else {
oDiv.style.left = oDiv.offsetLeft + speed + 'px';
}
}, 30);
}
oDiv.onmouseover = function () {
startMove(10)
}
oDiv.onmouseout = function () {
startMove(-10)
}
}
debug版本：为什么采用如下的代码，在弹出时，最终会多出10px距离？
window.onload = function () {
oDiv = document.getElementById('div1');
function startMove(speed) {
var iTarget = null;
clearInterval(oDiv.timer);
oDiv.timer = setInterval(function () {
if (speed > 0) {
iTarget = 0;
} else {
iTarget = -150;
}
//bug：为什么在弹出时，会多出来10px？
if (speed > 0 && iTarget - oDiv.offsetLeft <= speed) {
oDiv.style.left = iTarget + 'px'
clearInterval(oDiv.timer);
} else {
oDiv.style.left = oDiv.offsetLeft + speed + 'px';
}
if (speed < 0 && iTarget - oDiv.offsetLeft >= speed) {
oDiv.style.left = iTarget + 'px'
clearInterval(oDiv.timer);
} else {
oDiv.style.left = oDiv.offsetLeft + speed + 'px';
}
}, 30);
}
oDiv.onmouseover = function () {
startMove(10)
}
oDiv.onmouseout = function () {
startMove(-10)
}
}
debug代码：
window.onload = function () {
oDiv = document.getElementById('div1');
function startMove(speed) {
var iTarget = null;
clearInterval(oDiv.timer);
oDiv.timer = setInterval(function () {
if (speed > 0) {
iTarget = 0;
} else {
iTarget = -150;
}
//bug：为什么在弹出时，会多出来10px？
/* 编码逻辑错误，应该采用if(){……}else if(){}语法，而不是并列的两个if(){……}else{……}。因为当判断语句【1】执行条件if满足时，同样满足判断语句【2】的else语句代码，导致多出来10px。
*
*/
// 当鼠标移入时，判断语句【1】，如果speed大于0且与目标点距离不大于speed时， oDiv.style.left直接设置为目标点并关闭定时器，否则继续运动。
if (speed > 0 && iTarget - oDiv.offsetLeft <= speed) {
oDiv.style.left = iTarget + 'px';
clearInterval(oDiv.timer);
} else {
oDiv.style.left = oDiv.offsetLeft + speed + 'px';
}
// 当鼠标移出时， 判断语句【2】，如果speed小于0且与目标点距离不大于speed时， oDiv.style.left直接设置为目标点并关闭定时器，否则继续运动。
if (speed < 0 && iTarget - oDiv.offsetLeft >= speed) {
oDiv.style.left = iTarget + 'px';
clearInterval(oDiv.timer);
} else {
oDiv.style.left = oDiv.offsetLeft + speed + 'px';
}
}, 30);
}
oDiv.onmouseover = function () {
startMove(10)
}
oDiv.onmouseout = function () {
startMove(-10)
}
}
