jQuery实现图片放大镜效果

最新推荐文章于 2021-06-24 16:28:06 发布

原创最新推荐文章于 2021-06-24 16:28:06 发布 · 1.1k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#jQuery

教学笔记专栏收录该内容

24 篇文章

订阅专栏

本文介绍了一种使用jQuery实现的图片放大镜效果，通过鼠标移入事件触发，动态创建div和img元素来显示放大的图片。文章详细解释了如何获取图片大小、鼠标位置，以及如何创建和定位放大的图片层。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<body>
	<img id="aa" src="<s:url value="/productImages/1.jpg"/>"/>
	<script type="text/javascript">
    $(function(){
			        $("#aa").mouseover(function(e){
					//鼠标移入事件
					
					//1.获取图片的大小
					var width = this.width;
					var height = this.height;
					//alert(width +"     "+height);
					
					//2.获取鼠标的位置
					var x = e.clientX + 10;//e.clientX;
					var y = e.clientY + 10;
					//alert(x+"   "+y);
					
					//3.创建一个div
					var div = $("<div id='bigImg'/>").css({
						"position" : "absolute",
						"top" : y,
						"left" : x,
						"display":"none",
						"border" :"3px red solid",
						"width" : width * 1.5,
						"height" : height * 1.5 
					});
					
					//4.创建一个图片
					var img = $("<img/>").attr({
						"src" : this.src 
					}).css({
						"width" : width * 1.5,
						"height" : height * 1.5
					});
					
					//5.将图片放到div中
					div.append(img);
					
					//6.将div放到页面中
					$("body").append(div);
					//7.将div展示出来
					div.show(1000); 
				}).mousemove(function(e){
					//鼠标在图片上的移动事件
					
					//获取鼠标当前的位置
					var x = e.clientX + 10;
					var y = e.clientY + 10;
					
					//获取页面中的div浮层
					$("#bigImg").css({
						"top" : y,
						"left" : x
					});
					
				}).mouseout(function(){
					//鼠标移出事件
					$("#bigImg").remove();
				});			
				
			});
		</script>
		
	</body>

如果感兴趣的话可以封装成一个专门的放大镜js插件