forked from kujian/scrollForever
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
153 lines (153 loc) · 5.14 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
153
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery无缝滚动插件</title>
<link rel="stylesheet" href="doc.css"/>
</head>
<body>
<div class="header">
<h1>scrollForever.js</h1>
</div>
<div class="main">
<h2 class="hentry">A simple jQuery plugin that quicky builds scrolling element forever</h2>
<ul class="feature-btn">
<li><a href="http://caibaojian.com/scrollforever" target="_blank">博客介绍</a></li>
<li><a href="http://github.com/kujian/scrollForever" target="_blank">Fork the Repo</a></li>
</ul>
<div class="article">
<h3>插件概述</h3>
<p>scrollForever 是一个支持连续无缝滚动和非连续滚动的插件，支持向上和向左滚动，你可以自由设置滚动间隔和速度等</p>
<h3>插件特色</h3>
<div class="feature" id="feature">
<ul class="feature-list">
<li class="step">
<h4>快速部署</h4>
<p>只需要引入插件，并在底部添加相应的代码即可</p>
</li>
<li class="config">
<h4>功能齐全</h4>
<p>你能想到的，这个插件都能帮你做到，熟悉参数帮助你更快的上手</p>
</li>
<li class="code">
<h4>代码精简</h4>
<p>只要2k的代码就能完成无缝滚动，包括连续滚动和非连续滚动</p>
</li>
</ul>
</div>
<h3>演示例子</h3>
<div class="a" id="a1">
<ul>
<li><a href=""><img src="img/1.jpg" alt="默认连续滚动"></a></li>
<li><a href=""><img src="img/2.jpg" alt="默认连续滚动"></a></li>
<li><a href=""><img src="img/3.jpg" alt="默认连续滚动"></a></li>
</ul>
</div>
<div class="b" id="b1">
<div class="b-con">
<div><a href=""><img src="img/1.jpg" alt="设置不连续滚动"></a></div>
<div><a href=""><img src="img/1.jpg" alt="设置不连续滚动"></a></div>
<div><a href=""><img src="img/1.jpg" alt="设置不连续滚动"></a></div>
</div>
</div>
<p class="text-center"><a class="demolink" href="http://caibaojian.com/demo/scrollforever/index0.html" target="_blank">无缝滚动插件版</a><a class="demolink black" href="http://caibaojian.com/demo/scrollforever/index1.html" target="_blank">无缝向左1</a><a href="http://caibaojian.com/demo/scrollforever/index2.html" class="demolink blue" target="_blank">无缝向左2</a><a class="demolink green" href="http://caibaojian.com/demo/scrollforever/index3.html" target="_blank">无缝向上</a><a class="demolink" href="http://caibaojian.com/demo/scrollforever/index4.html" target="_blank">间断向左</a><a class="demolink blue" href="http://caibaojian.com/demo/scrollforever/index5.html" target="_blank">间断向上</a></p>
<h3>使用方法</h3>
<div class="usage">
<input type="radio" id="js" name="cc" checked="checked">
<input type="radio" id="html" name="cc">
<input type="radio" id="css" name="cc"/>
<label for="js">Js</label><label for="html">HTML</label><label for="css">CSS</label>
<pre class="js-code"><code><script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="scrollForever.js"></script>
<script type="text/javascript">
$(function(){
$("#a1").scrollForever();
})
</script></code></pre>
<pre class="html-code"><code><div class="a" id="a1">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
</ul>
</div></code></pre>
<pre class="css-code"><code>.b{height: 170px; overflow: hidden; width: 490px; margin-left:auto; margin-right: auto;}
.b-con div{}</code></pre>
</div>
<h3>参数介绍</h3>
<div class="table-container">
<table class="table">
<thead>
<tr>
<td>参数名</td>
<td>默认值</td>
<td>描述</td>
</tr>
</thead>
<tbody>
<tr>
<td>continuous</td>
<td>true</td>
<td>是否连续</td>
</tr>
<tr>
<td>placeholder</td>
<td>0</td>
<td>非连续滚动时每次的滑动距离，可以自定义，如果没有自定义则根据子元素和滚动数量来决定</td>
</tr>
<tr>
<td>dir</td>
<td>'left'</td>
<td>滚动方面，可以为left和top</td>
</tr>
<tr>
<td>container</td>
<td>'ul'</td>
<td>外层元素</td>
</tr>
<tr>
<td>innner</td>
<td>'li'</td>
<td>子元素</td>
</tr>
<tr>
<td>speed</td>
<td>1000</td>
<td>非连续滚动速度</td>
</tr>
<tr>
<td>delayTime</td>
<td>0</td>
<td>滚动间隔，非连续滚动为2000ms,连续滚动为20ms,可以自定义</td>
</tr>
<tr>
<td>num</td>
<td>1</td>
<td>非连续一次滚动的数量</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="scrollForever.js"></script>
<script type="text/javascript">
$(function(){
$('#feature').scrollForever({delayTime:30});
$("#a1").scrollForever({continuous:false,speed:1500});
$("#b1").scrollForever({continuous:false,dir:"top",container:".b-con",inner:"div",delayTime:3000});
})
</script>
<script type="text/javascript" src="http://tajs.qq.com/stats?sId=15910806" charset="UTF-8"></script>
</body>
</html>