거의 모든 사람들이 온라인 쇼핑 경험이 있습니다. 일부 웹 사이트에는 제품 확대 유리 기능이 있습니다. 마우스를 그림으로 옮기면 옆에 또 다른 큰 그림이 있으며, 이는 돋보기 효과와 같습니다. 그러한 효과를 어떻게 달성 할 수 있습니까? 코드를 보내 드리겠습니다. 참조하십시오.
<! docType html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> 돋보기 </title> <style>*{마진 : 0; 패딩 : 0;} #Warp {width : 1184px; 500px; 50px Auto; 숨겨진; 패딩 : 10px; 위치 : 상대;}#warp #minbox {width : 350px; 높이 : 350px; float : 왼쪽; 위치 : 상대;}#maxbox {너비 : 400px; 높이 : 400px; 위치 : 절대; 왼쪽 : 380px; 오버 플로 : hidden; 800px; 위치 : 절대;}#con {float : 왼쪽; 마진-왼쪽 : 20px;}#meng {meng {width : 175px; 높이 : 175px; 위치 : 절대; 배경 색 : 노란색; 불투명도 : 0.4; 필터 : Alpha (불투명 = 40; 상단 : 0; display;} </styp> 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 = "images/msg.png"> </div> </div> </div minbox = document.getElementById ( 'minbox'); var meng = document.getElementById ( 'meng'); var maxbox = document.getElementById ( 'maxbox'); var maximg = maxbox.getElementsyTagName ( 'img') ofl = 0, oft = 0; while (obj) {obj) {obj.offsetleft+obj.clientleft; oft+= obj.offsetop+obj.clienttop; obj = obj.offsetpentent;} return {left : ofl, top : oft};} mindox.onmouseMove = function (e) {var e = e || window.event; meng.style.display = 'block'; maxbox.style.display = 'block'; var niubi1 = e.clientx-portsettl (minbox) .left-meng.clientwidth/2; // x coordinate of mask niubi2 = e.clienty-offsettl (minclient-offsettl) 마스크 var bili = maximg.clientWidth/minimg.clientWidth; if (niubi1 <= 0) {niubi1 = 0;} else if (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.left = -parpeint (meng.styl e.left)*bili+'px'; maximg.style.top = -parseint (meng.style.top)*bili+'px';} minbox.onmouseout = function () {meng.style.display = '; maxbox.style.display ='none ';} </script> </html>위는 당신에게 소개 된 JavaScript를 기반으로하는 쇼핑 웹 사이트의 돋보기 유리의 효과입니다. 나는 그것이 당신에게 도움이되기를 바랍니다. 궁금한 점이 있으면 메시지를 남겨 주시면 편집자가 제 시간에 답장을 드리겠습니다. Wulin.com 웹 사이트를 지원해 주셔서 대단히 감사합니다!