发现问题

以前写过的一段简易的demo,之后在IE10下列应用的情况下发现没法应用,先上一段代码

HTML

<div class="all" id="box">
    <img id="image" src="psb.png" width="512" height="1470" >
    <span id="up"></span>
    <span id="down"></span>
</div>

CSS:

.all{ 
    position: relative;
    width: 512px; 
    height: 401080x; 
    border: 1px solid #000; 
    margin:101080x auto; 
    overflow: hidden;
}
span{
    width: 512px; 
    height: 201080x; 
    position: absolute; 
    left: 0; 
    top: 0; 
    cursor: pointer;
}
#down{ 
    top: auto; 
    bottom: 0; 
}

JS:

var ops = document.getElementById('image'),
    oup = document.getElementById('up'),
    odown = document.getElementById('down'),
    obox = document.getElementById('box'),
    timer = null;
    num = 0;

oup.onmouseover = function(){             
    clearInterval(timer);
    timer = setInterval(function(){
        num -= 4;
        if(num < -1070){
            num = -1070;
            clearInterval(timer);
        }
        ops.style.marginTop = num 'px';
    },30)
}

odown.onmouseover = function(){   
    clearInterval(timer);
    timer = setInterval(function(){
        num  = 4;
        if(num > 0){
            num = 0;
            clearInterval(timer);
        }
        ops.style.marginTop = num 'px';
    },30)
}

obox.onmouseout = function(){ 
    clearInterval(timer);
}

完成的实际效果便是当鼠标挪动到上边span的情况下,照片往上挪动,挪动到下边span的情况下,照片向下移动,离去则终止。

殊不知在IE10下列版本号电脑鼠标移上span的情况下沒有一切实际效果。

进过数次检测,发现了二种解决方案

方式 一:

进过检测发现假如给span再加上背景色得话, 电脑鼠标移上又有实际效果了

提升代码:

 background: #fff;
 opacity: 0;
 filter:alpha(opacity=0);

加上背景颜色,随后设定为全透明,由于opacity有兼容性问题,因此 再加上filter,最终实际效果和以前彻底一样

方式 二:

之后问了盆友,说成img标签在IE10嵌套循环下列会出现,因此 把img标签放进div外边来

<img id="image" src="psb.png" width="512" height="1470" >
<div class="all" id="box">       
    <span id="up"></span>
    <span id="down"></span>
</div>

小结

之上便是本文的所有内容了,期待文中的內容对大伙儿的学习培训或是工作中具备一定的参照学习培训使用价值,假如有疑问大伙儿能够 留言板留言沟通交流,谢谢你们对的适用。