99热在线精品一区二区三区_国产伦精品一区二区三区女破破_亚洲一区二区三区无码_精品国产欧美日韩另类一区

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

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

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

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

方法一：

進(jìn)過測試發(fā)現(xiàn)如果給span加上背景顏色的話， 鼠標(biāo)移上又有效果了

增加代碼：

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

添加背景色，然后設(shè)置為透明，因?yàn)閛pacity有兼容問題，所以加上filter，最后效果和之前完全一樣

方法二：

后來問了朋友，說是img標(biāo)簽在IE10嵌套以下會有，所以把img標(biāo)簽放到div外面來