JavaScript实现图片的放大镜效果

这个例子分享了js实现图片放大镜效果的具体代码，供大家参考。具体内容如下

1.结构布局的HTML代码

Div class=' left con ' id=' left ' img src=' http : ~/内容/图像/风景-1 . jpg '/Div class=' slide _ box ' id=' box '/Div/Div class=' right con ' id=' right ' img src=' http : ~/内容/图像/风景-1 . jpg '/Div 2，用于修改结构的css样式代码

img { display:块；}.leftcon { width: 350px高度： 350 px；margin: 100px 20px 0px 312px向左浮动：相对位置：box-shadow : 3px 3px 10px 0 # 111111；/*对图片应用阴影效果*/-WebKit-box-shadow : 3px 3px 10px 0 # 111111；/*兼容性处理*/-moz-box-shadow : 3px 3px 10px 0 # 111111；}.left con img { width : 100%；高度： 100%；}.左撇子。slide _ box { display: none/*隐藏小方块*/position:绝对；top : 0；left : 0；宽度： 175 px；高度： 175 px；背景技术： # 000；opacity: 0.3光标：移动；/*更改鼠标的形状*/}。rightcon { display: none/*隐藏右边的div */width : 350 px；高度： 350 px；边距-top : 100 px；向左浮动：飞越：隐藏；相对位置：}.right con img { width : 200%；高度：200%；绝对位置：left: 0pxtop: 0px}3.js获取事件对象

1)事件是获取事件的对象。对象表示事件的状态，例如事件发生的元素、键盘按键的状态、鼠标的位置和鼠标按钮的状态。envet是windows的一个属性。放大镜实现方法(获取正确的图片定位)2)e . client :返回事件触发时鼠标相对于元素视口的y坐标。E.clientX:返回事件触发时鼠标相对于元素视口的x坐标。这里的元素视口其实指的是浏览器，clientX是鼠标到浏览器左边框的距离，clientY是鼠标到浏览器上边框的距离。offsetTop获取计算出的对象相对于布局或OffsetTop属性指定的父坐标的顶部位置。这里是左div和主体，也就是浏览器窗口之间的纵向距离。offsetLeft获取对象相对于布局或offsetLeft属性指定的父坐标的计算顶部位置。这是左div相对于主体(即浏览器窗口)的垂直和水平距离。offsetHeight是对象的可见高度。这里指的是小滑块的高度偏右是对象的可见宽度。这是指小滑块的宽度

var left one=document . getelementbyid(' left ')；var right one=document . getelementbyid(' right ')；var box=document . getelementbyid(' box ')；var rimg=right one . getelementsbytagname(' img ')[0]；函数getPosition(e){ //这里的参数e代表事件//首先我们要判断事件源，得到事件源，即e var e=e | | window.event//实现兼容//理解：//这个表达式是这样写的：var e=event？事件| | window.event//如果事件存在，则var e=event而如果没有事件，//那么var e=window.event .可以看出它确实与var top=e.clientY-leftone.offsetTop-box.offsetHeight/2;//兼容在缩略图容器中计算鼠标坐标(减去最外面的偏移量)var left=e.clientX-leftone.offsetLeft-box.offsetWidth/2;//为什么这里要除以2？因为如果不除以2，事件源，也就是鼠标，就在这个小滑块的右下角，不美观。//我们希望鼠标位于滑块的中心，这样宽度和高度就减少了一半。//边界判断//得到小滑块的最大纵向移动距离var maxtop=left one . offset the right-box . offset the right；//获取最大横向移动距离var maxleft=left one . offset with-box . offset with；var mintop=0；//获取小滑块的最小纵向移动距离var min left=0；//获取小滑块的最大纵向移动距离var mvtop//定义小滑块var mvleft的纵向移动距离；//定义小滑块的横向移动距离//判断if(top min top){ box . style . top=min top ' px '；mvtop=mintop//了解：//top是鼠标到浏览器的垂直距离——左div顶部到浏览器的垂直距离——小滑块高度的一半。//现在鼠标在小滑块的中心，也就是说top等于小滑块顶部到左div的垂直距离。//如果top0，即小滑块的顶值为0，即鼠标继续向上移动，//小滑块不移动，这样小滑块的移动范围就不能超过左div的宽度和高度范围。//下面也是一样} Elseif(Top Max Top)mvtop=Max Top；//如果topmaxtop表示小滑块与左div的底部重合，那么让小滑块的顶值为maxtop。//即鼠标继续向下移动，小滑块不移动，使小滑块的移动范围不能超过左div } else { box . style . top=top ' px }的宽度和高度范围；mvtop=top//如果不超过边界，则小滑块的垂直移动距离等于top，即小滑块顶部到左div的垂直距离} If(left min left){ box . style . left=min left ' px '；mvleft=min left } else if(left maxleft){ box . style . left=maxleft ' px '；mvleft=max left } else { box . style . left=left ' px '；mvleft=左侧；}//因为右div的图片是左div的两倍大，而左div和右div都是小滑块的两倍宽和两倍高，//但是右div应该放大左边小滑块的周围图片，所以右边大图片的定位坐标是小滑块的两倍大，这样可以进行映射。//右侧图片随着：左滑块的移动移动多少，右侧可以跟着移动两次到rimg.style.top=-mvtop。rimg . style . left=-mvleft * 2 ' px '；}4.鼠标进出事件

左框鼠标移入，小滑块和右侧图片显示，onmouseenter事件类似于onmouseover事件。唯一的区别是onmouseenter事件不支持冒泡。

//鼠标移动效果left one . onmousemove=function(e){ var e=e | | window . event；//确定事件源box . style . display=' block '；getPosition(e)；right one . style . display=' block '；}//鼠标移出效果left one . onmouseleave=function(e){ var e=e | | window . event；//确定事件源box . style . display=' none '；right one . style . display=' none '；}5.翻译

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。