javascript - 滚动鼠标滚轮 让div缓冲运动到页面中间,chrome下没有问题,ie下不执行。求解决办法以及原因?
怪我咯
怪我咯 2017-04-11 11:45:52
0
1
353

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>
怪我咯
怪我咯

走同样的路,发现不同的人生

全員に返信(1)
阿神

你的代码中getStyle这个方法在IE下获取到的值是undefined,所以导致在IE下有问题,在IE下,获取到的Ap.currentStyle.top的值是auto,你需要在CSS中写上top:0这样,IE才会获取到top值,从而正确得出getStyle的值,你可以试试。

いいねを押す +0
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!