一、页面构成 1.整个外面一个容器==>box 2.容器里面放两个图片(小图==>smallimg,大图==>bigimg)加上一个div的模态框(move) 3.显示放大的图片要被父元素div(bigimgfather)包裹着 4.视口指的是距离边框的距离 二、样式 1.让bigimg和move隐藏 2.让bigimg外面的父元素:overflow-hidden,超出区域的隐藏 三、js实现 1.当鼠标放在在外面的box上面时,move、和bigimg显示。 2.move块的计算 1.获取鼠标的位置(x,y) var x=e.clientX; var y=e.clientY; 2.获取box相对于视口的位置(t,l) var t=document.getElelmentById("#box").offsetTop; var l=document.getELelmentById("#box").ofsfsetLeft; 3.计算move块的左上角的点 var _left=y-l-document.getElementById("#move").offsetWidth/2; var _top=x-t-document.getElementById("#move").offsetHeight/2; 4.move块的移动区域,限于外层图片的div内 if(_left<=0){ _left=0; }else if(_left>=box.offsetWidth-move.offsetWidth){ _left=box.offsetWidth-move.offsetWidth; }//最左边和最右边 if(_top<=0){ _top=0; }else if(_top>=box.offsetHeight-move.offsetHeight){ _top=box.offsetHeight-move.offsetHeight; }//最上边和最下边 5.移动move块 move.style.top=_top+"px"; move.style.left=_left+"px"; 3.大图的计算 1.计算move块移动时,大图需相应扩大的比例 var w=_left/(box.offsetWidth-move.offsetWidth); var h=_top/(box.offsetHeight-move.offsetHeight); var bigimg_left=(bigimg.offsetWidth-bigimgfather.offsetWidth)w; var bigimg_top=(bigimg.offsetWidth-bigimgfather.offsetHeight)h; 2.移动大图 bigimg.style.top=-bigimg_top+"px"; bigimg.style.left=-bigimg_left+"px"; 四、注意 1.判断move块的四个坐标时,不能只一次判别,要做两次,分别是left和top 2.最后移动大图时,坐标前面加一个负号,大图的移动是和move相反的,因为 图片一上来就固定填充在左上角,同方向移动,图片会消失 3.最后移动大图,计算大图比例时,要用大图减去其父元素的宽度/高度

JSRUN前端笔记, 是针对前端工程师开放的一个笔记分享平台,是前端工程师记录重点、分享经验的一个笔记本。JSRUN前端采用的 MarkDown 语法 (极客专用语法), 这里只属于前端工程师。