/
index.html
138 lines (128 loc) · 6.65 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
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>bubbleslides</title>
<style>
body,div,ul,ol,li,h1,h2,h3,h4,h5{margin:0;padding:0}
body{background:#f5f5f5 url(images/gray_jean.png);font:12px/20px "simsun"}
h1,h2,h3,h4,h5{font-family:Helvetica,Arial,sans-serif}
h1 {margin:0;font-size:48px;line-height:100px;text-align:center;text-shadow:2px 1px 2px #999}
h2 {margin:-30px 0 10px 150px;font-size:18px;line-height:20px;text-align:center;color: #999;text-shadow:0px 1px 1px #ccc}
li{list-style:none}
img{border:none}
#wrap{width:100%}
#bswrap{width:923px;height:466px;background-color:#fafafa;border:#fdfdfd solid 5px;overflow:hidden;margin:25px auto}
#bspic{width:1100px;height:308px;vertical-align:bottom;background:#eee url(images/bg.png) no-repeat 0 0}
#bspic li{width:154px;height:308px;margin:0 0 0 0;text-align:center;padding:0px;float:left;position:relative}
#bspic li img {position:absolute;width:90px;top:0px;left:0px;padding:0px;margin:35px 0 0 35px;border:none;overflow:hidden}
#relapic{width:1100px;height:202px; overflow:hidden; text-align:right}
#relapic li{margin:6px 38px 0 0;position:relative;float:left}
#relapic li img{border:#ccc solid 1px;width:120px}
.doc{background-color:#fafafa;border:#666 dashed 1px;width:800px;margin:30px auto}
.doc h3{background-color: #f6f6f6;background:-webkit-gradient(linear, 0 0, 0 100%, from(#dddddd), to(#f5f5f5));background:-moz-linear-gradient(top, #dddddd,#f5f5f5);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#dddddd,endColorstr=#f5f5f5,grandientType=1);border-bottom:#666 dashed 1px;font-size:18px;line-height:30px;text-align:center}
pre {color:#666;margin:12px 0;font-size:12px;padding:0 6px;font-family:monaco,"courier new",mono;text-shadow:0px 1px 1px #ccc}
.contact{font:bold 18px/32px Helvetica,Arial,sans-serif;text-align:center}
.contact a{color:#666;text-decoration:none}
.contact a:hover{color:#069}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.bubbleslides.min.js"></script>
<script type="text/javascript">
$(function(){
$('#bspic li img').bubbleslides();
});
</script>
</head>
<body>
<h1>bubbleslides</h1>
<h2>a jQuery plugin</h2>
<div id="wrap">
<div id="bswrap">
<ul id="bspic">
<li><a href="#"><img src="images/loading.gif" alt="" /></a></li>
<li><a href="#"><img src="images/loading.gif" alt="" /></a></li>
<li><a href="#"><img src="images/loading.gif" alt="" /></a></li>
<li><a href="#"><img src="images/loading.gif" alt="" /></a></li>
<li><a href="#"><img src="images/loading.gif" alt="" /></a></li>
<li><a href="#"><img src="images/loading.gif" alt="" /></a></li>
</ul>
<ul id="relapic">
<li><a href="#"><img src="images/loading.gif" alt="" /></a></li>
<li><a href="#"><img src="images/loading.gif" alt="" /></a></li>
<li><a href="#"><img src="images/loading.gif" alt="" /></a></li>
<li><a href="#"><img src="images/loading.gif" alt="" /></a></li>
<li><a href="#"><img src="images/loading.gif" alt="" /></a></li>
<li><a href="#"><img src="images/loading.gif" alt="" /></a></li>
</ul>
</div>
</div>
<div class="doc">
<h3>JS</h3>
<pre>
$(function(){
$('#bspic li img').bubbleslides();
})
---------------------------------------------- or ----------------------------------------------
$(function(){
$('#bspic li img').bubbleslides({
xmlUrl: 'productList.xml', //xml文件地址
tooltip: true, //是否显示提示框
autoPlay: true, //是否自动播放
scale: 155, //图片放大的高度
fontFamily:'microsoft YaHei', //提示文字字体
color: '#333333', //提示文字颜色
fontSize: 12, //提示文字字号
fontWeight:'bold', //提示文字粗细
inSpeed: 'slow', //图片动画放大速度
outSpeed: 'fast', //图片动画缩小速度
pInterval: 5000, //自动轮播间隔时间
startItem: 0 //自动轮播初始图片
})
})</pre>
</div>
<div class="doc">
<h3>CSS</h3>
<pre>
#bswrap{width:923px;height:466px;background-color:#fafafa;border:#fdfdfd solid 5px;overflow:hidden;
margin:25px auto}
#bspic{width:1100px;height:308px;vertical-align:bottom;background:#eee url(images/bg.png) no-repeat 0 0}
#bspic li{width:154px;height:308px;margin:0 0 0 0;text-align:center;padding:0px;float:left;
position:relative}
#bspic li img {position:absolute;width:90px;top:0px;left:0px;padding:0px;margin:35px 0 0 35px;
border:none;overflow:hidden}
#relapic{width:1100px;height:202px; overflow:hidden; text-align:right}
#relapic li{margin:6px 38px 0 0;position:relative;float:left}
#relapic li img{border:#ccc solid 1px;width:120px}</pre>
</div>
<div class="doc">
<h3>HTML</h3>
<pre>
<div id="bswrap">
<ul id="bspic">
<li><a href="#"><img src="images/loading.gif" alt="" /></a></li>
<li><a href="#"><img src="images/loading.gif" alt="" /></a></li>
<li><a href="#"><img src="images/loading.gif" alt="" /></a></li>
<li><a href="#"><img src="images/loading.gif" alt="" /></a></li>
<li><a href="#"><img src="images/loading.gif" alt="" /></a></li>
<li><a href="#"><img src="images/loading.gif" alt="" /></a></li>
</ul>
<ul id="relapic">
<li><a href="#"><img src="images/loading.gif" alt="" /></a></li>
<li><a href="#"><img src="images/loading.gif" alt="" /></a></li>
<li><a href="#"><img src="images/loading.gif" alt="" /></a></li>
<li><a href="#"><img src="images/loading.gif" alt="" /></a></li>
<li><a href="#"><img src="images/loading.gif" alt="" /></a></li>
<li><a href="#"><img src="images/loading.gif" alt="" /></a></li>
</ul>
</div></pre>
</div>
<div class="doc">
<h3>XML</h3>
<pre>
<a href="productList.xml" target="_blank">productList.xml</a></pre>
</div>
<a href="https://github.com/monddy/bubbleslides"><img style="position: absolute; top: 0; right: 0; border: 0;" src="http://s3.amazonaws.com/github/ribbons/forkme_right_orange_ff7600.png" alt="Fork me on GitHub" /></a>
<p class="contact"><a href="mailto:monddy.na@gmail.com">Monddy</a></p>
</body>
</html>