慕前端8664132
2016-10-10 11:09
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
font: 12px '微软雅黑';
}
#smooth div {
float: left;
}
#smooth {
height: 200px;
width: 350px;
position: absolute;
left: -300px;
top: 100px;
}
#content {
background: #d3eff9;
height: 200px;
width: 300px;
}
#button {
height: 50px;
width: 25px;
background: #d3eff9;
cursor: pointer;
}
#button span {
display: block;
width: 12px;
margin: 8px auto;
}
#wrap {
height: 600px;
background: #3979d9;
}
</style>
</head>
<body>
<div id="wrap"></div>
<div id="smooth">
<div id="content"></div>
<div id="button"><span>分享</span></div>
</div>
<script type="text/javascript">
window.onload = function () {
var divL = document.getElementById('smooth'),
timer = null;
function smoothing(iTarget) {
clearInterval(timer);
var speed = 0;
// var l = divL.offsetLeft;
timer = setInterval(function () {
var l = divL.offsetLeft;
speed = (iTarget - l)/12;
speed = speed>0?Math.ceil(speed):Math.floor(speed);
if (l == iTarget) {
clearInterval(timer);
}
else {
l = l + speed;
divL.style.left = l + 'px';
/*console.log(l);
console.log(divL.offsetLeft);
console.log('speed:'+speed);*/
}
}, 30);
}
divL.onmouseover = function () {
smoothing(0);
}
divL.onmouseout = function () {
smoothing(-300);
}
}
</script>
</body>
</html> <!--问题:这里的timer变量哪来的啊,都没有声明啊???-->
var divL = document.getElementById('smooth'),
timer = null;
这里已经声明了 这里同事声明了2个变量,一个divL 一个timer 想一次声明多个变量可以用逗号连接 例如:
var a = 0, b=1, c =3;
这里同时声明了a b c 三个变量并赋值
JS动画效果
113923 学习 · 1443 问题
相似问题