全国服务热线:4008-888-888

技术知识

有关IE10下列的img标识难题处理

发现难题

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

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: 400px; 
    border: 1px solid #000; 
    margin:100px auto; 
    overflow: hidden;
}
span{
    width: 512px; 
    height: 200px; 
    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 < ⑴070){
            num = ⑴070;
            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的情况下沒有任何实际效果。

进过量次检测,发现了两种处理方法

方式1:

进过检测发现假如给span再加情况色调的话, 电脑鼠标移上又合理果了

提升编码:

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

加上情况色,随后设定为全透明,由于opacity有适配难题,因此再加filter,最终实际效果和以前彻底1样

方式2:

后来问了盆友,说是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>

总结

以上便是这篇文章内容的所有內容了,期待本文的內容对大伙儿的学习培训或工作中具备1定的参照学习培训使用价值,假如有疑惑大伙儿能够留言沟通交流,感谢大伙儿对脚本制作之家的适用。



在线客服

关闭

客户服务热线
4008-888-888


点击这里给我发消息 在线客服

点击这里给我发消息 在线客服