-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathpicZoom.html
104 lines (98 loc) · 3.29 KB
/
picZoom.html
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
92
93
94
95
96
97
98
99
100
101
102
103
104
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HoverEx - A jQuery plugin for image hover animation</title>
<link rel="stylesheet" href="css/asdui1.4b.css" />
<style type="text/css">
.thumb-list
{
float:left;
}
.thumb-list li
{
padding:1px;
border:1px solid #ddd;
float:left;
margin-right:20px;
cursor:pointer;
list-style:none
}
.thumb-list li img
{
width:60px;
float:left;
}
.box{
float:left;
padding:1px;
box-shadow:0 0 2px rgba(0,0,0,.1);
margin:20px 40px 20px 0;
}
.he-wrap{position:relative;zoom:1;display:inline-block;*display:inline;position:relative}
.he-zoom{position:absolute;top:0;left:0;right:0;bottom:0;overflow:hidden;visibility:hidden;opacity:0}
.he-zoom img{position:absolute;top:0;left:0}
.he-zoomstate{position:absolute;bottom:0;right:0;background:#c00;color:#fff;border-radius:3px 0 0 0;font-size:12px;line-height:16px;padding:0 4px;box-shadow:-1px -1px 1px rgba(204,0,0,.3)}
.he-view-show{visibility:visible;opacity:1}
#posss{position:absolute;top:300px;left:400px}
</style>
</head>
<body >
<!-- zoom demo -->
<h3>Outline Zoom Demo</h3>
<div class="cf" style="width:100%;height:600px;">
<div class="box" id="posss">
<div class="he-wrap" id="zoom01">
<img src="images/1.jpg" alt="" />
</div>
<div class="he-zoom" id="zoom01Big">
<img src="images/1-l.jpg" alt="" />
</div>
</div>
<div class="info">
<strong>Image zoom effect</strong><br />
Features:
<ul>
<li>Support mousewheel to control zoom state!</li>
<li>InitZoomState: the init zoom state,can be set a number or 'auto'.</li>
<li>ZoomRange : the min/max zoom state of the image.default 1X to 4X.</li>
<li>ZoomStep : zoom state change step.default 0.5.</li>
</ul>
</div>
</div>
<div class="title cf"><h3>Dynamic Inline Zoom Demo</h3></div>
<div class="cf">
<div class="cf" style="float:left; width:370px">
<div class="box">
<div class="he-wrap" id="zoom02">
<img src="images/1.jpg" alt="" />
<div class="he-zoom" id="zoom02Big">
<img src="images/1-l.jpg" alt=""/>
</div>
</div>
</div>
<ul class="thumb-list">
<li><img src="images/1.jpg" alt="" data-large="images/1-l.jpg" /></li>
<li><img src="images/2.jpg" alt="" data-large="images/2-l.jpg" /></li>
<li><img src="images/3.jpg" alt="" data-large="images/3-l.jpg" /></li>
</ul>
<div class="info" style="width:670px">
<strong>Work with Dynamic Zoom </strong><br />
It is just easy to use it for dynamic zoom.You need only to chang the original image and the large image src attr.
</div>
</div>
<script type="text/javascript" src="js/jquery1.91.min.js"></script>
<script type="text/javascript" src="js/asdui.js"></script>
<script type="text/javascript">
var zoom = new ZUI.ImgZoom('zoom01',{zoomBig:'zoom01Big',zoomOut:true});
var zoom = new ZUI.ImgZoom('zoom02',{zoomBig:'zoom02Big'});
$(function(){
$(".thumb-list img").click(function(){
var src = $(this).attr("src");
var large = $(this).data("large");
$("#zoom02>img").attr("src",src);
$("#zoom02 .he-zoom>img").attr("src",large);
});
});
</script>
</body></html>