<!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;
console.log(sTop);
console.log(oPic.style['top']);
startMove(oPic,50 + sTop,"top");
}
</script>
引用的js
function startMove(obj,target,attr){
clearInterval(obj.timer);
obj.timer = setInterval(function(){
var current = parseFloat(getStyle(obj,attr));
console.log(current);
var speed = 0;
if(attr === 'opacity'){
speed = target-current>0?0.1:-0.1;
}else{
// speed = target-current>0?5:-5;
speed = (target - current)/10; //
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
}
if(target == current){
clearInterval(obj.timer);
}else{
if(attr === 'opacity'){
obj.style[attr] = current+speed;
}else{
obj.style[attr] = current+speed+'px';
console.log(obj.style[attr]);
}
}
},20)
}
//获取元素的属性
function getStyle(obj,attr){
if(window.getComputedStyle){
return window.getComputedStyle(obj,null)[attr];
}else{
return obj.currentStyle[attr];
}
}
//针对两种情况来进行一下整合
效果如图
