關(guān)于IE10以下的img標(biāo)簽問(wèn)題解決
我要評(píng)論發(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加上背景顏色的話(huà)， 鼠標(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ì)腳本之家的支持。
相關(guān)文章
img標(biāo)簽src屬性值為空時(shí)2次請(qǐng)求問(wèn)題(非ie瀏覽器)
以前應(yīng)該有同學(xué)遇到過(guò)類(lèi)似的情況, 當(dāng)有一個(gè)類(lèi)似如 img src=’’ 的標(biāo)簽時(shí), 會(huì)對(duì)頁(yè)面多出一次請(qǐng)求，接下來(lái)以實(shí)驗(yàn)的方式加以驗(yàn)證，感興趣的你可不要錯(cuò)過(guò)了哈，希望本文提供的2013-02-16IE下元素空白區(qū)域(該元素在上img在下)與圖片重疊無(wú)法觸發(fā)鼠標(biāo)事件
IE 下與元素重疊的區(qū)域?yàn)閕mg（該元素在上img在下),且該元素?zé)o背景,則該區(qū)域無(wú)法觸發(fā)鼠標(biāo)事件,很是郁悶，與大家分享下，不知有沒(méi)有更好的解決方法2013-01-18圖片元素img在IE6下出現(xiàn)多余空白問(wèn)題
在進(jìn)行頁(yè)面的DIV+CSS排版時(shí)，遇到IE6（當(dāng)然有時(shí)Firefox下也會(huì)偶遇）瀏覽器中的圖片元素img下出現(xiàn)多余空白的問(wèn)題絕對(duì)是常見(jiàn)的對(duì)于該問(wèn)題的解決方法也是“見(jiàn)機(jī)行事”，根據(jù)原2011-07-27- 嗯，開(kāi)場(chǎng)先胡扯幾句不相關(guān)地感言。最近的工作讓我有了很多實(shí)踐的機(jī)會(huì)，同時(shí)也讓我收獲頗豐。在群里聊天的時(shí)候也提到過(guò)，所有的學(xué)習(xí)過(guò)程，最好是理論－實(shí)踐－再理論－再實(shí)踐2009-06-13
IE6圖片元素img下出現(xiàn)多余空白的問(wèn)題
網(wǎng)頁(yè)制作Webjx文章簡(jiǎn)介：在進(jìn)行頁(yè)面的DIV CSS排版時(shí)，遇到IE6（當(dāng)然有時(shí)Firefox下也會(huì)偶遇）瀏覽器中的圖片元素img下出現(xiàn)多余空白的問(wèn)題絕對(duì)是常見(jiàn)的對(duì)于該問(wèn)題的解決方法2009-04-02在IE流覽器中正確顯示PNG透明圖片-CSS教程-網(wǎng)頁(yè)制作-網(wǎng)頁(yè)教學(xué)網(wǎng)
png圖片有很好的品質(zhì)。陰影效果也不會(huì)有雜邊,很流暢。如果插入網(wǎng)頁(yè)的話(huà)可以給網(wǎng)站內(nèi)容增色不少!更重要的是在不增加圖片容量大小的情況下提高了頁(yè)面的圖片的質(zhì)量。對(duì)于2008-10-17