http://china-ouya.com/template/ouya/styles/base.js

1var ImagePreview = {
2	
3	default_params: {},
4	init: function(a) {
5		if (a) {
6			$.extend(this.default_params, a)
7		}
8		ip_global_img_list = [];
9		var b = this.default_params.id;
10		if (typeof b == "string") {
11			if ((ip_global_img_list = $("#" + b).find("img")).length == 0) {
12				return
13			}
14		} else {
15			if (typeof b == "object" && b != null) {
16				ip_global_img_list = $(b)
17			}
18		}
19		this.fnGenerateHtml();
20		this.fnBindEvent(ip_global_img_list)
21	},
22	fnBindEvent: function(a) {
23		if (a.length == 0) {
24			return
25		}
26		$(a).on("click", this.onClickEvent);
27		this.onDragEvent($("#ip-img-preview"));
28		$("#ip-img-preview").on("mousewheel DOMMouseScroll", this.onMouseScrollEvent);
29		$("#ip-img-floatshadow").on("click", function() {
30			$("#ip-img-preview").hide();
31			$("#ip-left").hide();
32			$("#ip-right").hide();
33			$("#ip-img-floatshadow").hide();
34			$("#ip-img-preview").attr("src", "")
35		});
36		$("#ip-left").hover(this.fnMouseOver, this.fnMouseOut).click(this.fnPrev);
37		$("#ip-right").hover(this.fnMouseOver, this.fnMouseOut).click(this.fnNext)
38	},
39	fnGenerateHtml: function() {
40		$("body").append(
41			'<img id="ip-img-preview" style="position: fixed;left: 50%;top: 50%;transform: translate(-50%, -50%);z-index: 19941206;cursor: move;display: none"/><div id="ip-img-floatshadow" style="z-index: 19941205;background-color: #000;opacity: .5;top: 0;left: 0;width: 100%;height: 100%;position: fixed;display: none" title="点击空白处关闭"></div>'
42		);
43		$("body").append(
44			'<div id="ip-left" style="display: none; width: 100px; height: 100px;left: 5px; top: 50%; position:fixed;z-index:19941207; cursor: pointer;"><div style="left:-30px;border: 30px solid;border-color: transparent #333 transparent transparent;position: absolute;"></div></div>'
45		);
46		$("body").append(
47			'<div id="ip-right" style="display: none; width: 100px; height: 100px; right: 5px; top: 50%; position:fixed; z-index:19941207;cursor: pointer;"><div style="left:30px;border: 30px solid;border-color: transparent transparent transparent #333;position: absolute;"></div></div>'
48		)
49	},
50	// fnMouseOver: function() {
51	// 	$(this).css("background", "rgb(134, 134, 134)");
52	// 	$(this).css("border", "1px solid rgb(111, 111, 111)")
53	// },
54	fnMouseOut: function() {
55		$(this).css("background", "");
56		$(this).css("border", "")
57	},
58	fnPrev: function() {
59		if (typeof(ip_global_cur) == "number" && ip_global_cur > 0) {
60			ImagePreview.fnReset();
61			$("#ip-img-preview").animate({

62				left: "49%"
63			}, 100);
64			$("#ip-img-preview").attr("src", ip_global_img_list[--ip_global_cur].src);
65			$("#ip-img-preview").animate({
66				left: "50.5%"
67			}, 100);
68			$("#ip-img-preview").animate({
69				left: "50%"
70			}, 100);
71			ImagePreview.fnAdjustMaxWidth()
72		}
73	},
74	fnNext: function() {
75		if (typeof(ip_global_cur) == "number" && ip_global_cur < ip_global_img_list.length - 1) {
76			ImagePreview.fnReset();
77			$("#ip-img-preview").animate({
78				left: "51%"
79			}, 100);
80			$("#ip-img-preview").attr("src", ip_global_img_list[++ip_global_cur].src);
81			$("#ip-img-preview").animate({
82				left: "49.5%"
83			}, 100);
84			$("#ip-img-preview").animate({
85				left: "50%"
86			}, 100);
87			ImagePreview.fnAdjustMaxWidth()
88		}
89	},
90	fnGetIndexOfCurImg: function(b) {
91		for (var a = 0; a < ip_global_img_list.length; a++) {
92			if ($(ip_global_img_list[a]).is(b)) {
93				return a
94			}
95		}
96	},
97	onClickEvent: function(a) {
98		ImagePreview.fnReset();
99		$("#ip-img-preview").attr("src", $(this).attr("src"));
100		ImagePreview.fnAdjustMaxWidth();
101		ip_global_cur = ImagePreview.fnGetIndexOfCurImg($(this));
102		$("#ip-img-floatshadow").fadeIn();
103		$("#ip-img-preview").fadeIn();
104		$("#ip-left").fadeIn();
105		$("#ip-right").fadeIn()
106	},
107	fnAdjustMaxWidth: function() {
108		var b = true;
109		var a = $("#ip-img-preview").width();
110		if (a < $("#ip-img-preview").height()) {
111			b = false;
112			a = $("#ip-img-preview").height()
113		}
114		if (b && $(window).width() < a) {
115			$("#ip-img-preview").css("width", "75%")
116		} else {
117			if (!b && $(window).height() < a) {
118				$("#ip-img-preview").css("height", "75%")
119			}
120		}
121	},
122	fnReset: function() {
123		$("#ip-img-preview").css("left", "50%");
124		$("#ip-img-preview").css("top", "50%");
125		$("#ip-img-preview").css("width", "");
126		$("#ip-img-preview").css("height", "")
127	},
128	onMouseScrollEvent: function(b) {
129		b.preventDefault();
130		var a = b.originalEvent.wheelDelta || -b.originalEvent.detail;
131		var c = Math.max(-1, Math.min(1, a));
132		if (c < 0) {
133			$(this).width($(this).width() / 1.1);
134			$(this).height($(this).height() / 1.1)
135		} else {
136			$(this).width($(this).width() * 1.1);
137			$(this).height($(this).height() * 1.1)
138		}
139	},
140	onDragEvent: function(c) {
141		c.bind("mousedown", d);
142
143		function d(e) {
144			if (e.button == 0) {
145				gapX = e.clientX - c.offset().left;
146				gapY = e.clientY - c.offset().top;
147				$(document).bind("mousemove", a);
148				$(document).bind("mouseup", b)
149			}
150			return false
151		}
152
153		function a(e) {
154			c.css({
155				left: (e.clientX - gapX + c.width() / 2) + "px",
156				top: (e.clientY - gapY + c.height() / 2) + "px"
157			});
158			return false
159		}
160
161		function b() {
162			$(document).unbind("mousemove", a);
163			$(document).unbind("mouseup", b)
164		}
165	}
166};
167
168
169ImagePreview.init({id:$("#imgs img")})