首页 > 代码库 > IE10一下的img标签问题
IE10一下的img标签问题
之前写过的一段简单的demo,后来在IE10以下使用的时候发现无法使用,先上一段代码
HTML:
1 <div class="all" id="box"> 2 <img id="image" src="psb.png" width="512" height="1470" > 3 <span id="up"></span> 4 <span id="down"></span> 5 </div>
CSS:
1 .all{ 2 position: relative; 3 width: 512px; 4 height: 400px; 5 border: 1px solid #000; 6 margin:100px auto; 7 overflow: hidden; 8 } 9 span{ 10 width: 512px; 11 height: 200px; 12 position: absolute; 13 left: 0; 14 top: 0; 15 cursor: pointer; 16 } 17 #down{ 18 top: auto; 19 bottom: 0; 20 }
JS:
1 var ops = document.getElementById(‘image‘), 2 oup = document.getElementById(‘up‘), 3 odown = document.getElementById(‘down‘), 4 obox = document.getElementById(‘box‘), 5 timer = null; 6 num = 0; 7 8 oup.onmouseover = function(){ 9 clearInterval(timer); 10 timer = setInterval(function(){ 11 num -= 4; 12 if(num < -1070){ 13 num = -1070; 14 clearInterval(timer); 15 } 16 ops.style.marginTop = num+‘px‘; 17 },30) 18 } 19 20 odown.onmouseover = function(){ 21 clearInterval(timer); 22 timer = setInterval(function(){ 23 num += 4; 24 if(num > 0){ 25 num = 0; 26 clearInterval(timer); 27 } 28 ops.style.marginTop = num+‘px‘; 29 },30) 30 } 31 32 obox.onmouseout = function(){ 33 clearInterval(timer); 34 }
实现的效果就是当鼠标移动到上面span的时候,图片向上移动,移动到下面span的时候,图片向下移动,离开则停止。
然而在IE10以下版本鼠标移上span的时候没有任何效果。
进过多次测试,发现了两种解决办法
方法一:
进过测试发现如果给span加上背景颜色的话, 鼠标移上又有效果了
增加代码:
1 background: #fff; 2 opacity: 0; 3 filter:alpha(opacity=0);
添加背景色,然后设置为透明,因为opacity有兼容问题,所以加上filter,最后效果和之前完全一样
方法二:
后来问了朋友,说是img标签在IE10嵌套以下会有,所以把img标签放到div外面来
1 <img id="image" src="http://www.mamicode.com/psb.png" width="512" height="1470" > 2 <div class="all" id="box"> 3 <span id="up"></span> 4 <span id="down"></span> 5 </div>
然后再把样式修改好,最后也是可以解决问题
IE10一下的img标签问题
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。