-
Notifications
You must be signed in to change notification settings - Fork 433
/
Copy pathindex.html
152 lines (152 loc) · 4.45 KB
/
index.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
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图片聚焦-imagezoom</title>
<link rel="shortcut icon" href="/public/image/favicon.png">
<link rel="stylesheet" type="text/css" href="/public/style/cssreset-min.css">
<link rel="stylesheet" type="text/css" href="/public/style/common.css">
<style type="text/css">
.panel{
margin-bottom: 20px;
}
.zoom{
overflow: hidden;
}
.zoom li{
float: left;
width:300px;
height: 300px;
border:1px solid #ebebeb;
margin-left: 20px;
overflow: hidden;
}
</style>
<script type="text/javascript" src="/public/script/jquery.min.js"></script>
<script type="text/javascript" src="/code/jquery.imagezoom.js"></script>
</head>
<body>
<div class="header">
<div class="inner">
<div class="mod-head">
<div class="bd">
<a class="btn" href="https://github.com/mumuy/widget" rel="nofollow" target="_blank" title="Github">
<svg aria-hidden="true" class="octicon" height="20" title="GitHub " version="1.1" viewBox="0 0 16 16" width="24"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59 0.4 0.07 0.55-0.17 0.55-0.38 0-0.19-0.01-0.82-0.01-1.49-2.01 0.37-2.53-0.49-2.69-0.94-0.09-0.23-0.48-0.94-0.82-1.13-0.28-0.15-0.68-0.52-0.01-0.53 0.63-0.01 1.08 0.58 1.23 0.82 0.72 1.21 1.87 0.87 2.33 0.66 0.07-0.52 0.28-0.87 0.51-1.07-1.78-0.2-3.64-0.89-3.64-3.95 0-0.87 0.31-1.59 0.82-2.15-0.08-0.2-0.36-1.02 0.08-2.12 0 0 0.67-0.21 2.2 0.82 0.64-0.18 1.32-0.27 2-0.27 0.68 0 1.36 0.09 2 0.27 1.53-1.04 2.2-0.82 2.2-0.82 0.44 1.1 0.16 1.92 0.08 2.12 0.51 0.56 0.82 1.27 0.82 2.15 0 3.07-1.87 3.75-3.65 3.95 0.29 0.25 0.54 0.73 0.54 1.48 0 1.07-0.01 1.93-0.01 2.2 0 0.21 0.15 0.46 0.55 0.38C13.71 14.53 16 11.53 16 8 16 3.58 12.42 0 8 0z"></path></svg>
<span>Github</span>
</a>
<a class="btn" href="https://passer-by.com/" target="_blank">个人网站</a>
<a class="btn" href="/">返回首页</a>
</div>
</div>
</div>
</div>
<div class="container">
<div class="panel">
<div class="zoom" id="zoom">
<ul>
<li>
<img src="image/pic1.jpg">
</li>
<li>
<img src="image/pic2.jpg">
</li>
</ul>
</div>
</div>
<div class="code">
<p>
<pre>
$('#zoom li').imagezoom({
'hoverEffect':true
});
</pre>
</p>
</div>
<script type="text/javascript">
$('#zoom li').imagezoom({
'hoverEffect':true
});
</script>
<div class="example">
<div class="call">
<h1>调用方法：</h1>
<p>$(selector).imagezoom(options);</p>
</div>
<h2>options参数</h2>
<table>
<thead>
<tr>
<th width="150">参数</th>
<th width="120">默认值</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>width</td>
<td>[计算]</td>
<td>图片外层宽度</td>
</tr>
<tr>
<td>height</td>
<td>[计算]</td>
<td>图片外层高度</td>
</tr>
<tr>
<td>borderWidth</td>
<td>0</td>
<td>图片边框大小</td>
</tr>
<tr>
<td>data</td>
<td>'original'</td>
<td>惰性加载时的图片地址源</td>
</tr>
<tr>
<td>resizeable</td>
<td>true</td>
<td>窗口大小改变时是否重新调整图片位置</td>
</tr>
<tr>
<td>effect</td>
<td>'default'</td>
<td>图片居中方式处理:default最大面积覆盖外框，in最大面积显示完整图片，out在不模糊的情况下最大面积覆盖外框</td>
</tr>
<tr>
<td>condition</td>
<td>'img'</td>
<td>默认筛选条件</td>
</tr>
<tr>
<td>hoverEffect</td>
<td>false</td>
<td>鼠标悬浮时是否放大</td>
</tr>
<tr>
<td>hoverRatio</td>
<td>1.2</td>
<td>鼠标悬浮时放大比例</td>
</tr>
<tr>
<td>duration</td>
<td>300</td>
<td>鼠标悬浮时放大动画时长</td>
</tr>
<tr>
<td>beforeHover()</td>
<td>[空]</td>
<td>鼠标进入悬浮前触发</td>
</tr>
<tr>
<td>afterHover()</td>
<td>[空]</td>
<td>鼠标离开悬浮后触发</td>
</tr>
</tbody>
</table>
</div>
</div>
<script type="text/javascript" src="https://passer-by.com/public/script/projects.js"></script>
<script type="text/javascript" src="https://jquerywidget.com/public/script/stat.js"></script>
</body>
</html>