JQuery 放大镜

平凡シンプル

已于 2024-05-13 10:38:31 修改

阅读量104

点赞数 3

分类专栏： # JQuery 文章标签： JQuery

于 2021-04-21 18:56:51 首次发布

本文链接：https://blog.csdn.net/weixin_45381071/article/details/115970769

版权

JQuery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

JQuery 放大镜

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>放大镜</title>
		<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
		<style type="text/css">
			*{
				margin: 0px;
				padding: 0px;
			}
			.box{
				width: 1200px;
				height: 500px;
				margin: 0 auto;
			}
			.left{
				width: 600px;
				height: 100%;
				float: left;
			}
			.left>div:nth-child(1){
				width: 400px;
				height: 400px;
				position: relative;
			}
			.left>div:nth-child(2){
				width: 400px;
				height: 100px; 
			}
			.left>div:nth-child(1)>div{
				width: 160px;
				height: 160px;
				background:rgba(255,250,232,0.4);
				position: absolute;
				display: none;
			}
			.left>div:nth-child(1)>div:hover{
				cursor: move;
			}
			.left>div:nth-child(1)>img{
				width: 400px;
				height: 400px;
			}
			.left>div:nth-child(2)>img{
				width: 100px;
				height: 100px;
				float: left;
				filter: grayscale(100%);
			}
			.left>div:nth-child(2)>.hea{
				filter: grayscale(0);
			}
			.right{
				width: 600px;
				height: 100%;
				float: left;
			}
			.right>div{
				width: 400px;
				height: 400px;
				overflow: hidden;
				position: relative;
				display: none;
			}
			.right>div>img{
				position: absolute;
				
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="left">
				<div>
					<img src="img/a.jpg"/>
					<div></div>
				</div>
				<div>
					<img class="hea" src="img/a.jpg"/>
					<img src="img/d.jpg"/>
					<img src="img/c.jpg"/>
					<img src="img/b.jpg"/>
				</div>
			</div>
			<div class="right">
				<div>
					<img src="img/a.jpg"/>
				</div>
			</div>
		</div>
	</body>
	<script type="text/javascript">

		function magnifying(left,right){
			this.left=document.getElementsByClassName(left);
			this.right=document.getElementsByClassName(right); 
			this.myclick();
			this.mymouseenter();
			this.mymouseleave();
			this.mymousemove();
		}
		magnifying.prototype.myclick=function(){
			var that = this;
			$(this.left).children().eq(1).children().click(function(){ 
				$(this).siblings().removeClass('hea');
				$(this).addClass('hea')
				$(this).parent().prev().empty();
				$(this).parent().prev().append($(this).clone(true));
				$(this).parent().prev().append($("<div></div>"));
				$(that.right).children().first().empty();
				$(that.right).children().first().append($(this).clone(true));
			}) 
		}
		magnifying.prototype.mymouseenter=function(){ 
			$(this.left).children().eq(0).on('mouseenter',function(){
				$(this).children().eq(1).css('display','block');
			})
		}
		magnifying.prototype.mymouseleave=function(){
			var that = this;
			$(this.left).children().eq(0).on('mouseleave',function(){
				$(this).children().eq(1).css('display','none');
				$(that.right).children().first().css('display','none');
			})
		}
		magnifying.prototype.mymousemove=function(){
			var that = this;
			$(this.left).children().eq(0).on('mousemove',function(e){
				$(that.right).children().first().css('display','block'); 
				var x = parseInt(e.pageX);
				var y = parseInt(e.pageY);
				var fx = parseInt($(that.left).offset().left);
				var fy = parseInt($(that.left).offset().top);
				var cx = x-fx-parseInt($(this).children().eq(1).width())/2;
				var cy = y-fy-parseInt($(this).children().eq(1).height())/2;
				if(cx<=0){
					cx=0;
				}
				if(cx>=$(that.left).children().first().width()-$(this).children().eq(1).width()){
					cx=$(that.left).children().first().width()-$(this).children().eq(1).width();
				}
				if(cy<=0){
					cy=0;
				}
				if(cy>=$(that.left).children().first().height()-$(this).children().eq(1).height()){
					cy=$(that.left).children().first().height()-$(this).children().eq(1).height();
				}
				piyix = cx / parseInt($(that.left).children().first().width());
				piyiy = cy / parseInt($(that.left).children().first().height());
				bigx = parseInt($(that.right).children().children().first().width()) * piyix;
				bigy = parseInt($(that.right).children().children().first().height()) * piyiy; 
				$(that.right).children().children().first().css('left',-bigx+'px');
				$(that.right).children().children().first().css('top',-bigy+'px');
				$(this).children().eq(1).css('left',cx+'px');
				$(this).children().eq(1).css('top',cy+'px');
			})
			
				
		}

		var mymagnifying=new magnifying('left','right' );
		
		
	</script>
</html>

效果图

透明块为鼠标移入效果

平凡シンプル

关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
JQuery 放大镜

JQuery 放大镜<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>放大镜</title> <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script> <style type="text/css">
复制链接

扫一扫