Решение проблемы тега img ниже IE10

Раньше я написал простую демонстрацию, но позже обнаружил, что ее нельзя использовать при использовании 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 {позиция: относительная; ширина: 512 пикселей; граница: 1 пиксель, сплошной #000; поле: 100 пикселей авто; переполнение: скрыто;} интервал { ширина: 512 пикселей; высота: 200 пикселей; позиция: абсолютная; верх: 0; курсор: указатель;}#вниз {верх: авто; низ: 0;

 var ops = document.getElementById('image'), oup = document.getElementById('up'), odown = document.getElementById('down'), obox = document.getElementById('box'), timer = null; = 0;oup.onmouseover = function(){clearInterval(таймер); таймер = setInterval(function(){num -= 4; if(num < -1070){ num = -1070;clearInterval(timer); } ops.style.marginTop = num+'px'; },30)}odown.onmouseover = function(){clearInterval(timer); таймер = setInterval(функция(){число += 4; if(num > 0){num = 0;clearInterval(таймер); } ops.style.marginTop = num+'px'; },30)}obox.onmouseout = function(){clearInterval(timer);}

Достигаемый эффект заключается в том, что при перемещении мыши в верхний диапазон изображение перемещается вверх, при перемещении мыши в нижний диапазон изображение перемещается вниз и останавливается при выходе.

Однако в версиях ниже IE10 при перемещении мыши по диапазону эффекта нет.

После тестирования я обнаружил, что если я добавлю цвет фона в диапазон, наведение курсора мыши будет иметь эффект.

Добавьте код:

 фон: #fff; непрозрачность: 0; фильтр: альфа (непрозрачность = 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. Сеть.