欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

關于IE10以下的img標簽問題解決

  發(fā)布時間：2018-07-02 17:14:01   作者：LiuDongpei   我要評論
這篇文章主要給大家介紹了關于IE10以下的img標簽問題的解決方法，文中給大家介紹了兩種解決方法，大家可以根絕自己的情況選擇合適代碼解決該問題，需要的朋友可以參考借鑒，下面隨著小編來一起學習學習吧

發(fā)現(xiàn)問題

之前寫過的一段簡單的demo，后來在IE10以下使用的時候發(fā)現(xiàn)無法使用，先上一段代碼

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 < -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);
}

實現(xiàn)的效果就是當鼠標移動到上面span的時候，圖片向上移動，移動到下面span的時候，圖片向下移動，離開則停止。

然而在IE10以下版本鼠標移上span的時候沒有任何效果。

進過多次測試，發(fā)現(xiàn)了兩種解決辦法

方法一：

進過測試發(fā)現(xiàn)如果給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>

總結

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學習或者工作具有一定的參考學習價值，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。

相關文章

最新評論