【前端学习之路】——使用jQuery制作放大镜

最新推荐文章于 2023-12-26 11:30:00 发布

JTz666666

最新推荐文章于 2023-12-26 11:30:00 发布

阅读量259

点赞数 1

分类专栏：前端文章标签： js html css jquery javascript

本文链接：https://blog.csdn.net/jtz666666/article/details/104124662

版权

前端专栏收录该内容

15 篇文章 0 订阅

订阅专栏

效果如图所示：
可根据选择切换至上一张下一张
在这里插入图片描述
话不多说，放代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			#small{
				width: 250px;
				height: 365px;
				border: 1px solid #000;
				position: absolute;
				left: 100px;
				top: 100px;
			}
			#small img{
				width: 100%;
				height: 100%;
			}
			#big img{
				width:1000px;
				height:1450px;
				position: absolute;
			}
			#big{
				display: none;
				width: 400px;
				height: 365px;
				border: 1px solid #000;
				position: absolute;
				left: 400px;
				top: 100px;
				overflow: hidden;
				
			}
			#mark{
				width: 100px;
				height: 100px;
				background-color: white;
				opacity: 0.5;
				filter: alpha(opacity=50);
				position: absolute;
				left: 0px;
				top: 0px;
				display: none;
			}
			#prev{
				top: 10px;
				left: 60px;
				position: relative;
			}
			#next{
				top: 10px;
				left: 80px;
				position: relative;
			}
			
		</style>
		<script src="js/jquery-3.4.1.min.js"></script>
		<script>
			$(function(){
				$("#small").mouseenter(function(){
					$("#mark,#big").show()
				}).mouseleave(function(){
					$("#mark,#big").hide()
				}).mousemove(function(ev){
					var l=ev.pageX-$(this).offset().left-50;
					var t=ev.pageY-$(this).offset().top-50
					if(l<=0){
						l=0
					}
					if(l>=150){
						l=150
					}
					if(t<=0){
						t=0
					}
					if(t>=265){
						t=265
					}
					//改变遮罩层的位置
					$("#mark").css({
						left:l,
						top:t
					})
					
					//同时改变放大图片的位置  四倍于遮罩层图片的位置
					//而且是反方向的
					$("#big img").css({
						left:-4*l,
						top:-4*t
					})
					
				})
				var index=1;
				//切换上一张图片
				function prev(){
					if(index>=2){
						index--
					}else{
						index=4
					}
					return index
				}
				
				//切换下一张图片
				function next(){
					if(index>11){
						index=1
					}else{
						index++
					}
					return index
				}
				
				//点击上一张图片
				$("#prev").click(function(){
					prev()
					$("#small img").attr("src","img/"+(index)+".jpg")
					$("#big img").attr("src","img/"+(index)+".jpg")
					
				})
				$("#next").click(function(){
					next()
					$("#small img").attr("src","img/"+(index)+".jpg")
					$("#big img").attr("src","img/"+(index)+".jpg")
					
				})
			})
		</script>
	</head>
	<body>
		<div id="small">
			<img src="img/1.jpg" />
			<div id="mark"></div>
			<button id="prev">上一张</button>
			<button id="next">下一张</button>
		</div>
		<div id="big">
			<img src="img/1.jpg" />
		</div>
		
	</body>
</html>

如此…一个简单的放大镜就做成功啦~

JTz666666

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【前端学习之路】——使用jQuery制作放大镜

效果如图所示：可根据选择切换至上一张下一张话不多说，放代码：<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style> #small{ width: 250px; heigh...
复制链接

扫一扫