startMove函数是我看了视频后推导了一遍。
想着试着用在其他地方看看。刚刚我试了不用getStyle获取top ,直接用offsetTop,发现ie下又可以用了,不解。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{height:2000px;}
#p1{background:red;width: 100px;height: 100px; position: absolute;}
</style>
</head>
<body>
<p id="p1"></p>
<script>
window.onload = function(){
window.onscroll = function(){
var Ap = document.getElementById('p1');
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
var tar = Math.ceil((document.documentElement.clientHeight - Ap.offsetHeight)/2)+parseInt(scrollTop);
startMove(Ap,'top',tar)
}
}
function startMove(obj,attr,target){
clearInterval(obj.timer);
var ispeed = '';
obj.timer = setInterval(function(){
ispeed =(target-parseInt(getStyle(obj,attr)))/6
ispeed = ispeed>0?Math.ceil(ispeed):Math.floor(ispeed);
var psn = parseInt(getStyle(obj,attr))+ispeed;
if(psn>target&&ispeed>0 || psn<target&&ispeed<0) {
psn = target;
}
obj.style[attr] = psn + 'px';
if(psn == target){
clearInterval(obj.timer);
}
document.title = getStyle(obj,attr)
},30)}
function getStyle(obj,attr){
return obj.currentStyle? obj.currentStyle[attr] : getComputedStyle(obj,false)[attr] ;
}
</script>
</body>
</html>
你的代码中
getStyle
这个方法在IE下获取到的值是undefined
,所以导致在IE下有问题,在IE下,获取到的Ap.currentStyle.top
的值是auto
,你需要在CSS中写上top:0
这样,IE才会获取到top
值,从而正确得出getStyle
的值,你可以试试。