<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.img1 {
position: absolute;
top: 80px;
left: 10px;
}
.img2 {
position: absolute;
top: 80px;
right: 10px;
}
div {
width: 1210px;
margin: 100px auto;
text-align: center;
font: 500 26px/35px "simsun";
color: red;
}
</style>
<script>
window.onload = function () {
//需求:屏幕滾動多少,兩側的圖片聯動向下移動等距離。
//步驟:
//1.老三步
//2.獲取被捲去的頭部的值
//3.移動兩個盒子。(緩動移動)
//1.老三步
var imgArr = document.getElementsByTagName("img");
window.onscroll = function () {
var val=scroll().top;
animate(imgArr[0],val);
animate(imgArr[1],val);
}
function scroll(){
return {
top:document.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop,
left:document.pageXOffset||document.documentElement.scrollLeft||document.body.scrollLeft
}
}
// 緩動動畫
function animate(ele,target){
clearInterval(ele.timer);
ele.timer=setInterval(function(){
var step=(target-ele.offsetTop)/10;
step=step>0?Math.ceil(step):Math.floor(step);
ele.style.top=ele.offsetTop+step+'px';
if(Math.abs(target-ele.offsetTop)<Math.abs(step)){
ele.style.top=target+'px';
}
},30)
}
}
</script>
</head>
<body>
<img class="img1" src="images/aside.jpg"/>
<img class="img2" src="images/aside.jpg"/>
<div>
水垢何曾相受,細看兩俱無有,寄語揩揹人,輕手,輕手,居士本來無垢.....<br>
水垢何曾相受,細看兩俱無有,寄語揩揹人,輕手,輕手,居士本來無垢.....<br>
水垢何曾相受,細看兩俱無有,寄語揩揹人,輕手,輕手,居士本來無垢.....<br>
水垢何曾相受,細看兩俱無有,寄語揩揹人,輕手,輕手,居士本來無垢.....<br>
水垢何曾相受,細看兩俱無有,寄語揩揹人,輕手,輕手,居士本來無垢.....<br>
水垢何曾相受,細看兩俱無有,寄語揩揹人,輕手,輕手,居士本來無垢.....<br>
水垢何曾相受,細看兩俱無有,寄語揩揹人,輕手,輕手,居士本來無垢.....<br>
水垢何曾相受,細看兩俱無有,寄語揩揹人,輕手,輕手,居士本來無垢.....<br>
水垢何曾相受,細看兩俱無有,寄語揩揹人,輕手,輕手,居士本來無垢.....<br>
水垢何曾相受,細看兩俱無有,寄語揩揹人,輕手,輕手,居士本來無垢.....<br>
水垢何曾相受,細看兩俱無有,寄語揩揹人,輕手,輕手,居士本來無垢.....<br>
水垢何曾相受,細看兩俱無有,寄語揩揹人,輕手,輕手,居士本來無垢.....<br>
水垢何曾相受,細看兩俱無有,寄語揩揹人,輕手,輕手,居士本來無垢.....<br>
水垢何曾相受,細看兩俱無有,寄語揩揹人,輕手,輕手,居士本來無垢.....<br>
水垢何曾相受,細看兩俱無有,寄語揩揹人,輕手,輕手,居士本來無垢.....<br>
水垢何曾相受,細看兩俱無有,寄語揩揹人,輕手,輕手,居士本來無垢.....<br>
水垢何曾相受,細看兩俱無有,寄語揩揹人,輕手,輕手,居士本來無垢.....<br>
水垢何曾相受,細看兩俱無有,寄語揩揹人,輕手,輕手,居士本來無垢.....<br>
水垢何曾相受,細看兩俱無有,寄語揩揹人,輕手,輕手,居士本來無垢.....<br>
水垢何曾相受,細看兩俱無有,寄語揩揹人,輕手,輕手,居士本來無垢.....<br>
水垢何曾相受,細看兩俱無有,寄語揩揹人,輕手,輕手,居士本來無垢.....<br>
水垢何曾相受,細看兩俱無有,寄語揩揹人,輕手,輕手,居士本來無垢.....<br>
水垢何曾相受,細看兩俱無有,寄語揩揹人,輕手,輕手,居士本來無垢.....<br>
水垢何曾相受,細看兩俱無有,寄語揩揹人,輕手,輕手,居士本來無垢.....<br>
水垢何曾相受,細看兩俱無有,寄語揩揹人,輕手,輕手,居士本來無垢.....<br>
水垢何曾相受,細看兩俱無有,寄語揩揹人,輕手,輕手,居士本來無垢.....<br>
水垢何曾相受,細看兩俱無有,寄語揩揹人,輕手,輕手,居士本來無垢.....<br>
水垢何曾相受,細看兩俱無有,寄語揩揹人,輕手,輕手,居士本來無垢.....<br>
水垢何曾相受,細看兩俱無有,寄語揩揹人,輕手,輕手,居士本來無垢.....<br>
水垢何曾相受,細看兩俱無有,寄語揩揹人,輕手,輕手,居士本來無垢.....<br>
水垢何曾相受,細看兩俱無有,寄語揩揹人,輕手,輕手,居士本來無垢.....<br>
水垢何曾相受,細看兩俱無有,寄語揩揹人,輕手,輕手,居士本來無垢.....<br>
水垢何曾相受,細看兩俱無有,寄語揩揹人,輕手,輕手,居士本來無垢.....<br>
水垢何曾相受,細看兩俱無有,寄語揩揹人,輕手,輕手,居士本來無垢.....<br>
水垢何曾相受,細看兩俱無有,寄語揩揹人,輕手,輕手,居士本來無垢.....<br>
水垢何曾相受,細看兩俱無有,寄語揩揹人,輕手,輕手,居士本來無垢.....<br>
水垢何曾相受,細看兩俱無有,寄語揩揹人,輕手,輕手,居士本來無垢.....<br>
水垢何曾相受,細看兩俱無有,寄語揩揹人,輕手,輕手,居士本來無垢.....<br>
水垢何曾相受,細看兩俱無有,寄語揩揹人,輕手,輕手,居士本來無垢.....<br>
水垢何曾相受,細看兩俱無有,寄語揩揹人,輕手,輕手,居士本來無垢.....<br>
水垢何曾相受,細看兩俱無有,寄語揩揹人,輕手,輕手,居士本來無垢.....<br>
水垢何曾相受,細看兩俱無有,寄語揩揹人,輕手,輕手,居士本來無垢.....<br>
水垢何曾相受,細看兩俱無有,寄語揩揹人,輕手,輕手,居士本來無垢.....<br>
水垢何曾相受,細看兩俱無有,寄語揩揹人,輕手,輕手,居士本來無垢.....<br>
水垢何曾相受,細看兩俱無有,寄語揩揹人,輕手,輕手,居士本來無垢.....<br>
水垢何曾相受,細看兩俱無有,寄語揩揹人,輕手,輕手,居士本來無垢.....<br>
水垢何曾相受,細看兩俱無有,寄語揩揹人,輕手,輕手,居士本來無垢.....<br>
水垢何曾相受,細看兩俱無有,寄語揩揹人,輕手,輕手,居士本來無垢.....<br>
水垢何曾相受,細看兩俱無有,寄語揩揹人,輕手,輕手,居士本來無垢.....<br>
水垢何曾相受,細看兩俱無有,寄語揩揹人,輕手,輕手,居士本來無垢.....<br>
水垢何曾相受,細看兩俱無有,寄語揩揹人,輕手,輕手,居士本來無垢.....<br>
水垢何曾相受,細看兩俱無有,寄語揩揹人,輕手,輕手,居士本來無垢.....<br>
水垢何曾相受,細看兩俱無有,寄語揩揹人,輕手,輕手,居士本來無垢.....<br>
水垢何曾相受,細看兩俱無有,寄語揩揹人,輕手,輕手,居士本來無垢.....<br>
水垢何曾相受,細看兩俱無有,寄語揩揹人,輕手,輕手,居士本來無垢.....<br>
水垢何曾相受,細看兩俱無有,寄語揩揹人,輕手,輕手,居士本來無垢.....<br>
水垢何曾相受,細看兩俱無有,寄語揩揹人,輕手,輕手,居士本來無垢.....<br>
水垢何曾相受,細看兩俱無有,寄語揩揹人,輕手,輕手,居士本來無垢.....<br>
水垢何曾相受,細看兩俱無有,寄語揩揹人,輕手,輕手,居士本來無垢.....<br>
水垢何曾相受,細看兩俱無有,寄語揩揹人,輕手,輕手,居士本來無垢.....<br>
水垢何曾相受,細看兩俱無有,寄語揩揹人,輕手,輕手,居士本來無垢.....<br>
水垢何曾相受,細看兩俱無有,寄語揩揹人,輕手,輕手,居士本來無垢.....<br>
水垢何曾相受,細看兩俱無有,寄語揩揹人,輕手,輕手,居士本來無垢.....<br>
水垢何曾相受,細看兩俱無有,寄語揩揹人,輕手,輕手,居士本來無垢.....<br>
水垢何曾相受,細看兩俱無有,寄語揩揹人,輕手,輕手,居士本來無垢.....<br>
水垢何曾相受,細看兩俱無有,寄語揩揹人,輕手,輕手,居士本來無垢.....<br>
水垢何曾相受,細看兩俱無有,寄語揩揹人,輕手,輕手,居士本來無垢.....<br>
水垢何曾相受,細看兩俱無有,寄語揩揹人,輕手,輕手,居士本來無垢.....<br>
水垢何曾相受,細看兩俱無有,寄語揩揹人,輕手,輕手,居士本來無垢.....<br>
水垢何曾相受,細看兩俱無有,寄語揩揹人,輕手,輕手,居士本來無垢.....<br>
水垢何曾相受,細看兩俱無有,寄語揩揹人,輕手,輕手,居士本來無垢.....<br>
水垢何曾相受,細看兩俱無有,寄語揩揹人,輕手,輕手,居士本來無垢.....<br>
水垢何曾相受,細看兩俱無有,寄語揩揹人,輕手,輕手,居士本來無垢.....<br>
水垢何曾相受,細看兩俱無有,寄語揩揹人,輕手,輕手,居士本來無垢.....<br>
水垢何曾相受,細看兩俱無有,寄語揩揹人,輕手,輕手,居士本來無垢.....<br>
水垢何曾相受,細看兩俱無有,寄語揩揹人,輕手,輕手,居士本來無垢.....<br>
水垢何曾相受,細看兩俱無有,寄語揩揹人,輕手,輕手,居士本來無垢.....<br>
水垢何曾相受,細看兩俱無有,寄語揩揹人,輕手,輕手,居士本來無垢.....<br>
水垢何曾相受,細看兩俱無有,寄語揩揹人,輕手,輕手,居士本來無垢.....<br>
水垢何曾相受,細看兩俱無有,寄語揩揹人,輕手,輕手,居士本來無垢.....<br>
水垢何曾相受,細看兩俱無有,寄語揩揹人,輕手,輕手,居士本來無垢.....<br>
水垢何曾相受,細看兩俱無有,寄語揩揹人,輕手,輕手,居士本來無垢.....<br>
水垢何曾相受,細看兩俱無有,寄語揩揹人,輕手,輕手,居士本來無垢.....<br>
水垢何曾相受,細看兩俱無有,寄語揩揹人,輕手,輕手,居士本來無垢.....<br>
水垢何曾相受,細看兩俱無有,寄語揩揹人,輕手,輕手,居士本來無垢.....<br>
水垢何曾相受,細看兩俱無有,寄語揩揹人,輕手,輕手,居士本來無垢.....<br>
水垢何曾相受,細看兩俱無有,寄語揩揹人,輕手,輕手,居士本來無垢.....<br>
水垢何曾相受,細看兩俱無有,寄語揩揹人,輕手,輕手,居士本來無垢.....<br>
</div>
</body>
</html>
js 兩側廣告滾動Demo
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.