demo2.html
9.68 KB
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
<!DOCTYPE html>
<!-- saved from url=(0044)http://code.ciaoca.com/jquery/cxscroll/demo/ -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>jQuery cxScroll 间歇式无缝滚动 » 在线演示 - 前端开发仓库</title>
<LINK href="jquery.cxscroll.layout_wev8.css" type=text/css rel=STYLESHEET>
<LINK href="jquery.cxscroll.demo_wev8.css" type=text/css rel=STYLESHEET>
</head>
<body>
<div class="wrap">
<div class="side">
<div class="logo">
<a href="http://code.ciaoca.com/" target="_blank">前端开发仓库</a>
<em>在线演示</em>
</div>
<dl class="about">
<dt>关于</dt>
<dd><a target="_blank" href="http://ciaoca.com/">作者</a></dd>
<dd><a target="_blank" href="https://github.com/ciaoca/cxScroll">Github</a></dd>
<dd><a target="_blank" href="http://code.ciaoca.com/jquery/cxscroll/">中文文档</a></dd>
</dl>
</div>
<div class="main">
<div class="inwrap">
<h1>jQuery cxScroll 间歇式无缝滚动</h1>
<h2>示例</h2>
<div class="example">
<h3>横向滚动 right</h3>
<div id="pic_list_1" class="scroll_horizontal"><a class="next"></a><a class="prev"></a>
<div class="box">
<ul class="list">
<li><a href="http://code.ciaoca.com/jquery/cxscroll/demo/#"><img src="./jQuery cxScroll 间歇式无缝滚动 » 在线演示 - 前端开发仓库_files/temp_pic_1.jpg"></a></li>
<li><a href="http://code.ciaoca.com/jquery/cxscroll/demo/#"><img src="./jQuery cxScroll 间歇式无缝滚动 » 在线演示 - 前端开发仓库_files/temp_pic_2.jpg"></a></li>
<li><a href="http://code.ciaoca.com/jquery/cxscroll/demo/#"><img src="./jQuery cxScroll 间歇式无缝滚动 » 在线演示 - 前端开发仓库_files/temp_pic_3.jpg"></a></li>
<li><a href="http://code.ciaoca.com/jquery/cxscroll/demo/#"><img src="./jQuery cxScroll 间歇式无缝滚动 » 在线演示 - 前端开发仓库_files/temp_pic_4.jpg"></a></li>
<li><a href="http://code.ciaoca.com/jquery/cxscroll/demo/#"><img src="./jQuery cxScroll 间歇式无缝滚动 » 在线演示 - 前端开发仓库_files/temp_pic_5.jpg"></a></li>
<li><a href="http://code.ciaoca.com/jquery/cxscroll/demo/#"><img src="./jQuery cxScroll 间歇式无缝滚动 » 在线演示 - 前端开发仓库_files/temp_pic_1.jpg"></a></li>
<li><a href="http://code.ciaoca.com/jquery/cxscroll/demo/#"><img src="./jQuery cxScroll 间歇式无缝滚动 » 在线演示 - 前端开发仓库_files/temp_pic_2.jpg"></a></li>
<li><a href="http://code.ciaoca.com/jquery/cxscroll/demo/#"><img src="./jQuery cxScroll 间歇式无缝滚动 » 在线演示 - 前端开发仓库_files/temp_pic_3.jpg"></a></li>
<li><a href="http://code.ciaoca.com/jquery/cxscroll/demo/#"><img src="./jQuery cxScroll 间歇式无缝滚动 » 在线演示 - 前端开发仓库_files/temp_pic_4.jpg"></a></li>
<li><a href="http://code.ciaoca.com/jquery/cxscroll/demo/#"><img src="./jQuery cxScroll 间歇式无缝滚动 » 在线演示 - 前端开发仓库_files/temp_pic_5.jpg"></a></li>
</ul>
</div>
</div>
<h3>横向滚动 left</h3>
<div id="pic_list_2" class="scroll_horizontal"><a class="next"></a><a class="prev"></a>
<div class="box">
<ul class="list">
<li><a href="http://code.ciaoca.com/jquery/cxscroll/demo/#"><img src="./jQuery cxScroll 间歇式无缝滚动 » 在线演示 - 前端开发仓库_files/temp_pic_1.jpg"></a></li>
<li><a href="http://code.ciaoca.com/jquery/cxscroll/demo/#"><img src="./jQuery cxScroll 间歇式无缝滚动 » 在线演示 - 前端开发仓库_files/temp_pic_2.jpg"></a></li>
<li><a href="http://code.ciaoca.com/jquery/cxscroll/demo/#"><img src="./jQuery cxScroll 间歇式无缝滚动 » 在线演示 - 前端开发仓库_files/temp_pic_3.jpg"></a></li>
<li><a href="http://code.ciaoca.com/jquery/cxscroll/demo/#"><img src="./jQuery cxScroll 间歇式无缝滚动 » 在线演示 - 前端开发仓库_files/temp_pic_4.jpg"></a></li>
<li><a href="http://code.ciaoca.com/jquery/cxscroll/demo/#"><img src="./jQuery cxScroll 间歇式无缝滚动 » 在线演示 - 前端开发仓库_files/temp_pic_5.jpg"></a></li>
<li><a href="http://code.ciaoca.com/jquery/cxscroll/demo/#"><img src="./jQuery cxScroll 间歇式无缝滚动 » 在线演示 - 前端开发仓库_files/temp_pic_1.jpg"></a></li>
<li><a href="http://code.ciaoca.com/jquery/cxscroll/demo/#"><img src="./jQuery cxScroll 间歇式无缝滚动 » 在线演示 - 前端开发仓库_files/temp_pic_2.jpg"></a></li>
<li><a href="http://code.ciaoca.com/jquery/cxscroll/demo/#"><img src="./jQuery cxScroll 间歇式无缝滚动 » 在线演示 - 前端开发仓库_files/temp_pic_3.jpg"></a></li>
<li><a href="http://code.ciaoca.com/jquery/cxscroll/demo/#"><img src="./jQuery cxScroll 间歇式无缝滚动 » 在线演示 - 前端开发仓库_files/temp_pic_4.jpg"></a></li>
<li><a href="http://code.ciaoca.com/jquery/cxscroll/demo/#"><img src="./jQuery cxScroll 间歇式无缝滚动 » 在线演示 - 前端开发仓库_files/temp_pic_5.jpg"></a></li>
</ul>
</div>
</div>
</div>
<div class="example clearfix">
<div class="incol">
<h3>垂直滚动 bottom</h3>
<div id="pic_list_3" class="scroll_vertical"><a class="next"></a><a class="prev"></a>
<div class="box">
<ul class="list">
<li><a href="http://code.ciaoca.com/jquery/cxscroll/demo/#"><img src="./jQuery cxScroll 间歇式无缝滚动 » 在线演示 - 前端开发仓库_files/temp_pic_1.jpg"></a></li>
<li><a href="http://code.ciaoca.com/jquery/cxscroll/demo/#"><img src="./jQuery cxScroll 间歇式无缝滚动 » 在线演示 - 前端开发仓库_files/temp_pic_2.jpg"></a></li>
<li><a href="http://code.ciaoca.com/jquery/cxscroll/demo/#"><img src="./jQuery cxScroll 间歇式无缝滚动 » 在线演示 - 前端开发仓库_files/temp_pic_3.jpg"></a></li>
<li><a href="http://code.ciaoca.com/jquery/cxscroll/demo/#"><img src="./jQuery cxScroll 间歇式无缝滚动 » 在线演示 - 前端开发仓库_files/temp_pic_4.jpg"></a></li>
<li><a href="http://code.ciaoca.com/jquery/cxscroll/demo/#"><img src="./jQuery cxScroll 间歇式无缝滚动 » 在线演示 - 前端开发仓库_files/temp_pic_5.jpg"></a></li>
<li><a href="http://code.ciaoca.com/jquery/cxscroll/demo/#"><img src="./jQuery cxScroll 间歇式无缝滚动 » 在线演示 - 前端开发仓库_files/temp_pic_1.jpg"></a></li>
<li><a href="http://code.ciaoca.com/jquery/cxscroll/demo/#"><img src="./jQuery cxScroll 间歇式无缝滚动 » 在线演示 - 前端开发仓库_files/temp_pic_2.jpg"></a></li>
<li><a href="http://code.ciaoca.com/jquery/cxscroll/demo/#"><img src="./jQuery cxScroll 间歇式无缝滚动 » 在线演示 - 前端开发仓库_files/temp_pic_3.jpg"></a></li>
<li><a href="http://code.ciaoca.com/jquery/cxscroll/demo/#"><img src="./jQuery cxScroll 间歇式无缝滚动 » 在线演示 - 前端开发仓库_files/temp_pic_4.jpg"></a></li>
<li><a href="http://code.ciaoca.com/jquery/cxscroll/demo/#"><img src="./jQuery cxScroll 间歇式无缝滚动 » 在线演示 - 前端开发仓库_files/temp_pic_5.jpg"></a></li>
</ul>
</div>
</div>
</div>
<div class="incol">
<h3>垂直滚动 top</h3>
<div id="pic_list_4" class="scroll_vertical"><a class="next"></a><a class="prev"></a>
<div class="box">
<ul class="list">
<li><a href="http://code.ciaoca.com/jquery/cxscroll/demo/#"><img src="./jQuery cxScroll 间歇式无缝滚动 » 在线演示 - 前端开发仓库_files/temp_pic_1.jpg"></a></li>
<li><a href="http://code.ciaoca.com/jquery/cxscroll/demo/#"><img src="./jQuery cxScroll 间歇式无缝滚动 » 在线演示 - 前端开发仓库_files/temp_pic_2.jpg"></a></li>
<li><a href="http://code.ciaoca.com/jquery/cxscroll/demo/#"><img src="./jQuery cxScroll 间歇式无缝滚动 » 在线演示 - 前端开发仓库_files/temp_pic_3.jpg"></a></li>
<li><a href="http://code.ciaoca.com/jquery/cxscroll/demo/#"><img src="./jQuery cxScroll 间歇式无缝滚动 » 在线演示 - 前端开发仓库_files/temp_pic_4.jpg"></a></li>
<li><a href="http://code.ciaoca.com/jquery/cxscroll/demo/#"><img src="./jQuery cxScroll 间歇式无缝滚动 » 在线演示 - 前端开发仓库_files/temp_pic_5.jpg"></a></li>
<li><a href="http://code.ciaoca.com/jquery/cxscroll/demo/#"><img src="./jQuery cxScroll 间歇式无缝滚动 » 在线演示 - 前端开发仓库_files/temp_pic_1.jpg"></a></li>
<li><a href="http://code.ciaoca.com/jquery/cxscroll/demo/#"><img src="./jQuery cxScroll 间歇式无缝滚动 » 在线演示 - 前端开发仓库_files/temp_pic_2.jpg"></a></li>
<li><a href="http://code.ciaoca.com/jquery/cxscroll/demo/#"><img src="./jQuery cxScroll 间歇式无缝滚动 » 在线演示 - 前端开发仓库_files/temp_pic_3.jpg"></a></li>
<li><a href="http://code.ciaoca.com/jquery/cxscroll/demo/#"><img src="./jQuery cxScroll 间歇式无缝滚动 » 在线演示 - 前端开发仓库_files/temp_pic_4.jpg"></a></li>
<li><a href="http://code.ciaoca.com/jquery/cxscroll/demo/#"><img src="./jQuery cxScroll 间歇式无缝滚动 » 在线演示 - 前端开发仓库_files/temp_pic_5.jpg"></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="/js/jquery/jquery_wev8.js"></script>
<script src="jquery.cxscroll.js"></script>
<script>
$("#pic_list_1").cxScroll();
$('#pic_list_2').cxScroll({
direction: 'left',
step: 3
});
$('#pic_list_3').cxScroll({
direction: 'bottom',
speed: 500,
time: 1500,
plus: false,
minus: false
});
$('#pic_list_4').cxScroll({
direction: 'top'
});
</script>
</body></html>