Почти у каждого есть опыт покупок в Интернете. Некоторые сайты имеют функцию увеличивающего стекла продукта. Когда вы перемещаете мышь на картинку, рядом с ней будет еще одна большая картина, которая эквивалентна эффекту увеличительного стекла. Как можно достичь такого эффекта? Я пришлю вам код, пожалуйста, обратитесь к нему.
<! Doctype html> <html lang = "en"> <head> <meta charset = "UTF-8"> <Teal> Magnify Glass </title> <style>*{Margin: 0; Padding: 0;} #Warp {width: 1184px; высота: 500px; margin: 50px auto 0; 10px; позиция: относительно;}#warp #minbox {width: 350px; высота: 350px; float: слева; Положение: относительно;}#maxbox {width: 400px; высота: 400px; положение: абсолют; слева: 380px; overflow: hidden; disploy: none;}#maxbox img; 800px; позиция: Absolute;}#con {float: left; margin-left: 20px;}#meng {width: 175px; высота: 175px; положение: абсолютное; фоновое цвета: желтое; непрозрачность: 0,4; Фильтр: Альфа (непрозрачность = 40); слева: 0; вершина: 0; нет: нет; 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"> </div> <cript> <srip> <script> <script> <script> <ScRIPT> <ScRIPT> <ScRIPT> <SCRIP> <ScRIPT> <SCRIP> minbox = document.getElementById ('minbox'); var meng = document.getElementbyId ('meng'); var maxbox = document.getElementbyid ('maxbox'); var maximg = maxbox.getelementsbytagname ('img') [0]; var minimger = minbox.getelementsbytagname ('img') [0]; ofl = 0, oft = 0; while (obj) {ofl+= obj.offsetleft+obj.clientleft; oft+= obj.offsettop+obj.clienttop; obj = obj.offsetparent;} return {слева: ofl, top: opt};} minbox.onmousemove = function (e) {var 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). Координата маски var bili = maximg.clientwidth/minimg.clientwidth; if (niubi1 <= 0) {niubi1 = 0;} else if (niubi1> = minbox.clientwidth-meng.clientwidth) {niubi1 = minbox.clientwidth-meng.clientwidth) {niubi1 = minbox.clientwidth-meng.clientwidth) {niubi2 = 0;} else if (niubi2> = minbox.clientHeight-meng.clientHeight) {niubi2 = minbox.clientHeight-meng.clientHeight;} console.log (niubi1); console.log (niubi2); meng.style.left = niubi1+'px'; meng.style.top = niubi2+'px'; maximg.style.lele. e.left)*bili+'px'; maximg.style.top = -parseint (meng.style.top)*bili+'px';} minbox.onmouseout = function () {meng.style.display = 'none'; maxbox.style.display = 'none';} <//none ';Выше приведено влияние увеличительного стекла веб -сайта на основе JavaScript, представленного вам. Я надеюсь, что это будет полезно для вас. Если у вас есть какие -либо вопросы, пожалуйста, оставьте мне сообщение, и редактор ответит вам вовремя. Большое спасибо за вашу поддержку сайту wulin.com!