插件

Posted on

封装一个放大镜的jq插件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
$.fn.extend({
	fang:function(style) {
		//获取大图图片，如果没有用小图
		var src= $(this).attr('maxsrc')|| $(this).attr('src');
		//小图结构
		var $min = $('<div class="min"><div></div></div>');

		mStyle = {
			minImgW:400,
			divW:150,
			maxW:500
		}
		//mStyle里面添加style的属性，如果重复的会覆盖
		style = $.extend(mStyle,style)

		//大图结构
		var $max = $('<div class="max"><img src="'+src+'" alt=""></div>')
		var $parent = $(this).parent();
		var $fang = $("<div class='fang'></div>");
		$fang.append($min).append($max);
		$min.append($(this));
		$parent.append($fang);

		//设置样式
		$(this).css('width',"100%");

		$fang.css({
			width: style.minImgW,
			height: style.minImgW,
			border: "5px solid black",
			position: "relative"
		})
		$min.css('width',"100%")
		$min.find('div').css({
			width: style.divW,
			height: style.divW,
			background: "yellow",
			opacity: 0.5,
			position: "absolute",
			top: 0,
			left: 0,
			display: "none"			
		})
		$max.css({
			width: style.maxW,
			height: style.maxW,
			border: "5px solid black",
			position: "absolute",
			top: "0",
			left: "100%",
			overflow: "hidden",
			display: "none"
		})

		// JS功能
		var $div = $min.find('div');
		//根据比例计算大图宽度
		var scale = $max.width()/$div .width();
		var maxW = scale*$min.width();
		//设置大图宽度
		$max.find('img').width(maxW);
		//移进移出显示隐藏大图
		$min.hover(function() {
			$div.show();
			$max.show();
		},function() {
			$div.hide();
			$max.hide();
		})
		//移动小方块
		$min.on('mousemove',function(e) {
			var x = e.clientX-$min.offset().left-$div.width()/2;
			var y = e.clientY-$min.offset().top-$div.height()/2;

			if (x<0) {x=0}
			if (x>$min.width()-$div.width()) {
				x=$min.width()-$div.width();
			}
			if (y<0) {y=0}
			if (y>$min.height()-$div.height()) {
				y = $min.height()-$div.height();
			}
			$div.css({left:x,top:y})
			$max.find('img').css({
				marginLeft:-x*scale,
				marginTop:-y*scale
			})
		})

	}	
})

调用

别忘了调用jq哦

1
<img src="img/min.jpg" maxsrc='img/max.jpg' alt="">
1
2
3
4
5
6
//小图外框DIV
	$('img').fang({
		minImgW:200,
		divW:100,
		maxW:300
	})