حل مشكلة علامة 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{ الموضع: عرض نسبي؛ الارتفاع: 400 بكسل؛ الحد: 1 بكسل ثابت #000؛ التجاوز: مخفي؛}span{ العرض: 512 بكسل؛ أعلى: 0؛ المؤشر: }#down{ أعلى: أسفل: 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(timer); setInterval(function(){ num -= 4; if(num < -1070){ num = -1070; ClearInterval(timer); } ops.style.marginTop = num+'px'; 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 خارج القسم.

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

ما ورد أعلاه هو المحتوى الكامل لهذه المقالة، وآمل أن يكون لمحتوى هذه المقالة قيمة مرجعية معينة لدراسة أو عمل الجميع. إذا كان لديك أي أسئلة، يمكنك ترك رسالة للتواصل شبكة.