Vue实现放大镜
<!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().leftY=event.clientY-this.sPro.offset().topthis.show(X,Y) },move:function(x,y){const proportion=this.settings.proportionthis.bPro.css({"display":"block" })this.img.css({ "left": -x*proportion, "top": -y*proportion, })},show:function(x,y){ positionX=x-this.cover.width()/2positionX>0?positionX:positionX=0positionX<this.sPro.width()/2?positionX:positionX=this.sPro.width()/2positionY=y-this.cover.width()/2positionY>0?positionY:positionY=0positionY<this.sPro.width()/2?positionY:positionY=this.sPro.width()/2this.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);總結(jié)
- 上一篇： lad梯形图编程顺序_重新思考编程：再次
- 下一篇： matlab已知三点求夹角,已知3点如何