-
Notifications
You must be signed in to change notification settings - Fork 50
/
index0.html
130 lines (130 loc) · 3.87 KB
/
index0.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery无缝滚动插件</title>
<style type="text/css">
*{margin:0; padding: 0;}
ul{list-style: none;}
.nav{max-width: 800px; margin: 0 auto; padding:20px 0; display: flex; flex-flow:row wrap; justify-content:space-around; border-bottom: 1px solid #ddd;}
.nav a{font-size: 14px; color: #333; text-decoration: none;}
.nav a:hover, .nav .current{color: #f00; text-decoration: underline;}
.a{height: 200px; width:800px; overflow: hidden; margin:10px auto;}
.a li{height: 198px; width: 198px; border:1px solid #ddd; line-height: 2.4; font-size: 30px; text-align: center; float: left;}
.b{height: 400px; overflow: hidden; width: 200px; margin-left:auto; margin-right: auto;}
.b-con div{width: 198px; height: 198px; border: 1px solid #ddd; line-height: 2.4; font-size: 30px; text-align: center;}
.c{height: 200px; width:490px; overflow: hidden; margin: 10px auto; position: relative;}
.c li{width:490px; height: 200px; text-align: center; float: left;}
.c .paged{position: absolute; bottom:0; left: 0; width: 100%; height: 20px; padding-top: 5px; padding-bottom: 5px; background: rgba(0,0,0,0.6); color: #333; text-align: center; }
.c .paged span{padding: 0 4px; line-height: 20px; background:#fff; margin-right: 10px;}
.d{height: 200px; width: 600px; overflow: hidden; margin: 10px auto;}
.d li{width: 598px; height: 198px; border: 1px solid #ddd;}
</style>
</head>
<body>
<div class="nav"><a href="https://qdkfweb.cn/">前端博客</a><a href="https://qdkfweb.cn/scrollForever" target="blank">插件使用介绍</a><a href="index.html" class="current">无缝滚动插件版</a><a href="index1.html">无缝向左1</a><a href="index2.html">无缝向左2</a><a href="index3.html">无缝向上</a><a href="index4.html">间断向左</a><a href="index5.html">间断向上</a></div>
<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>
<div class="b" id="b1">
<div class="b-con">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
</div>
</div>
<div class="a" id="a2">
<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>
<div class="b" id="b2">
<div class="b-con">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
</div>
</div>
<div class="c" id="c1">
<ul>
<li><img src="img/1.jpg" /></li>
<li><img src="img/2.jpg" /></li>
<li><img src="img/3.jpg" /></li>
</ul>
<div class="paged"><span>1</span><span>2</span><span>3</span></div>
</div>
<div class="d" id="d1">
<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>
<script src="js/jquery.js"></script>
<script type="text/javascript" src="scrollForever.js"></script>
<script type="text/javascript">
$(function(){
// var time1 = new Date;
$("#a1").scrollForever();
$("#b1").scrollForever({dir:"top",container:".b-con",inner:"div"});
$("#a2").scrollForever({continuous:false,num:2});
$("#b2").scrollForever({dir:"top",container:".b-con",inner:"div",continuous:false});
$("#c1").scrollForever({continuous:false});
$("#d1").scrollForever({continuous:false,dir:'top'});
// console.log("耗时：" + (new Date - time1) + " 毫秒");
});
</script>
<script type="text/javascript" src="https://qdkfweb.cn/demo/base.js" charset="UTF-8"></script>
</body>
</html>