javascript实现对联广告 滑动效果
2016-12-09 本文已影响16人
何必自找失落_
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>跟随对联广告javascript</title>
<link rel="stylesheet" type="text/css" href="css/reset.css">
<style type="text/css">
body{
height: 3000px;
}
#advertL,#advertR{
position: absolute;
top: 250px;
}
#advertL{
left: 100px;
}
#advertR{
right: 100px;
}
</style>
</head>
<body>
<div class="advert">
<div id="advertL">
<img src="img/ad.jpg">
</div>
<div id="advertR">
<img src="img/ad.jpg">
</div>
</div>
<script type="text/javascript">
window.onload = function (){
// 实现原理,鼠标滚动距离,算出目标位置,然后进行定时器渐变
var advertL = document.getElementById("advertL");
var advertR = document.getElementById("advertR");
var timer = "";
var distanceY = advertL.offsetTop;// 初始化位置
window.onscroll = function (){
// 浏览器滚动距离
goOn(document.documentElement.scrollTop || document.body.scrollTop);
}
function goOn(range){
clearInterval(timer);
// 目标距离 等于初始距离 加上浏览器滚动距离
var distance = distanceY + range;
timer = setInterval(function (){
var speed = ( distance - advertL.offsetTop ) / 5;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
advertL.style.top = advertR.style.top = advertL.offsetTop + speed+ 'px';
if (advertL.offsetTop == distance) {
clearInterval(timer)
}
},30);
}
}
</script>
</body>
</html>
