發(fā)現(xiàn)問(wèn)題
之前寫(xiě)過(guò)的一段簡(jiǎn)單的demo，后來(lái)在IE10以下使用的時(shí)候發(fā)現(xiàn)無(wú)法使用，先上一段代碼
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);}實(shí)現(xiàn)的效果就是當(dāng)鼠標(biāo)移動(dòng)到上面span的時(shí)候，圖片向上移動(dòng)，移動(dòng)到下面span的時(shí)候，圖片向下移動(dòng)，離開(kāi)則停止。
然而在IE10以下版本鼠標(biāo)移上span的時(shí)候沒(méi)有任何效果。
進(jìn)過(guò)多次測(cè)試，發(fā)現(xiàn)了兩種解決辦法
方法一：
進(jìn)過(guò)測(cè)試發(fā)現(xiàn)如果給span加上背景顏色的話， 鼠標(biāo)移上又有效果了
增加代碼：
background: #fff; opacity: 0; filter:alpha(opacity=0);
添加背景色，然后設(shè)置為透明，因?yàn)閛pacity有兼容問(wèn)題，所以加上filter，最后效果和之前完全一樣
方法二：
后來(lái)問(wèn)了朋友，說(shuō)是img標(biāo)簽在IE10嵌套以下會(huì)有，所以把img標(biāo)簽放到div外面來(lái)
<img id="image" src="psb.png" width="512" height="1470" ><div class="all" id="box"> <span id="up"></span> <span id="down"></span></div>
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問(wèn)大家可以留言交流，謝謝大家對(duì)武林網(wǎng)的支持。
新聞熱點(diǎn)
疑難解答
圖片精選
