广告两侧跟随效果
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
img {
position: absolute;
left: 0;
top: 50px;
}
#demo {
width: 1000px;
margin: 0 auto;
}
</style>
</head>
<body>
<img src="images/aside.jpg" alt="" id="pic" />
<div id="demo">
<p>天王盖地虎,小鸡炖蘑菇</p>
<p>天王盖地虎,小鸡炖蘑菇</p>
<p>天王盖地虎,小鸡炖蘑菇</p>
<p>天王盖地虎,小鸡炖蘑菇</p>
<p>天王盖地虎,小鸡炖蘑菇</p>
<p>天王盖地虎,小鸡炖蘑菇</p>
<p>天王盖地虎,小鸡炖蘑菇</p>
<p>天王盖地虎,小鸡炖蘑菇</p>
<p>天王盖地虎,小鸡炖蘑菇</p>
<p>天王盖地虎,小鸡炖蘑菇</p>
<p>天王盖地虎,小鸡炖蘑菇</p>
<p>天王盖地虎,小鸡炖蘑菇</p>
<p>天王盖地虎,小鸡炖蘑菇</p>
<p>天王盖地虎,小鸡炖蘑菇</p>
<p>天王盖地虎,小鸡炖蘑菇</p>
<p>天王盖地虎,小鸡炖蘑菇</p>
<p>天王盖地虎,小鸡炖蘑菇</p>
<p>天王盖地虎,小鸡炖蘑菇</p>
<p>天王盖地虎,小鸡炖蘑菇</p>
<p>天王盖地虎,小鸡炖蘑菇</p>
<p>天王盖地虎,小鸡炖蘑菇</p>
<p>天王盖地虎,小鸡炖蘑菇</p>
<p>天王盖地虎,小鸡炖蘑菇</p>
<p>天王盖地虎,小鸡炖蘑菇</p>
<p>天王盖地虎,小鸡炖蘑菇</p>
<p>天王盖地虎,小鸡炖蘑菇</p>
<p>天王盖地虎,小鸡炖蘑菇</p>
<p>天王盖地虎,小鸡炖蘑菇</p>
<p>天王盖地虎,小鸡炖蘑菇</p>
<p>天王盖地虎,小鸡炖蘑菇</p>
<p>天王盖地虎,小鸡炖蘑菇</p>
<p>天王盖地虎,小鸡炖蘑菇</p>
<p>天王盖地虎,小鸡炖蘑菇</p>
<p>天王盖地虎,小鸡炖蘑菇</p>
<p>天王盖地虎,小鸡炖蘑菇</p>
<p>天王盖地虎,小鸡炖蘑菇</p>
</div>
</body>
</html>
<script src="../sport.js"></script>
<script type="text/javascript">
var oPic = document.getElementById("pic");
window.onscroll = function() {
var sTop = document.documentElement.scrollTop || document.body.scrollTop;
startMove(oPic,50 + sTop,"top");
}
</script>
sport.js
function startMove(obj,target,attr) {
clearInterval(obj.timer);
obj.timer = setInterval(function() {
var current = parseFloat(getStyle(obj,attr));
var speed = 0;
if (attr === "opacity") {
speed = target - current > 0 ? 0.1: -0.1;
} else {
speed = (target - current)/10;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
}
if (current === target) {
clearInterval(obj.timer);
} else {
if (attr === "opacity") {
obj.style[attr] = current + speed
} else {
obj.style[attr] = current + speed + "px";
}
}
},20);
}
function getStyle(obj,attr) {
if (window.getComputedStyle) {
return window.getComputedStyle(obj,false)[attr];
} else {
return obj.currentStyle[attr];
}
}