ほとんどの人がオンラインで買い物をしている経験があります。一部のWebサイトには、製品の拡大ガラス機能があります。マウスを写真に移動すると、その隣に別の大きな写真があります。これは拡大ガラス効果に相当します。そのような効果はどのように達成できますか？私はあなたにコードを送ります、それを参照してください。
<！doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title>拡大ガラス</title </title> <style>*{margin：0; padding：0;}＃warp {width：1184px; height：height：height：500px; 10px; position：relative;}＃warp #minbox {width：350px; height：350px; float：leftion：position：relative;}＃maxbox {width：400px; height：400px; position：absolute; left：380px; anuverflow：hidden; Absolute;}＃con {float：left; margin-left：20px;}＃meng {width：175px; height：175px; position：aspolute; background-color：yellow; ofacity：0.4; filter：alpha（ofacity = 40）; left：0; top：0; display;} id = "minbox"> <img src = "images/min.jpg"> <p id = "meng"> </p> </div> <div id = "maxbox"> <img src = "images/max.jpg"> </div> <div id = "con"> <img src = "image/msg.png"> </<> <> <> <> <> <> < minbox = document.getElementById（ 'minbox'）; var meng = document.getElementById（ 'meng'）; var maxbox = document.getElementById（ 'maxbox'）; var maximg = maxbox.getElementsBytagname（ 'img'）[0]; var minimg.getElementsBytagname（ 'img）; ofl = 0、oft = 0; while（obj）{ofl+= obj.offsetleft+obj.clientleft; oft+= obj.offsettop+obj.clienttop; obj = obj.offsetparent;} return {left：ofl、top：oft};} onmousemove = fentunce（e）{e）{e） e = e || window.event; meng.style.display = 'block'; maxbox.style.display = 'block'; var niubi1 = e.clientx-offsettl（minbox）.left-meng.clientwidth/2; // xマスクの座標var niubi2 = e.clienty-offsettl（minbox）.top-meng.clientheight/2; // yマスクの座標var bili = maximg.clientwidth/minimg.clientwidth; if（niubi1 <= 0）{niubi1 = 0;} if（niubi1> minbox.clientwidth） {niubi1 = minbox.clientwidth-meng.clientwidth;} if（niubi2 <= 0）{niubi2 = 0;} {niubi2 = minbox.clientheight-meng.clientheight;} console.log.log（niubi1）; console.log（niubi2）; meng.style.left = niubi1+'px'; meng.style.top = niubi2+'px'; maximg.style.lett e.Left）*bili+'px'; maximg.style.top = -parseint（meng.style.top）*bili+'px';} minbox.onmouseout = function（）{meng.style.display = 'none'; maxbox.style.display = 'NONE';} </ht>上記は、あなたに紹介されたJavaScriptに基づいたショッピングWebサイトの拡大ガラスの効果です。それがあなたに役立つことを願っています。ご質問がある場合は、メッセージを残してください。編集者は時間内に返信します。 wulin.comのウェブサイトへのご支援ありがとうございます！