jQuery 实战———放大镜-CSDN博客

本文链接：https://blog.csdn.net/whonow33/article/details/106784716

基于jQuery

实现一个放大镜功能

在这里插入图片描述

HTML代码

<body>
	<div id="small">
		<img src="http://cms-bucket.nosdn.127.net/2018/11/28/5915fc732a2747ecb5132a9376b65c2c.jpg">
		<div id="mark"></div>
	</div>
	<div id="big">
		<img src="http://cms-bucket.nosdn.127.net/2018/11/28/5915fc732a2747ecb5132a9376b65c2c.jpg">
	</div>
</body>·

CSS代码

	<style>
		#small{
			width: 240px;
			height: 350px;
			border:1px solid rgb(0,0,0);
			position: absolute;
			left: 100px;
		}
		#small img{
			width: 100%;
			height: 100%;
		}
		#big img{
			width: 480px;
			height: 700px;
			position:absolute;
		}
		#big{
			display: none;
			overflow: hidden;
			width: 200px;
			height: 200px;
			border:1px solid rgb(0,0,0);
			position: absolute;
			left: 400px;	
		}
		#mark{
			display: none;
			width: 100px;
			height: 100px;
			background-color: rgb(255,255,255);
			opacity: 0.6;
			filter: alpha(opacity=50);
			position: absolute;
			left: 0px;
			top: 0px;
		}
	</style>

filter: alpha(opacity=50)设置透明度

这个filter过滤器是IE专用的，建议不要用，如果想做透明可以用JS来解决。

filter:alpha(opacity=50)是IE专用的属性，因为它不支持opacity属性，为了保证浏览器的兼容性，建议使用时俩个都写。

JS代码

	<script >
		$(function(){
			$("#small").mouseenter(function(){
				$("#mark,#big").show()
			}).mouseleave(function(){
				$("#mark,#big").hide()
			}).mousemove(function(ev){
				//ev是鼠标指向坐标
				var l=ev.pageX - $(this).offset().left-50;
				var t=ev.pageY - $(this).offset().top-50;
				//设置限制
				if(l<=0){
					l=0;
				}
				if(l>=140){
					l=140;
				}
				if (t<=0) {
					t=0;
				}
				if (t>=250) {
					t=250;
				}

				//改变遮罩层的位置
				$("#mark").css({
					left:l,
					top:t
				})

				//同时改变放大图片的位置，两倍于遮罩层位置，注意反方向
				$("#big img").css({
					left:-2*l,
					top:-2*t
				})

			})
		})
	</script>