저는 여러분이 돋보기 효과에 대해 별로 익숙하지 않다고 생각합니다. 우리 개발에서는 특히 개발자 몰과 같이 돋보기 효과가 일반적으로 사용되는 프로젝트에서 돋보기 효과를 얻기 위해 JavaScript를 자주 사용합니다. JavaScript를 사용하여 돋보기 효과를 얻는 간단한 예를 소개하겠습니다.
아이디어:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>放大镜</title> <link href="css/bigimg.css" rel="stylesheet" /> <script src="js/bigimg.js"></script> </head> <body onload="bigimg()"> <p id="box"> <img src="images/simg.jpg" alt="#"> <p id="move"></p> <p id="bimg"> <img id="b_bimg" src="images/bimg.jpg" alt="#"> </p> </p> </body> </html>
css 스타일:
*{ margin:0px; padding:0px; } #box{ width:430px; height:430px; margin:100px; margin-left:17%; position:relative;//这里使用相对定位,好让其他的元素能依靠这个元素定位 } #move{ background-image:url(../images/move.png); width:220px; height:220px; position:absolute; left:0px; top:0px; display:none;//先让他隐藏,用js使其显示 } #bimg{ width:430px; height:430px; overflow:hidden; position:absolute; top:0px; left:450px; display:none;//先让他隐藏,用js使其显示 } #bimg img{ width:800px; height:800px; position:absolute; top:0px; left:0px; }
Javascript:
function bigimg(){ var bbox = document.getElementById("box"); var bmove = document.getElementById("move"); var bbimg = document.getElementById("bimg"); var b_bimg = document.getElementById("b_bimg"); bbox.onmouseover = function(){//鼠标移动到box上显示大图片和选框 bbimg.style.display = "block"; bmove.style.display="block"; } bbox.onmouseout = function(){//鼠标移开box不显示大图片和选框 bbimg.style.display = "none"; bmove.style.display="none"; } bbox.onmousemove = function(e){//获取鼠标位置 var x = e.clientX;//鼠标相对于视口的位置 var y = e.clientY; var t = bbox.offsetTop;//box相对于视口的位置 var l = bbox.offsetLeft; var _left = x - l - bmove.offsetWidth/2;//计算move的位置 var _top = y - t -bmove.offsetHeight/2; if(_top<=0)//滑到box的最顶部 _top = 0; else if(_top>=bbox.offsetHeight-bmove.offsetHeight)//滑到box的最底部 _top = bbox.offsetHeight-bmove.offsetHeight ; if(_left<=0)//滑到box的最左边 _left=0; else if(_left>=bbox.offsetWidth-bmove.offsetWidth)//滑到box的最右边 _left=bbox.offsetWidth-bmove.offsetWidth ; bmove.style.top = _top +"px";//设置move的位置 bmove.style.left = _left + "px"; var w = _left/(bbox.offsetWidth-bmove.offsetWidth);//计算移动的比例 var h = _top/(bbox.offsetHeight-bmove.offsetHeight); var b_bimg_top = (b_bimg.offsetHeight-bbimg.offsetHeight)*h;//计算大图的位置 var b_bimg_left = (b_bimg.offsetWidth-bbimg.offsetWidth)*w; b_bimg.style.top = -b_bimg_top + "px";//设置大图的位置信息 b_bimg.style.left = -b_bimg_left + "px"; } }
렌더링:
1. 이동 블록 계산
검은색 화살표:
var x = e.clientX;//鼠标相对于视口的位置 var y = e.clientY;빨간색 화살표:
var t = bbox.offsetTop;//box相对于视口的位置 var l = bbox.offsetLeft;주황색 화살표:
var _left = x - l - bmove.offsetWidth/2;//计算move的位置 var _top = y - t -bmove.offsetHeight/2;2.bimg 블록 계산 이동 범위 내의 이동 블록 사용 큰 그림의 위치를 설정하는 비율이동 블록의 이동 범위:
bbox.offsetWidth-bmove.offsetWidth이동 블록의 현재 좌표와 이동 범위의 비율:
var w = _left/(bbox.offsetWidth-bmove.offsetWidth);//计算移动的比例 var h = _top/(bbox.offsetHeight-bmove.offsetHeight);이동 범위 bimg:
b_bimg.offsetHeight-bbimg.offsetHeightbimg의 입장:
var b_bimg_top = (b_bimg.offsetHeight-bbimg.offsetHeight)*h;//计算大图的位置 var b_bimg_left = (b_bimg.offsetWidth-bbimg.offsetWidth)*w;
요약:
이 글을 공부하면서 JavaScript의 돋보기 효과에 대해 모두가 더 잘 이해하게 되었다고 생각합니다. 돋보기 효과를 이해하지 못하는 경우 작업에 도움이 되기를 바랍니다.관련 권장 사항:
c 사용에 대한 자세한 예 ss를 달성하기 위해 그림 돋보기 효과(그림)
위 내용은 돋보기 효과를 구현한 JavaScript의 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!