js模拟京东放大镜效果

js放大镜效果

使用js实现放大镜效果的原理:
这次将其中的一种方法,放大镜其实并不是鼠标放到一张图片的一个地方这张图就会自动放大,这个只是一种视觉效果,其原理时准备两张等比的图一张大图(放大后的图,鼠标放到小图上大图才会出现),一张小图默认鼠标放上去的图,鼠标在小图上移动,大图的对应位置也会移动,因此就出现了放大的效果。
js模拟京东放大镜效果_第1张图片js模拟京东放大镜效果_第2张图片
如图鼠标放入会出现一个黄色的透明盒子盒子区域会在右边显示出来放大效果。

1.具体实现黄色盒子和右边的大盒子是默认隐藏的,鼠标移入小盒子display:block;出现这两个盒子。

2.动画实现的话用到了部分数学的知识,需要根据小盒子中的黄色盒子的位置等比的计算出大盒子中应该显示的位置。

3.计算鼠标的位置也用到了部分数学的知识和关于获取鼠标坐标的方法

具体代码如下:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>放大镜</title>
        <style type="text/css">
			*{
				padding: 0;
				margin: 0;
			}
			.box{
				width: 350px;
				height: 350px;
				margin:  100px;
				border: 1px solid #aaa;
				position: relative;
			}
			.box .thumb{
				width: 450px;
				height: 450px;
				border: 1px solid #aaa;
				overflow: hidden;
				position: absolute;
				left: 355px;
				top: 0;
				display: none;
			}
			.box .normal .zoom{
				width: 200px;
				height: 200px;
				background-color:#fdfa04;
				opacity: 0.5;
				position: absolute;
				top: 0;
				left: 0;
				cursor: move;
				display: none;
			}
			.thumb img{
				position: absolute;
				top: 0;
				left: 0;
			}
        </style>
        <script type="text/javascript">
        	function $(id){
        		return document.getElementById(id);
        	}
        	window.onload = function(){
        		var box = $('zoomDiv');
        		var normal = box.children[0];
        		var zoom = normal.children[1];
        		var thumb = box.children[1];
        		normal.onmouseover = function(){
        			zoom.style.display = 'block';
        			thumb.style.display = 'block';

        		}
        		box.onmouseout = function(){
        			zoom.style.display = 'none';
        			thumb.style.display = 'none';
        		}
        		var x = 0;
        		var y = 0;
        		normal.onmousemove = function(event){
        			var evt = event || windw.event;
        			//把鼠标在盒子中间显示
        			x = evt.clientX - box.offsetLeft - zoom.offsetWidth/2;
        			y = evt.clientY - box.offsetTop - zoom.offsetHeight/2;
        			console.log(box.offsetLeft);
        			console.log(box.offsetTop);
        			//为了黄色盒子不会超出小图片
        			if(x < 0){
        				x = 0;
        			}else{
        				if(x>normal.offsetWidth - zoom.offsetWidth){
        					x = normal.offsetWidth - zoom.offsetWidth;
        				}
        			}
        			if(y < 0){
        				y = 0;
        			}else{
        				if(y>normal.offsetHeight - zoom.offsetHeight){
        					y = normal.offsetHeight - zoom.offsetHeight;
        				}
        			}
        			zoom.style.left = x + 'px';
        			zoom.style.top = y + 'px';
        			//应用到了数学思想,自己可以画图理解一下为什么
        			var detailX =  - x*800/this.offsetWidth;
        			var detailY =  - y*800/this.offsetHeight;
        			var detailImg = thumb.children[0];
        			detailImg.style.left = detailX + 'px';
        			detailImg.style.top = detailY + 'px';
        		}
        	}
        </script>
    </head>
    <body>
    	<div class="box" id="zoomDiv">
    		<div class="normal">
    			<img src="imgs/show.jpg" alt="">
    			<div class="zoom"></div>
    		</div>
    		<div class="thumb">
    			<img src="imgs/detail.jpg">
    		</div>
    	</div>
    </body>
</html>

图片连接为js模拟京东放大镜效果_第3张图片
js模拟京东放大镜效果_第4张图片
需要使用的自取图片大小和上面代码中的一致(原素材)。
点击进入获取鼠标坐标的使用

你可能感兴趣的