IE10 이하의 img 태그 문제 해결

이전에 간단한 데모를 작성했지만 나중에 IE10 이하에서는 사용할 수 없다는 것을 발견했습니다.

 <div class=all id=box> <img id=image src=psb.png width=512 height=1470 > <span id=up></span> <span id=down></span></div>

 .all{ 위치: 상대; 너비: 400px; 테두리: 1px #000; 여백: 100px 자동; 숨김;}폭: 512px; 위치: 절대; 상단: 0; 커서: 포인터;}#down{ 상단: 자동: 0;

 var ops = document.getElementById('image'), oup = document.getElementById('up'), odown = document.getElementById('down'), obox = document.getElementById('box'), 타이머 = null; = 0;oup.onmouseover = function(){clearInterval(timer); 타이머 = setInterval(function(){ num -= 4; if(num < -1070){ num = -1070;clearInterval(timer); } ops.style.marginTop = num+'px'; },30)}odown.onmouseover = function(){clearInterval(timer); 타이머 = setInterval(function(){ num += 4; if(num > 0){ num = 0;clearInterval(timer); } ops.style.marginTop = num+'px'; },30)}obox.onmouseout = function(){clearInterval(timer);}

달성되는 효과는 마우스가 위쪽 범위로 이동하면 그림이 위쪽으로 이동하고, 마우스가 아래쪽 범위로 이동하면 그림이 아래쪽으로 이동하고 떠날 때 멈추는 것입니다.

하지만 IE10 이하 버전에서는 범위 위로 마우스를 움직여도 아무런 효과가 없습니다.

테스트 결과 범위에 배경색을 추가하면 마우스를 위로 이동하면 효과가 있는 것으로 나타났습니다.

코드 추가:

 배경: #fff; 필터:알파(불투명도=0);

배경색을 추가하고 투명하게 설정합니다. 불투명도에는 호환성 문제가 있으므로 필터를 추가하면 최종 효과는 이전과 동일합니다.

나중에 친구에게 물어보니 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>

위의 내용은 이 기사의 전체 내용입니다. 이 기사의 내용이 모든 사람의 학습이나 업무에 특정 참고 가치가 있기를 바랍니다. 궁금한 점이 있으면 메시지를 남겨주세요. VeVb Wulin의 지원에 감사드립니다. 회로망.