Vue实现放大镜

最新推荐文章于 2024-02-27 11:48:49 发布

进阶的巨人001

最新推荐文章于 2024-02-27 11:48:49 发布

阅读量1.4k

点赞数 3

文章标签： vue

本文链接：https://blog.csdn.net/weixin_45389051/article/details/104703971

版权

	<!DOCTYPE html>
	<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>放大镜</title>
		<link rel="stylesheet" href="magnifier.css">
		<script src="http://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.2.min.js"></script>
	</head>
	<body>
		<div id="magnifier">
			<div class="product">
				<div class="small-product">
					<img src="img/1.jpg" alt="" width="400" height="400">
					<div class="cover"></div>
				</div>
				<div class="list-product">
					<ul>
						<li><img src="?" alt="" width="70" height="70"></li>
					</ul>
				</div>
			</div>
			<div class="big-product"><img src="?" alt=""></div>
		</div>
		<script src="magnifier.js"></script>
		<script>
			$(function() {
				$("#magnifier").Magnifier({
					
				})
			})
		</script>
	</body>
	</html>

magnifier.css

	*{
		margin:0;
		padding:0;
	}
	#magnifier{
		display: flex;
		margin:0 auto;
		width: 1200px;
	}
	.product{
		width: 400px;
		height: 400px;
		border:1px solid #666;	
		position: relative;
	}
	.small-product{
		cursor: move;
	}
	.list-product ul{
		list-style: none;
		display: flex;
	}
	.list-product li{
		width: 80px;
		height: 80px;
		text-align: center;
		line-height: 75px;
	}
	.list-product li img{
		vertical-align: middle;
		display: inline-block;
	}
	.big-product{
		width: 400px;
		height: 400px;
		border:1px solid #666;
		margin-left: 15px;
		overflow: hidden;
		display: none;
	}
	.big-product img{
		position: relative;
	}
	.cover{
		position: absolute;
		display: none;
		background-color: rgba(255,255,255,0.7);
		width: 200px;
		height: 200px;
	}

magnifier.js

	;(function($, window, document, undefined) {
	    var pluginName = "Magnifier",
	    defaults = {
	    	proportion:2
	    };
	    function Magnifier(element, options) {
	        this.element = element;
	        this.sPro=$(this.element).find('.small-product')
	        this.bPro=$(this.element).find('.big-product')
	        this.cover=$(this.element).find('.cover')
	        this.img =$(this.element).find('.big-product img')
	        this.settings = $.extend({}, defaults, options);
	        this._defaults = defaults;
	        this._name = pluginName;
	        this.version = 'v1.0.0';
	        this.init();
	    }
	    Magnifier.prototype = {
	        init:function() {
	            const _this=this           
	            _this.sPro.mousemove(function(event){
	                _this.show_coords(event)
	            })
	            _this.sPro.mouseout(function(){
	                _this.hide_coords()
	            })
	        },
	        show_coords:function(event){
	            X=event.clientX-this.sPro.offset().left
	            Y=event.clientY-this.sPro.offset().top
	            this.show(X,Y)   
	        },
	        move:function(x,y){
	            const proportion=this.settings.proportion
	            this.bPro.css({"display":"block" })
	            this.img.css({ "left": -x*proportion, "top": -y*proportion, })
	        },
	        show:function(x,y){       
	            positionX=x-this.cover.width()/2
	            positionX>0?positionX:positionX=0
	            positionX<this.sPro.width()/2?positionX:positionX=this.sPro.width()/2
	            positionY=y-this.cover.width()/2
	            positionY>0?positionY:positionY=0
	            positionY<this.sPro.width()/2?positionY:positionY=this.sPro.width()/2
	            this.cover.css({ "left": positionX, "top": positionY, "display":"block" })
	            this.move(positionX,positionY)           
	        },
	        hide_coords:function(){
	            this.bPro.css({"display":"none" })
	            this.cover.css({"display":"none" })
	        }
	    };
	    $.fn[pluginName] = function(options) {
	        this.each(function() {
	            if (!$.data(this, "plugin_" + pluginName)) {
	                $.data(this, "plugin_" + pluginName, new Magnifier(this, options));
	            }
	        });
	        return this;
	    };
	})(jQuery, window, document);

进阶的巨人001

关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue实现放大镜

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>放大镜</title> <link rel="stylesheet" href="magnifier.css"> <script src="http...
复制链接

扫一扫