关于IE10以下的img标签问题解决

    发现问题

    之前写过的一段简单的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: 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);
    }

    实现的效果就是当鼠标移动到上面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>

    总结

    以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对lingkb的支持。

发表评论

发表评论