• jQuery放大镜插件


    jQuery放大镜插件,demo地址:http://codepen.io/jonechen/pen/mEmJYJ,图片引用的外链,打开的速度可能有点慢;

    CSS部分:

    *{padding: 0; margin: 0; list-style: none;}
    .img{ display: block;position: relative; }
    .area{50px;height: 100px;background: red;opacity: 0.6;position: absolute;left: 0;top: 0;display: none;}
    .box{margin: 50px; }
    

    HTML部分:

    <div class="box">
    	<img src="http://i2.piimg.com/508767/48115abf1b2e9194.jpg"  >
    </div>
    

    JS插件部分:

    (function($) {
    	var Magnify = function(ele, options) {
    		this.ele = ele;
    		this.opt = options;
    		this.defaults = {
    			selector: 'img',
    			boxWidth: 400, // 容器宽度
    			 100, // 放大区域宽度
    			height: 100, // 放大区域高度
    			radius: 0, // 放大圆角
    			backgroundColor: 'red' // 背景色
    		};
    		this.setting = $.extend(this.defaults, this.opt);
    	}
    	Magnify.prototype = {
    		init: function() {
    			var _self = this.ele;
    			var isMove = false;
    			_self.css('width', this.setting.boxWidth).addClass(this.setting.selector);
    			_self.parent().css({
    				position: "relative",
    				 _self.css('width'),
    			});
    			var src = _self.attr('src');
    			$("<div class='area'></div><div class='bigPic'><img src=" + src + "></<div>").appendTo(_self.parent());
    			var $area = _self.parent().find(".area");
    			var $bigPic = _self.parent().find(".bigPic");
    			$area.css({
    				 this.setting.width,
    				height: this.setting.height,
    				borderRadius: this.setting.radius,
    				backgroundColor: this.setting.backgroundColor
    			})
    			var sw = $area.width(); //剪裁框宽度
    			var sh = $area.height(); //剪裁框高度
    			var smallBox_w = _self.parent().width(); //小框的宽度
    			var smallBox_h = _self.parent().height(); //小框的高度
    			var pw = $bigPic.find('img').width(); //大图的宽度
    			var ph = $bigPic.find('img').height(); //大图的高度
    			var scale = (smallBox_w / pw).toFixed(2);
    			$bigPic.css({
    				display: 'none',
    				position: 'absolute',
    				 parseInt(sw / scale),
    				height: parseInt(sh / scale),
    				left: '102%',
    				top: 0,
    				overflow: 'hidden',
    				borderRadius: this.setting.radius == 100 ? this.setting.radius + '%' : this.setting.radius
    			})
    			$bigPic.find('img').css({
    				position: 'absolute',
    			})
    			_self.parent().on("mouseenter", function() {
    				$area.show();
    				isMove = true
    			})
    			_self.parent().on("mousemove", function(event) {
    				if (isMove) {
    					$bigPic.show();
    					setPos(event, $(this), scale);
    				}
    			})
    			_self.parent().on("mouseleave", function() {
    				$bigPic.hide();
    				$area.hide();
    				isMove = false
    			})
    		},
    		events: function() {
    			this.init();
    		},
    	}
    
    	function setPos(e, obj, scale) {
    		var x = e.pageX - obj.offset().left,
    			y = e.pageY - obj.offset().top,
    			w = obj.find('.area').width(),
    			h = obj.find('.area').height();
    		if (x < w / 2) {
    			x = 0
    		} else if (x > obj.width() - w / 2) {
    			x = obj.width() - w
    		} else {
    			x -= w / 2
    		}
    		if (y < h / 2) {
    			y = 0
    		} else if (y > obj.height() - h / 2) {
    			y = obj.height() - h
    		} else {
    			y -= h / 2
    		}
    		obj.find('.area').css({
    			left: x,
    			top: y
    		});
    		obj.find('.bigPic').find('img').css({
    			left: -x / scale,
    			top: -y / scale,
    		})
    	}
    	$.fn.Magnifying = function(options) {
    		var Magnifies = new Magnify(this, options);
    		return Magnifies.events();
    	}
    })(jQuery);
    // 插件调用 
    $(function() {
    	$(".box img").Magnifying();
    })
    

    默认参数API:

    this.defaults = {
    	selector: 'img',
    	boxWidth: 400, // 容器宽度
    	 100, // 放大区域宽度
    	height: 100, // 放大区域高度
    	radius: 0, // 放大圆角
    	backgroundColor: 'red' // 背景色
    };
    

      

  • 相关阅读:
    python升级安装后的yum的修复
    leetCode 47.Permutations II (排列组合II) 解题思路和方法
    MySQL源代码解读
    MySQL快速建立测试表
    MySQL登陆小问题
    MySQL查看当前用户、存储引擎、日志
    【博客编辑工具】
    mysql5.7执行sql语句出现only_full_group_by错误
    mysql查询出来的某一列合并成一个字段
    动态生成多选框
  • 原文地址:https://www.cnblogs.com/jone-chen/p/5629768.html
Copyright © 2020-2023  润新知