js放大镜效果

合集下载

js放大镜的实现原理

js放大镜的实现原理JavaScript（JS）放大镜是一种常见的网页功能，它可以让用户在网页上放大某个区域的内容，以更好地查看和分析细节。

这个功能的实现原理并不复杂，它主要依赖于一些基本的网页开发技术和 JS 的能力。

先来看一下放大镜的样子和功能。

一个简单的放大镜可以包括两个主要的部分：一个镜头和一个放大区域。

在网页上，展示需要放大的图像，并在镜头与放大区域应用相应的 CSS 样式来调整它们的大小和位置。

当用户通过鼠标滚轮或拖动的方式移动镜头时，放大区域会即时显示当前镜头下的图像，并以设定的倍数进行放大。

这个功能的实现主要有以下几个步骤：步骤一：绑定事件监听器该功能的实施需要跟网页上的用户动作产生响应，最常用的是绑定一个事件监听器来捕捉用户在镜头区域内的鼠标拖动动作。

当用户把鼠标放在镜头区域上并开始拖动时，这个事件监听器就会被触发。

步骤二：计算镜头和放大区域的位置镜头和放大区域的位置是根据用户鼠标拖动的位置计算得出的。

JS 中提供了很多测量元素位置的方法，例如`getElementById`、`getElementsByClassName` 和`querySelector`、`querySelectorAll`。

获取到元素之后还可以通过 `getBoundingClientRect` 来获取其相对于视口的位置。

在这个步骤中，我们可以根据用户鼠标在镜头上的动作计算镜头和放大区域的位置和大小。

步骤三：渲染放大区域一旦计算出了镜头和放大区域的位置，接下来就需要在页面上显示出对应的样式。

这可以通过使用 CSS 样式控制元素的大小、位置和转换来实现。

当用户拖动镜头时，JS 会不断重新计算这些位置和样式，以实现放大镜的动态效果。

步骤四：计算图像放大比例为了保证放大区域显示的图像充满以及不失真，我们需要在计算放大区域样式时，考虑到放大倍率。

这个倍率值可以是一个固定的数字，也可以由用户自行设置。

步骤五：更新放大区域的图像当用户拖动镜头时，放大区域需要实时更新显示对应区域的图像内容。

JavaScript仿京东放大镜特效

JavaScript仿京东放⼤镜特效本⽂实例为⼤家分享了JavaScript仿京东放⼤镜的具体代码，供⼤家参考，具体内容如下功能需求：1、分为三个模块2、⿏标经过⼩图⽚盒⼦，黄⾊的遮挡层和⼤图⽚盒⼦显⽰，离开隐藏两个盒⼦功能3、黄⾊的遮挡层跟随着⿏标移动4、移动黄⾊遮挡层，⼤图⽚跟随着移动⼤图⽚移动距离=（遮挡层移动距离*⼤图⽚最⼤移动距离）/ 遮挡层最⼤移动距离<style>body,div {margin: 0;padding: 0;}.product {position: relative;width: 400px;height: 400px;margin: 50px 0 0 20px;border: 1px solid #000;}.preview_img img {width: 300px;height: 300px;margin: 50px 50px;}.mask {position: absolute;display: none;top: 20px;left: 30px;width: 80px;height: 80px;background-color: yellow;opacity: 0.5;cursor: move;}.big {position: absolute;display: none;left: 410px;top: 0;width: 500px;height: 500px;z-index: 999;overflow: hidden;}.big img {position: absolute;top: 0;left: 0;width: 400px;height: 400px;}</style><script src="detail.js"></script></head><body><div class="product"><div class="preview_img"><img src="images/xs.jpg" alt="" /><div class="mask"></div><div class="big"><img src="images/xs.jpg" alt="" class="bigImg" /></div></div></div></body>JS页⾯//页⾯预加载window.addEventListener("load", function () {var preview_img = document.querySelector(".preview_img");var mask = document.querySelector(".mask");var big = document.querySelector(".big");//1.⿏标经过 preview_img 就显⽰和隐藏 mask 遮挡层和 big ⼤盒⼦preview_img.addEventListener("mouseover", function () {mask.style.display = "block";big.style.display = "block";});preview_img.addEventListener("mouseout", function () {mask.style.display = "none";big.style.display = "none";});//把⿏标坐标给遮挡层是不合适的，因为遮挡层坐标以⽗盒⼦为准preview_img.addEventListener("mousemove", function (e) {//（1）先计算出⿏标在盒⼦内的坐标var x = e.pageX - this.offsetLeft;var y = e.pageY - this.offsetTop;//（2）减去盒⼦⾼度宽度的⼀半//（3）mask 移动的距离var maskX = x - mask.offsetWidth / 2;var maskY = y - mask.offsetHeight / 2;//(4)如果坐标⼩于0 就让他停在 0 的位置(即超出盒⼦范围就停⽌)var egdeX = preview_img.offsetWidth - mask.offsetWidth;var egdeY = preview_img.offsetHeight - mask.offsetHeight;if (maskX <= 0) {maskX = 0;} else if (maskX >= egdeX) {maskX = egdeX;}if (maskY <= 0) {maskY = 0;} else if (maskY >= egdeY) {maskY = egdeY;}mask.style.left = maskX + "px";mask.style.top = maskY + "px";//⼤图⽚的移动距离 = 遮挡层移动距离*⼤图⽚最⼤移动距离 / 遮挡层的最⼤移动距离var bigImg = document.querySelector(".bigImg");//⼤图⽚最⼤移动距离var bigMax = bigImg.offsetWidth - big.offsetWidth;//⼤图⽚的移动距离 x yvar bigX = (maskX * bigMax) / egdeX;var bigY = (maskY * bigMax) / egdeY;bigImg.style.left = -bigX + "px";bigImg.style.top = -bigY + "px";});});以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

js实现简单的放大镜效果

js实现简单的放⼤镜效果本⽂实例为⼤家分享了js实现简单放⼤镜效果的具体代码，供⼤家参考，具体内容如下效果效果，⿏标在原图⽚移动，黄⾊⼩盒⼦跟随⿏标移动，黄⾊⼩盒⼦盖住的部分，在显⽰区显⽰效果图如下：核⼼思路1.⿏标放置在图⽚上，显⽰区出现，⿏标离开⼩盒⼦，显⽰区消失2.⿏标在图⽚上移动时，⼩盒⼦跟随⿏标移动，且⿏标在黄⾊⼩盒⼦中间位置3.⼩盒⼦给判断，让其不能超出图⽚区域4.⼩盒在图⽚上移动多少，显⽰区域要移动同⽐例的距离5.当显⽰区⼤⼩发⽣改变，或显⽰区内容增⼤变⼩，原来图⽚上的黄⾊⼩盒⼦随之改变操作1.先把需要⽤到元素获取过来// 获取页⾯上我们需要的元素var box1=document.querySelector('.box1')var yellow=document.querySelector('.yellow')var box2=document.querySelector('#rightbox')var screen=rightbox.children[0]2.⿏标放置到图⽚，显⽰区域出现，离开则消失// ⿏标进⼊和离开图⽚box1.onmouseenter=function(){box2.style.display='block'}box1.onmouseleave=function(){box2.style.display='none'}利⽤⿏标的进⼊和离开事件就可以做到，分别设置出现和不出现就好了3.⿏标移动，⼩盒⼦跟随移动，且⿏标在黄⾊⼩盒⼦中间box1.onmousemove=function(e){// 算出⼩盒⼦在图⽚时，⾃⾝的中⼼点var x=e.pageX-box1.offsetLeft-yellow.offsetWidth/2var y=e.pageY-box1.offsetTop-yellow.offsetHeight/2// 给黄⾊⼩盒⼦赋值，让黄⾊⼩盒⼦跟随⿏标移动yellow.style.left=x+'px'yellow.style.top=y+'px'}1.使⽤事件，⿏标在图⽚上每⼀栋⼀下就触发，做到随时刷新2.计算出⼩盒⼦在图⽚时，⾃⾝的中⼼点公式：（⽤⿏标在页⾯的位置，减去，图⽚的偏移距离，减去⾃⾝的⼀半）这⾥减去⼀半是保证⿏标在黄⾊盒⼦位置始终保持居中4.⼩盒⼦给判断条件，让黄⾊⼩盒⼦不能超出图⽚区域// ⿏标在图⽚上移动触发事件box1.onmousemove=function(e){// 算出⼩盒⼦在图⽚的中⼼点var x=e.pageX-box1.offsetLeft-yellow.offsetWidth/2var y=e.pageY-box1.offsetTop-yellow.offsetHeight/2// --------------------------------------------------------------------------------// 新增部分// 判断⼩盒⼦是否超出img范围，使黄⾊⼩盒⼦不能超出img范围if(x<0){// 此时的0不是图⽚的左侧，⽽是⼩盒⼦在最左边时，⼩盒⼦的中⼼点x=0}else if(x>box1.offsetWidth-yellow.offsetWidth){// ⼩盒⼦的X轴中⼼点⼤于图⽚盒⼦的宽度减去⾃⾝宽度时，说明超出，则始终等于图⽚盒⼦的宽度减去⾃⾝宽度x=box1.offsetWidth-yellow.offsetWidth}// 同上if(y<0){y=0}else if(y>box1.offsetHeight-yellow.offsetHeight){y=box1.offsetHeight-yellow.offsetHeight}// ---------------------------------------------------------------------------------// 给黄⾊⼩盒⼦赋值，让黄⾊⼩盒⼦跟随⿏标移动yellow.style.left=x+'px'yellow.style.top=y+'px'1.判断⼩盒⼦的左边是不是超出图⽚部分，给的if（x<0）此时的0，还是以中⼼点来计算的2.判断右边 x>box1.offsetWidth-yellow.offsetWidth（是否⼤于图⽚区域宽度减去⼩盒⼦宽度）为什么是⼩盒⼦宽度，判定的是⼩盒⼦中⼼点，且0的位置是⼩盒⼦的中⼼点，已经减去过⼀半的⼩盒⼦，所以右边减去的就是⼩盒的⼀半*23.上下也⼀样，这个时候黄⾊⼩盒⼦就不会超出图⽚区域了5.⼩盒在图⽚上移动多少，显⽰区域要移动同⽐例的距离// 通过计算，得出⼩盒⼦在图⽚移动多少，显⽰区就移动多少的⽐例srceen.style.left=-x/box1.offsetWidth*srceen.offsetWidth+'px'srceen.style.top=-y/box1.offsetHeight*srceen.offsetHeight+'px'显⽰区域移动的多少，取决于⼩盒⼦移动多少⼩盒⼦移动的值除以图⽚的宽度乘以显⽰区域的宽度显⽰区域的移动值就可以和⼩盒⼦在图⽚的移动⽐例相同6.显⽰区⼤⼩改变或显⽰区内容变化，图⽚上黄⾊盒⼦随之改变// 计算黄⾊⼩盒⼦在图⽚上的⼤⼩yellow.style.width=box1.offsetWidth/(srceen.offsetWidth/box2.offsetWidth)+'px'yellow.style.height=box1.offsetHeight/(srceen.offsetHeight/box2.offsetHeight)+'px'}计算⽅式为：黄⾊盒⼦的宽=图⽚的宽/（显⽰区域的内容宽度/显⽰区域的框的宽度）⾼度也是⼀样的因为，是⿏标移动触发，所以实时刷新调整.img2{width: 3000px;height: 3000px;position: absolute;}#rightbox{position: absolute;top: 0;left: 650px;width: 900px;height: 900px;overflow: hidden;display: none;}当需要调整框的⼤⼩，或放⼤⽐例时，改变这两个样式的宽⾼即可内容，css，js 整体代码<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{padding: 0;margin: 0;}.img1{width: 300px;height: 300px;}.img2{width: 3000px;height: 3000px;position: absolute;}#rightbox{position: absolute;top: 0;left: 650px;width: 900px;height: 900px;overflow: hidden;display: none;}.yellow{background-color: yellow;opacity: 0.5;width: 100px;height: 100px;position: absolute;top: 0;left: 0;}.box1{width: 300px;height: 300px;position: relative;margin-left: 300PX;}</style></head><body><div class="box1"><img src="./images/1.jpg" alt="" class="img1"><div class="yellow"></div></div><div id="rightbox"><img src="./images/1.jpg" alt="" class="img2"></div><script>// 获取页⾯上我们需要的元素var box1=document.querySelector('.box1')var yellow=document.querySelector('.yellow')var box2=document.querySelector('#rightbox')var srceen=rightbox.children[0]// ⿏标进⼊和离开图⽚box1.onmouseenter=function(){box2.style.display='block'}box1.onmouseleave=function(){box2.style.display='none'}// ⿏标在图⽚上移动触发事件box1.onmousemove=function(e){// 算出⼩盒⼦在图⽚的中⼼点var x=e.pageX-box1.offsetLeft-yellow.offsetWidth/2var y=e.pageY-box1.offsetTop-yellow.offsetHeight/2// 判断⼩盒⼦是否超出img范围，使黄⾊⼩盒⼦不能超出img范围if(x<0){// 此时的0不是图⽚的左侧，⽽是⼩盒⼦在最左边时，⼩盒⼦的中⼼点x=0}else if(x>box1.offsetWidth-yellow.offsetWidth){// ⼩盒⼦的X轴中⼼点⼤于图⽚盒⼦的宽度减去⾃⾝宽度时，说明超出，则始终等于图⽚盒⼦的宽度减去⾃⾝宽度 x=box1.offsetWidth-yellow.offsetWidth}// 同上if(y<0){y=0}else if(y>box1.offsetHeight-yellow.offsetHeight){y=box1.offsetHeight-yellow.offsetHeight}// 给黄⾊⼩盒⼦赋值，让黄⾊⼩盒⼦跟随⿏标移动yellow.style.left=x+'px'yellow.style.top=y+'px'// 通过计算，得出⼩盒⼦在图⽚移动多少，显⽰区就移动多少的⽐例srceen.style.left=-x/box1.offsetWidth*srceen.offsetWidth+'px'srceen.style.top=-y/box1.offsetHeight*srceen.offsetHeight+'px'// 计算黄⾊⼩盒⼦在图⽚上的⼤⼩yellow.style.width=box1.offsetWidth/(srceen.offsetWidth/box2.offsetWidth)+'px'yellow.style.height=box1.offsetHeight/(srceen.offsetHeight/box2.offsetHeight)+'px'}</script></body></html>以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

JavaScript图形实例：图形放大镜效果

JavaScript图形实例：图形放大镜效果1. 基本四瓣花型图案根据四瓣花卉线的参数方程：t= r*(1+sin(12*θ)/5)*(0.5+sin(4*θ)/2);x=t*cos(θ));y=t*sin(θ));编写如下的HTML文件。

<!DOCTYPE html><head><title>基本的四瓣花型图案</title><script type="text/javascript">function draw(id){var canvas=document.getElementById(id);if (canvas==null)return false;var context=canvas.getContext('2d');context.fillStyle="#EEEEFF";context.fillRect(0,0,320,320);context.strokeStyle="blue";context.lineWidth=1;var dig=Math.PI/64;context.beginPath();for (var i=0;i<=128;i++){d=120*(1+Math.sin(12*i*dig)/5);t=d*(0.5+Math.sin(4*i*dig)/2);x=(160+t*Math.cos(i*dig));y=(160+t*Math.sin(i*dig));if (i==0)context.moveTo(x,y);elsecontext.lineTo(x,y);}context.stroke();}</script></head><body onload="draw('myCanvas');"><canvas id="myCanvas" width="320" height="320"></canvas></body></html>在浏览器中打开包含这段HTML代码的html文件，可以看到在画布中绘制出如图1所示的四瓣花卉线图案。

js实现购物网站商品放大镜效果

js实现购物⽹站商品放⼤镜效果本⽂实例为⼤家分享了js实现购物⽹站商品放⼤镜效果的具体代码，供⼤家参考，具体内容如下⾸先说⼀下原理，以天猫某商品放⼤镜效果为例：所谓的放⼤镜效果，其实也是欺骗我们眼球的⼀种效果，这⾥我们可以看到，图⽚显⽰去下⾯那⼀排⼩图与遮盖层的图⽚和放⼤层的图⽚其实是⼀样的，只是分辨率不同，所以实现放⼤镜效果，就需要这么⼏组分辨率⼤⼩不同，但是图⽚内容相同的图⽚：显然，⼩图中放的就是我这⾥图⽚名中带有small的⼩图了，遮盖层就是正常⼤⼩的图，放⼤层就是带有big的放⼤的图了，然后再加⼊适当的位移和显⽰效果，就达成我们见到的放⼤镜效果了，下⾯就通过代码来实现吧：⾸先写出HTML结构：<div id="box"><div class="show"><img src="./images/1.jpg" alt="#"><div class="drag"></div></div><div class="magnify"></div><ul><li class="active"><img src="./images/1.small.jpg" alt="#"></li><li><img src="./images/2.small.jpg" alt="#"></li></ul></div><script type="text/javascript" src="./javascript/mgfyGlass.js"></script><script>const oBox = document.querySelector('#box');const imgArr = [{small: '1.small.jpg', normal: '1.jpg', big: '1.big.jpg'},{small: '2.small.jpg', normal: '2.jpg', big: '2.big.jpg'}];</script>然后加⼊css样式：body,div,ul,li{margin: 0; padding: 0;list-style: none;font-size: 0;}img{display: block;}#box{width: 650px;position: relative;margin: 0 auto 0 240px;}#box .show{width: 600px;border: solid 2px hotpink;position: relative;}#box .show img{width: 100%;}#box .show .drag{position: absolute;width: 200px;height: 200px;background-color: #e0a8d7;opacity: .4;left: 0;top: 0;display: none;}#box .magnify{width: 800px;height: 800px;border: solid 2px #7d777b;position: absolute;left: 100%;top: 0;background: url("../images/1.big.jpg") no-repeat 0 0 / 2400px;display: none;}#box ul{width: 100%;height: 150px;margin-top: 20px;}#box ul::after{content: '';display: block;clear: both;}#box ul li{height: 100%;float: left;margin: 0 8px;border: solid 2px #fff;}#box ul li.active{border-color: hotpink;}#box ul li img{height: 100%;}这⾥设置css样式的时候需要注意：放⼤层是通过遮盖层等⽐放⼤的，所以放⼤层的宽⾼与遮盖层宽⾼的⽐，和，放⼤层背景图⼤⼩与正常显⽰图⽚（也就是class=“show” 盒⼦中的图⽚）⼤⼩的⽐是相同的。

javascript实现简单放大镜效果

javascript实现简单放⼤镜效果⼀个⼤盒⼦中有⼀张图⽚，⿏标放上去会出现⼀个半透明的遮罩层，⿏标移动，遮罩层跟着移动，盒⼦旁边还有⼀个放⼤的图⽚，跟着遮罩层移动的位置⽽改变放⼤图的位置，⿏标离开⼤盒⼦，遮罩层和放⼤图⽚消失实现思路1、html、css将盒⼦，遮罩层、放⼤图⽚页⾯编辑好，设置遮罩层和放⼤图⽚默认隐藏2、获取元素对象，将⼤盒⼦绑定⿏标事件⿏标经过- - -mouseover，⿏标经过时设置遮罩层和放⼤图显⽰：display设置成'block'⿏标离开- - -mouseout，⿏标经过时设置遮罩层和放⼤图显⽰：display设置成'none'3、计算出⿏标在⼤盒⼦中的位置4、让⿏标在遮罩层的中间位置：让遮罩层相对⿏标位置向上向左移动⼀半距离就⾏遮罩层的位置- - -给它绝对定位，赋值相对盒⼦中的向上向左偏移量5、限制遮罩层在⼤盒⼦⾥移动- - -判断偏移量的值，<=0 的时候，偏移量为06、放⼤图随着遮罩层的移动⽽改变位置遮罩层移动值 / 遮罩层移动最⼤距离 = 放⼤图移动距离 / 放⼤图移动最⼤距离根据这个关系式，得到放⼤图的移动距离将移动距离赋值给放⼤图的偏移量top、left注意：放⼤图的偏移量给成负值，和遮罩层移动⽅向相反代码⽰例<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>⼿机详情页</title><style>* {margin: 0;padding: 0;}.detail-content {width: 1200px;margin: 0 auto;}img {border: 0;vertical-align: middle;}.preview_img {position: relative;width: 400px;height: 400px;margin-top: 30px;border: 1px solid #ccc;}.preview_img img {width: 100%;height: 100%;}.mask {display: none;position: absolute;top: 0;left: 0;width: 300px;height: 300px;background-color: pink;opacity: .5;cursor: move;}.big {display: none;position: absolute;top: 0;left: 410px;width: 500px;height: 500px;border: 1px solid #ccc;background-color: pink;z-index: 999;overflow: hidden;}.big img {position: absolute;top: 0;left: 0;width: 800px;height: 800px;}</style></head><body><div class="detail-content"><div class="preview_img"><img src="upload/s3.png" alt=""><div class="mask"></div><div class="big"><img src="upload/big.jpg" alt="" class="bigImg"></div></div></div><script>var previewImg = document.querySelector('.preview_img');var mask = document.querySelector('.mask');var big = document.querySelector('.big');var bigImg = document.querySelector('.bigImg');// ⿏标经过盒⼦事件previewImg.addEventListener('mouseover', function() {// 设置遮挡层和放⼤图显⽰mask.style.display = 'block';big.style.display = 'block';})// ⿏标离开盒⼦事件previewImg.addEventListener('mouseout', function() {// 设置遮挡层和放⼤图隐藏mask.style.display = 'none';big.style.display = 'none';})// ⿏标在盒⼦内移动事件previewImg.addEventListener('mousemove', function(e) {// 获取⿏标在盒⼦中的位置var x = e.pageX - this.offsetLeft;var y = e.pageY - this.offsetTop;// 计算出遮挡层的移动值，让⿏标在遮挡层中间位置var maskX = x - mask.offsetWidth / 2;var maskY = y - mask.offsetHeight / 2;// 盒⼦为正⽅形，所以只算最⼤⽔平⽅向 X轴移动值就⾏，Y轴最⼤移动值和 X轴⼀致 var maskMax = previewImg.offsetWidth - mask.offsetWidth;// 限制遮挡层在盒⼦内移动if (maskX <= 0) {maskX = 0;} else if (maskX >= maskMax) {maskX = maskMax;}if (maskY <= 0) {maskY = 0;} else if (maskY >= maskMax) {maskY = maskMax;}mask.style.left = maskX + 'px';mask.style.top = maskY + 'px';// 计算出放⼤图的最⼤移动值，⼤图⽔平移动值 = 遮挡层移动值 * ⼤图最⼤移动距离 / 遮挡层最⼤移动距离 var bigMax = bigImg.offsetWidth - big.offsetWidth;var bigX = maskX * bigMax / maskMax;var bigY = maskY * bigMax / maskMax;bigImg.style.left = -bigX + 'px';bigImg.style.top = -bigY + 'px';})</script></body></html>页⾯效果：以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

JavaScript实现图片放大镜效果

JavaScript实现图⽚放⼤镜效果本⽂实例为⼤家分享了js实现图⽚放⼤镜效果的具体代码，供⼤家参考，具体内容如下1、结构布局HTML代码<div class="leftcon" id="left"><img src="~/Content/images/风景-1.jpg" /><div class="slide_box" id="box"></div></div><div class="rightcon" id="right"><img src="~/Content/images/风景-1.jpg" /></div>2、修饰结构css样式代码img {display: block;}.leftcon {width: 350px;height: 350px;margin: 100px 20px 0px 312px;float: left;position: relative;box-shadow: 3px 3px 10px 0 #111111; /*给图⽚施加阴影效果 */-webkit-box-shadow: 3px 3px 10px 0 #111111; /*兼容性处理*/-moz-box-shadow: 3px 3px 10px 0 #111111;}.leftcon img {width: 100%;height: 100%;}.leftcon .slide_box {display: none; /*将⼩⽅块盒⼦隐藏*/position: absolute;top: 0;left: 0;width: 175px;height: 175px;background: #000;opacity: 0.3;cursor: move; /*改变⿏标的形状*/}.rightcon {display: none; /*将右边div隐藏*/width: 350px;height: 350px;margin-top: 100px;float: left;overflow: hidden;position: relative;}.rightcon img {width: 200%;height: 200%;position: absolute;left: 0px;top: 0px;}3、js获取事件对象1）、Event是获取事件对象，对象代表事件的状态，⽐如事件在其中发⽣的元素、键盘按键的状态、⿏标的位置、⿏标按钮的状态,envet是windows的⼀个属性。

js实现图片放大镜效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>无标题文档</title><script type="text/javascript" src="jquery/jquery.js"></script><script type="text/javascript" >$().ready(function(){$("#xiaotu").mousemove(function(e){var smallW=$("#xiaotu>#tu>img").attr("width");//小图片的宽度var bigimage=new Image();bigimage.src=$("#xiaotu>#tu>img").attr("src");var bigimageW=bigimage.width;//大图片实际宽度var bigimageT=bigimage.height;//大图片实际高度var bili=bigimageW/smallW;//比例var smallH=Math.ceil(bigimage.height/bili);//小图片的高度var whiteW=Math.ceil(400/bili);//小白的宽度，等于高度//alert(whiteW);var mouseL=e.pageX;//鼠标的x坐标var mouseT=e.pageY;//鼠标的ny坐标var smallimageT=$("#tutu").offset().top;//小图片距离顶端的距离var smallimageL=$("#tutu").offset().left;//小图片距离左端的距离var aa=whiteW/2;var whiteL=Math.ceil(mouseL-smallimageL-whiteW/2);//小白图片距离小图片左边的位置var whiteT=Math.ceil(mouseT-smallimageT-whiteW/2);//小白图片距离小图片顶边的位置//alert(bigimageT);//alert(whiteL);if(whiteT<0){whiteT=0;}if(whiteT>smallH-whiteW){whiteT=smallH-whiteW;}if(whiteL<0){whiteL=0;}if(whiteL>500-whiteW){whiteL=500-whiteW;}var bigimageT=Math.ceil(whiteT*bili);var bigimageL=Math.ceil(whiteL*bili);//alert(bigimageT);$("#datu").show();$("#baikuang").show();$("#baikuang").css("left",whiteL);$("#baikuang").css("top",whiteT);$("#baikuang").css("width",whiteW); $("#baikuang").css("height",whiteW); $("#datu>img").css("margin-left",-bigimageL) $("#datu>img").css("margin-top",-bigimageT)})})$().ready(function(){$("#xiaotu").bind("mouseleave",function(){ $("#datu").hide();$("#baikuang").hide();})})</script><style type="text/css">body{margin:0; padding:0;}#datu{width:400px;height:400px;border:1px #009900 solid;overflow:hidden;position:absolute;display:none;left:500px;top:0px;}#baikuang{border:0;position:absolute;opacity:0.6;background:#0650D5;}#xiaotu{ padding:0px;margin:0 auto;position:relative;margin-left:100px;margin-top:100px;}#tu{margin:0px;padding:0px;}</style></head><body><div id="div1"></div><div id="xiaotu"><div id="baikuang"></div><div id="tu"><img id="tutu" src="aa.jpg" width="500"/><div> </div><div id="datu"><img src="aa.jpg" id="da"></div></div><input type="button" value="点击"></body></html>。

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

js放大镜效果鼠标放到一张图片上立刻显示出来这个图片的放大图是不是很炫！下面的代码就可以实现。

<!— THE SITE IS DESIGNED BY MYHYLI —><html><head><title>Untitled Document</title><meta http-equiv=”Content-Type” content=”text/html;charset=gb2312″><script language=”JavaScript”><!–var zoomvalue=3;var magnifierw0=100;var magnifierh0=50;function init() {document.body.innerHTML+=’<div id=”magnifier”style=”background-image:url(images/spacer.gif);position:absolute; width:100px; height:50px; z-index:100; left: 0px; top: 0px;border:1px solid#FF0000;visibility:hidden;text-align:right;font-size:10px;font-family :Verdana;color:#FF0000;cursor:default;overflow:hidden”onclick=”showhide()” onselectstart=”return false;”>300%</div><div id=”zoom” style=”background-color:red;position:absolute;width:300px; height:150px; z-index:100; left: 0px; top: 0px;border:1px solid #CCCCCC;visibility:hidden”><iframe name=”zoomiframe”src=”about:blank” frameborder=”0″ scrolling=”no” width=”100%” height=”100%”></iframe></div>’;}function setposition() {zoom.style.left=document.body.clientWidth+document.body.scrollLeft-5-zoom.offsetWidth;zoom.style.top=document.body.scrollTop+5;}function showhide() {if (magnifier.style.visibility==’hidden’) {magnifier.style.left=document.body.scrollLeft+event.clientX-magnifier .offsetWidth/2;magnifier.style.top=document.body.scrollTop+event.clientY-magnifier.offsetHeight/2;magnifier.style.visibility=’visible’;zoom.style.visibility=’visible’;zoomiframe.location.href=self.location;setposition();magnifier.setCapture();}else {if (event.shiftKey) {if (zoomvalue<1) {zoomvalue+=0.1;}else {zoomvalue=zoomvalue+1>8?8:zoomvalue+1;}magnifier.style.width=3*magnifierw0/zoomvalue;magnifier.style.height=3*magnifierh0/zoomvalue;magnifier.innerText=parseInt(zoomvalue*100)+’%';}else if (event.ctrlKey) {if (zoomvalue-1>0) zoomvalue-=1;else {if (parseInt(zoomvalue*10)/10>0.5) zoomvalue-=0.1;} magnifier.style.width=3*magnifierw0/zoomvalue;magnifier.style.height=3*magnifierh0/zoomvalue;magnifier.innerText=parseInt(zoomvalue*100)+’%';}else {magnifier.style.visibility=’hidden’;zoom.style.visibility=’hidden’;zoom.style.left=0;magnifier.releaseCapture();}}follow();}function follow() {if (magnifier.style.visibility==’visible’) {magnifier.style.left=document.body.scrollLeft+event.clientX-magnifier .offsetWidth/2;magnifier.style.top=document.body.scrollTop+event.clientY-magnifier.o ffsetHeight/2;zoomiframe.scrollTo(magnifier.offsetLeft,magnifier.offsetTop); zoomiframe.document.body.style.zoom=zoomvalue;zoomiframe.document.body.style.border=”;}}document.onmousemove=follow;document.onselectstart=new Function(‘return false;’);document.ondblclick=showhide;window.onresize=setposition;window.onload=init;// –></script><link rel=”stylesheet” href=”images/test.css” type=”text/css”> </head><body bgcolor=”#FFFFFF” text=”#000000″ leftmargin=”0″ topmargin=”0″><table width=500 border=0 cellspacing=0 cellpadding=0><tr><td><p>双击页面出预览窗口及表示预览区域大小的方框，单击关闭</p><p>在方框内，同时按下shift和鼠标左键，将增加放大比例；</p><p>在方框内，同时按下ctrl和鼠标左键，将增加减小比例；</p><p>您也能够试着将head区里的script单独存成js文档，放到您的页面里看看</p><p>但是使用时有一些限制，例如页面表格不能用100%，必须是象素值，而且不能使用居中或居右对齐方式</p><p>双击页面出预览窗口及表示预览区域大小的方框，单击关闭</p><p>在方框内，同时按下shift和鼠标左键，将增加放大比例；</p><p>在方框内，同时按下ctrl和鼠标左键，将增加减小比例；</p><p>您也能够试着将head区里的script单独存成js文档，放到您的页面里看看</p><p>但是使用时有一些限制，例如页面表格不能用100%，必须是象素值，而且不能使用居中或居右对齐方式</p><p>双击页面出预览窗口及表示预览区域大小的方框，单击关闭</p><p>在方框内，同时按下shift和鼠标左键，将增加放大比例；</p><p>在方框内，同时按下ctrl和鼠标左键，将增加减小比例；</p><p>您也能够试着将head区里的script单独存成js文档，放到您的页面里看看</p><p>但是使用时有一些限制，例如页面表格不能用100%，必须是象素值，而且不能使用居中或居右对齐方式</p><p>双击页面出预览窗口及表示预览区域大小的方框，单击关闭</p><p>在方框内，同时按下shift和鼠标左键，将增加放大比例；</p><p>在方框内，同时按下ctrl和鼠标左键，将增加减小比例；</p><p>您也能够试着将head区里的script单独存成js文档，放到您的页面里看看</p><p>但是使用时有一些限制，例如页面表格不能用100%，必须是象素值，而且不能使用居中或居右对齐方式</p></td></tr></table> </body> </html>。