-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
132 lines (127 loc) · 4.94 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
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>artZoom demo</title>
<script src="jquery-1.6.1.min.js"></script>
<script src="jquery.artZoom.js"></script>
<link href="jquery.artZoom.css" rel="stylesheet" type="text/css">
<script>
jQuery(function ($) {
$('.artZoom').artZoom({
path: './images', // 设置artZoom图片文件夹路径
preload: true, // 设置是否提前缓存视野内的大图片
blur: true, // 设置加载大图是否有模糊变清晰的效果
// 语言设置
left: '左旋转', // 左旋转按钮文字
right: '右旋转', // 右旋转按钮文字
source: '看原图' // 查看原图按钮文字
});
$('#myEmail').html(1987 + '.tangbin@' + 'gmail.com');
});
</script>
<style type="text/css">
/*演示*/
.artZoom {
padding:3px;
background:#FFF;
border:1px solid #EBEBEB;
}
body {
font-size:75%;
font-family:'微软雅黑';
padding-bottom:200px;
}
img {
border:0 none;
}
#demo {
width:540px;
padding:5px;
background:#FBFCFD;
}
#demo p, #demo ul {
padding:0;
margin:0;
}
#demo ul, #demo ol, #demo li {
list-style:none;
}
#about {
width:550px;
padding-bottom:20px;
border-bottom:1px solid #CCC;
font-size:14px;
}
#about .planeart, #about .planeart a {
color:#CCC;
}
.footer { color:#666; width:550px; }
.content {
padding:20px;
background:#f3f6fa;
border:1px solid #e3e7ed;
border-radius: 10px;
}
.help {
font-size:12px;
font-weight:normal;
color:#808080;
cursor:help;
}
dt {
font-size:18px;
font-weight:bold;
}
dd {
padding:20px 0;
}
ul.imgList {
}
ul.imgList li {
margin-top:10px;
}
</style>
</head>
<body>
<div id="about">
<h1>artZoom - 微博简约贴图缩放插件</h1>
<div class="content">
<dl>
<dt>极快的显示速度!</dt>
<dd>采用 <a href="http://www.planeart.cn/?p=1121" target="_blank" title="查看详情">imgReady</a> 技术，无需服务端支持即可快速获取大图尺寸，支持大图一边下载一边浏览。同时artZoom会使用队列机制预先缓存视野内的大图，这使得artZoom展示大图的速度比国内主流微博的快很多倍，在网速比较慢的情况下artZoom优势将越明显。</dd>
</dl>
<dl>
<dt>跨浏览器支持</dt>
<dd>兼容IE6~IE8,Chrome,Firefox,Opera,Safari等浏览器，同时完美解决了IE8旋转后高度自适应问题 <span class="help" title="IE8滤镜与IE6、7有点不一样，你可以看看腾讯微博旋转后的效果">[?]</span></dd>
</dl>
<dl>
<dt>调用简单</dt>
<dd>一次调用：内部使用事件代理，使得DOM中新插入的图片仍然有效，无需重新绑定，节省内存</dd>
<dd>例如： $('#twitter a.thumb img').artZoom()</dd>
</dl>
<dl>
<dt>下载artZoom</dt>
<dd><a href="jquery.imgZoom.rar" onclick="this.style.background='url(http://goo.gl/BLXlZ)'" target="_blank">jquery.imgZoom.rar</a></dd>
</dl>
</div>
</div>
<div id="demo">
<h2>演示 <span class="help">更多设置请右键查看本页面源码</span></h2>
<ul class="imgList">
<li> <a href="http://www.planeart.cn/demo/artZoom/_demo/01.jpg" rel="http://www.planeart.cn/demo/artZoom/_demo/01.jpg"><img class="artZoom" src="http://www.planeart.cn/demo/artZoom/_demo/01m.jpg" /></a> </li>
<li> <img class="artZoom" src="http://www.planeart.cn/demo/artZoom/_demo/03m.jpg" data-artZoom-show="http://www.planeart.cn/demo/artZoom/_demo/03.jpg" data-artZoom-source="http://www.planeart.cn/demo/artZoom/_demo/03m.jpg" /> </li>
<li> <a href="http://www.planeart.cn/demo/artZoom/_demo/04.jpg" data-artZoom-source="http://www.planeart.cn/demo/artZoom/_demo/04.jpg"> <img class="artZoom" src="http://www.planeart.cn/demo/artZoom/_demo/04m.jpg" data-artZoom-source="http://www.planeart.cn/demo/artZoom/_demo/01m.jpg" /> </a> </li>
<li> <a href="http://www.planeart.cn/demo/artZoom/_demo/05.jpg" rel="http://www.planeart.cn/demo/artZoom/_demo/05.jpg"><img class="artZoom" src="http://www.planeart.cn/demo/artZoom/_demo/05m.jpg" /></a> </li>
</ul>
<p><em>下面是一张特别长的图片，这种种图片在微博中非常常见，如果使用artZoom，用户将无需等待图片完全下载完毕即可观看大图：</em></p>
<p><img class="artZoom" src="http://www.planeart.cn/demo/artZoom/_demo/min.jpg" data-artZoom-show="http://www.planeart.cn/demo/artZoom/_demo/big.jpg" data-artZoom-source="http://www.planeart.cn/demo/artZoom/_demo/big.jpg" /></p>
</div>
<div class="footer">
<p>artZoom基于LPGL开源授权，非商业用户可免费修改并使用。商业用户只需要支付￥30获取商业授权后即可摆脱LGPL开源协议的限制。</p>
<p>支付宝帐号 <span id="myEmail"></span></p>
<p>by tangbin. <a href="http://www.planeArt.cn" target="_blank" title="planeArt">www.planeArt.cn</a><br />
This is licensed under the GNU LGPL, version 2.1 or later.</p>
</div>
</body>
</html>