实现图像放大效果的原生js代码

今天给大家分享一张我用js写的图片的放大效果。我做过两种放大效果。事实上，他们的原则是相似的。两者都是用两张图片为两张图片设置对应的大小，最后在不同的位置显示，最终实现放大效果。

第一个是我在淘宝购物页面上模仿放大镜效果。当鼠标在产品图片上移动时，图片上会出现一个矩形区域，这个区域就是你想要放大的区域，然后在产品图片的右侧会出现一个放大的产品图片。这样你只需要计算放大倍率，然后通过修改放大区域的scrollLeft和scrollTop值来实现相应的放大效果。

！doctype html heartheta charset=' utf-8 ' title图片放大器/title style media=' screen ' * { margin : 0；padd : 0；}/*可视区域的父标签*/。包装{宽度： 400pxheight:autoborder: 1px纯黑；display:内联块；绝对位置：left : 0；top : 0；}.wrap img { width : 100%；height: auto}/*锁定放大的矩形区域*/。box {border : 1px纯黑；宽度： 100 px；高度： 100像素；background: rgba(0，0，0，0.5)；opacity: 0.8绝对位置：cursor:指针；display:无；}/*显示放大图片的父级*/。main { width : 700px高度： 700 px；左边距left: 420px飞越：隐藏；display:none绝对位置：top : 0；}.mainimg { width:2800pxheight:auto}/style/head dydiv class=' wrap ' img src=' http : dog . jpg ' alt=' '/div class=' box '/div/div div class=' main ' img src=' http : dog . jpg ' alt=' '//Divscript type=' text/JavaScript '/Get四个对象varwrap=document.queryselector('。换行')；var box=document.querySelector('。方框’)；var main=document.querySelector('。main’)；var mainImg=document . queryselector('。主img’)；//添加移动事件wrap.onmousemove=function(){//将鼠标移动到可见图片后，锁定放大区域并放大图片框. box.style.display=' blockmain . style . display=' block '；var event=window.event | | event//获取偏移量vardisx=事件。客户端邮箱。从可视区域边缘偏移1/2；var disy=event . clienty-box . offset heart/2；//矩形区域的最大可移动范围var distance maxx=wrap . offset with-box . offset with；var distance xy=wrap . offset theight-box . offset theight；//如果(disx=0) {disx=0，判断锁定放大的矩形区域不能出框；} if(disy=0){ disy=0；} if(disx=distance Maxx){ disx=distance Maxx；} if(disy=distance Maxy){ disy=distance Maxy；} box . style . left=disx ' px '；box . style . top=disy ' px '；//获取放大倍率varscalex=box.offsetleft/distancemaxx; var scaley=box . offsettop/distance xy；main . scrolleft=(mainimg . client width-main . client width)* scalex；main . scroll top=(mainimg . client height-main . client height)* scaley；}//添加移出事件wrap . onmouseout=function(){ box . style . display=' none '；main . style . display=' none '；}/脚本/正文/html效果预览：

第二种是直接在原图上放大，就像放大镜在上面一样，是第一种的延伸。之前的方法没什么不同，只是最后不需要在上面放可视区域，放大后的图片直接显示在你原来设置放大的区域。修改放大区域的左、顶值时，会自动同时修改图片对应的左、顶值，实现同步放大

！DOCTYPE html html hearteta charset=' UTF-8 '标题放大镜/titlestyle type='text/css ' .主{宽度： 500像素高度： 570像素；border: 2px纯黑；相对位置：/*飞越：隐藏；*/} # img 1 {宽度： 100%；高度： 100%;}.盒子{宽度： 200像素高度： 200像素；边界半径： 200像素；/*border: 1px纯黑；*/display:无；绝对位置：飞越：隐藏；cursor:move}//放大图片给绝对定位让移动时它也能跟着移动实现和我们锁定的区域同步# img2 { width: 1200px高度： 1400像素；绝对位置：/*左： 0；top : 0；*//*显示：无；*/}/style/head dydiv class=' main ' img id=' img 1 ' src=' http : dog。jpg '/div class=' box ' img id=' img 2 ' src=' http : dog。jpg '/div/div/body/html脚本类型=' text/JavaScript ' var main=document。queryselector(' .main’)；var box=document.querySelector(' .方框');var boximg=文档。query selector(' # img 2 ')；//添加鼠标移动事件主要的。addeventlistener('鼠标移动'，移动，false)；函数move(){//显示放大的圆形区域盒子。风格。display=' blockvar event=window.event | | event//获取鼠标距离可视区域边缘的偏移量var disx=事件。客户端邮箱。offset withts/2；var disy=事件。客户信箱。偏移心/2；var dismax=main。带-box的偏移量。用.抵消；定义变量沮丧=main。偏移灯箱。抵消光线；//矩形区域的最大可移动范围if(disx=0){ disx=0；} if(disx=dismax){ disx=dismax-2；} if(disy=0){ disy=0；} if(disy=沮丧){ disy=沮丧-2;}//当你移动的时候修改圆形区域的左边的以及顶端值。盒子。风格。left=disx ' px盒子。风格。top=disy ' px//var scalx=main。偏移/框。offset witth//var scale=main。在右边/盒子外面。偏右；//同理当你移动时放大的图片它的图片也要修改左边的和顶端值boximg。风格。左=-事件。客户端x * 2 ' pxboximg。风格。top=-事件。clienty * 2 ' px//框。scrolleft=(box img。盒子外面。偏移)；//框。滚动顶部=(框img。在灯箱外面。右偏)；}//添加鼠标移出事件主要的。addeventlistener('鼠标移出'，移出，false)；function out(){ box。风格。显示='无'；}/脚本效果预览：

结语：大家也看到了，其实两种放大方式其实没有什么区别，首先你要获取要放大的区域也就是刚才说的锁定放大区域的矩形和圆形。然后把要放大的图片给定一个区域显示。希望这两段代码对大家有所帮助，谢谢！