以前簡単なデモを書きましたが、IE10 以下では使用できないことが分かりました。まずはコードから始めましょう。
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{ 位置: 相対; 幅: 512px; 境界: 1px 余白: 100px; 位置: 200px;上: 0; カーソル: ポインタ;}#down{ 上: 自動; } JS: 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; } 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);}達成される効果は、マウスが上のスパンに移動すると画像が上に移動し、マウスが下のスパンに移動すると画像が下に移動し、マウスが離れると停止します。
ただし、IE10 より前のバージョンでは、マウスをスパン上に移動しても効果はありません。
多くのテストを行った結果、次の 2 つの解決策が見つかりました。方法 1:テストした結果、スパンに背景色を追加すると、マウスを移動すると効果があることがわかりました。
コードを追加します:
背景: #fff; フィルター: アルファ(不透明度=0);
背景色を追加して透明に設定します。不透明度には互換性の問題があるため、フィルターを追加すると、最終的な効果は以前とまったく同じになります。
方法 2:後で友人に聞いたところ、IE10ではimgタグがネストされるとのことだったので、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 へのサポートに感謝いたします。ネットワーク。