原生Js放大镜实例(附图附讲解可直接复制研究使用，小白福利)

(个人理解的画图在最后，审美差了点请见谅，)

css

*{margin: 0;padding: 0;}body>div{width: 1200px;height: 600px;margin: 100px auto;position: relative;}#box1{position: absolute;top: 0;left: 0;width: 600px;height: 600px;}#box1>img{width: 100%;height: 100%;}#box1>div{width: 200px;height: 200px;background-color: rgba(255,255,255,.2);position: absolute;top: 0;left: 0;display: none;}#box2{width: 600px;height: 600px;position: absolute;left: 600px;top: 0;overflow: hidden;display: none;}#box2>img{width: 1800px;height: 1800px;position: absolute;top: 0;left: 0;}

html

<div>
<div id="box1"><img src="http://img1.imgtn.bdimg.com/it/u=2144345033,2329962120&fm=26&gp=0.jpg"><div></div>
</div>
<div id="box2"><img src="http://img1.imgtn.bdimg.com/it/u=2144345033,2329962120&fm=26&gp=0.jpg">
</div>

```

/**
* 思路：
*    商品放大镜是有两个盒子，第一个盒子就是我们的可以看到的商品图片，鼠标移入有一个小盒子会显示出来跟着鼠标移动，
*    同时右边第二个盒子里面也有一张图片，第一个可视盒子与其中小盒子的大小比例刚好等于第二个盒子中图片大小与第二
*    个盒子的大小比例，鼠标移入第一个商品盒子时显示其中小盒子与右侧大盒子，鼠标在盒子中移动时实时记录其事件对象
*    的clientX和clientY，如果有滚动条则是pageX和pageY，然后每一次移动计算出值给其中小盒子让其跟着鼠标移动，
*    同时通过与其中小盒子宽高的比例来确定右侧盒子中的图片移动距离
*///获取元素，两个大盒子和鼠标跟随小盒子，需要移动位置的图片let box1=document.getElementById('box1'),box2=document.getElementById('box2'),mBox=box1.getElementsByTagName('div')[0],mImg=box2.getElementsByTagName('img')[0];//给商品显示盒子绑定鼠标移动事件
box1.onmousemove=(ev)=>{//需要先让两个盒子显示，如果设置了移动后在显示会有一个短暂的跳动mBox.style.display='block';box2.style.display='block';//获取当前鼠标指针坐标，父盒子的xy轴偏移量，计算出鼠标指针距离商品显示盒子的距离let x=ev.clientX,y=ev.clientY,eOffsetLeft=offset(box1)['left'],eOffsetTop=offset(box1)['top'];eX=x-eOffsetLeft;eY=y-eOffsetTop;/*** 边界判断：*     鼠标指针在跟随小盒子的中心，所以四边都有一个跟随小盒子的一般宽度是不可动的，详情见后图*/if(eX<mBox.clientWidth/2){eX=0}else if(eX>box1.clientWidth-mBox.clientWidth/2){eX=box1.clientWidth-mBox.clientWidth;}else{eX-=mBox.clientWidth/2;}if(eY<mBox.clientHeight/2){eY=0}else if(eY>box1.clientHeight-mBox.clientHeight/2){eY=box1.clientHeight-mBox.clientHeight;}else{eY-=mBox.clientHeight/2;}mBox.style.top=eY+'px';mBox.style.left=eX+'px';mImg.style.top=eY*-3+'px';mImg.style.left=eX*-3+'px';
}box1.onmouseleave=()=>{mBox.style.display='none';box2.style.display='none';}/**
* 获取元素距离body上边和左边的偏移量的方法
* @param ele
* @returns {{top: number, left: number}}
*/
function offset(ele) {let left = ele.offsetLeft; // 当前元素的offsetLeftlet top = ele.offsetTop; // 当前元素的offsetToplet parent = ele.offsetParent; // 获取当前元素的offsetParentwhile (parent && parent.nodeName !== 'BODY') {left += parent.clientLeft + parent.offsetLeft;top += parent.clientTop + parent.offsetTop;parent = parent.offsetParent;}return {left,top}}

这是比较详情比较笨重的写法，主要帮助刚学习的小白理解其中原理
下面是封装的一个放大镜插件：

*{margin: 0;padding: 0;}.readingBox>div:nth-of-type(1){width: 100%;height: 100%;position: absolute;/*设置父元素与内部图片的边距，看需求设置*//*left: 100px;*//*top: 50px;*/}.readingBox>div:nth-of-type(1)>img{width: 100%;height: 100%;}.readingBox>div:nth-of-type(2){position: absolute;width: 100%;height: 100%;overflow: hidden;display: none;/*显示区的位置，设置为内部图片宽度加上父元素与内部图片的左边距为left,高度同20行一样*/top: 0px;}.readingBox>div:nth-of-type(1)>div:nth-of-type(1){position: absolute;display: none;border: 1px solid rgba(255,255,255,0.2)}

html

<div class="readingBox" id="box">

~function(){class  Reading{constructor(obj){this.ele=obj.ele;//创建放大镜的父元素this.img=obj.img;//放大镜图片的地址this.width=obj.width;//放大镜显示区的宽度this.height=obj.height;//放大镜显示区的高度this.init();}//主入口init(){this.createEle();this.bindMouse();}//创建获取元素createEle(){this.ele.style.width=this.width+"px";this.ele.style.height=this.height+"px";this.ele.style.position='relative';let str=`<div ><img src="${this.img}"><div style="width: ${this.width/3}px;height: ${this.height/3}px;"></div></div><div style="left:${this.width}px"><img src="${this.img}" width="${this.width*3}px" height="${this.height*3}px" style="position: absolute"></div>`;this.ele.innerHTML=str;this.eDivBox=this.ele.getElementsByTagName('div')[0];this.eImgBox=this.ele.getElementsByTagName('div')[2];this.readDiv=this.ele.getElementsByTagName('div')[1];this.eImg=this.ele.getElementsByTagName('div')[2].getElementsByTagName('img')[0];}//为父盒子绑定鼠标移入移除和移动的事件bindMouse(){this.eDivBox.onmouseenter=()=>{this.readDiv.style.display='block';this.eImgBox.style.display='block';};this.eDivBox.onmouseleave=()=>{this.readDiv.style.display='none';this.eImgBox.style.display='none';};this.eDivBox.onmousemove=(ev)=>{let left=ev.pageX-this.eDivBox.offsetLeft,top=ev.pageY-this.eDivBox.offsetTop;//判断边界let ban=this.readDiv.offsetWidth/2;left=left<ban?ban:left+ban>this.eDivBox.offsetWidth?this.eDivBox.offsetWidth-ban:left;top=top<ban?ban:top+ban>this.eDivBox.offsetHeight?this.eDivBox.offsetHeight-ban:top;console.log(left, top);this.readDiv.style.left=left-ban+'px';this.readDiv.style.top=top-ban+'px';this.eImg.style.left=-3*(left-ban)+'px';this.eImg.style.top=-3*(top-ban)+'px';}}}new Reading({ele:box,img:'img/timg6A2U91M4.jpg',width:600,height:600})
}();

原生Js放大镜实例(附图附讲解可直接复制研究使用，小白福利)相关推荐

[微信小程序]单选框以及多选框实例代码附讲解
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 正文: 效果图 <radio-group class="radio-group" b ...
原生JS利用XMLHttpRequest实现Get和Post请求
之前用jQuery的时候经常使用$.ajax()方法发送请求,由于最近一直在捣鼓原生JS,所以对XMLHttpRequest作了一番研究,下面看一个例子:输入两个数,计算他们的和,这里使用XMLHtt ...
【每日一练】原生js仿淘宝主图放大镜功能，附学习源码
在我们的项目中,经常会遇到各种功能效果的实现,对于每一项功能的实现方式,都有很多种,这些实现方式没有好坏之分,只有适合与否,但是我个人建议,如果项目急就选择自己擅长的方式实现,比较完成工作更加重要嘛. ...
js 自动分配金额_(2.4w字,建议收藏)??原生JS灵魂之问(下), 冲刺??进阶最后一公里(附个人成长经验分享)
笔者最近在对原生JS的知识做系统梳理,因为我觉得JS作为前端工程师的根本技术,学再多遍都不为过.打算来做一个系列,一共分三次发,以一系列的问题为驱动,当然也会有追问和扩展,内容系统且完整,对初中级选手 ...
原生js日历选择器插件开发实例教程
在web开发过程中经常会碰到需要选择日期的功能,一般的操作都是在文本框点击,然后弹出日历选择框,直接选择日期就可以在文本框显示选择的日期.开发好之后给用户使用是很方便,但如果每一个日历选择器都要临时开 ...
原生js的Ajax实例
与jQuery不同,原生js的ajax的实现相比来说复杂一些,因为jquery中的$.ajax()方法已经把js的实现封装起来,使用起来更加方便.但是,原生js的实现过程,对于理解ajax,好像更清晰 ...
原生js实现轮播图实例教程
原生js实现轮播图实例教程本实例效果如下图所示: 根据实例效果,需要的元素有图片.中间圆点按钮.左右箭头按钮等.实际html代码如下所示: <div class="banner_co ...
原生js cookie的使用实例setCookie()、getCookie()方法
01 <html> 02 <head> 03 <title>原生js cookie的使用实例setCookie().getCookie()方法</title& ...
php跳一跳小游戏,原生JS实现的跳一跳小游戏完整实例
本文实例讲述了原生JS实现的跳一跳小游戏.分享给大家供大家参考,具体如下: 以下说的是闲暇编写的一个小游戏--跳一跳,类似于微信的跳一跳,大体实现功能有: 1.先随机生成地图: 2.按住按钮释放后完成 ...

原生Js放大镜实例(附图附讲解可直接复制研究使用，小白福利)

原生Js放大镜实例(附图附讲解可直接复制研究使用，小白福利)相关推荐

最新文章

热门文章