本文實例為大家分享了jQuery實現動態向上滾動的具體代碼，供大家參考，具體內容如下
總結：概括滾動的新聞、字幕、圖片：兩個最核心功能 ：
1、”永動“（infinite）
2、循環
js實現”永動“（infinite） 的實現方法離不開定時器setInterval()，也就是說每過一段時間都要執行一次某個函數，從而實現無休止滾動；
而循環的實現：appendTo()或者append,三目運算符（或者 if else）,insertBefore()或者prepend()等等好多種方法。
代碼：
|
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><html><head><meta charset="utf-8"><title>jQuery動態向上滾動</title><script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script><style>* { margin:0; padding:0;}body { font-family:'microsoft yahei'; background:#fff; overflow:hidden;}#demo1,#demo2 { width:1000px; height:40px; line-height:30px; margin:50px auto; overflow:hidden; background:#f60; color:#fff; padding:10px; box-sizing:border-box;}#demo2 { height:90px;}#demo2 a { display:block; text-decoration:none; color:#fff;}#demo3 { width:1000px; height:400px; overflow:hidden; background:#f60; color:#fff; margin:50px auto; padding:10px; box-sizing:border-box;}</style></head><body><!-- demo示例一 --><div id="demo1"> <div class="demo"> <div class="con"> 向幸福生活致敬111！ </div> <div class="con"> 向幸福生活致敬222！ </div> <div class="con"> 向幸福生活致敬333！ </div> <div class="con"> 向幸福生活致敬111！ </div> </div></div><!-- demo示例二 --><div id="demo2"> <a href="#" >第一條新聞</a> <a href="#" >第二條新聞</a> <a href="#" >第三條動態</a></div><!-- demo示例三 --><div id="demo3" style="overflow:hidden;height:200px;"> <div id="dl"> <p>恭喜133****1062用戶獲得10元手機話費</p> <p>恭喜153****0792用戶獲得50元助學代金券</p> <p>恭喜153****3890用戶獲得330元上課大禮包</p> <p>恭喜189****0883用戶獲得330元上課大禮包</p> <p>恭喜133****6823用戶獲得1500元現金</p> <p>恭喜153****5050用戶獲得330元上課大禮包</p> </div> </div><script> //總結：3種方法都離不開定時器setInterval()，也就是說每過一段時間都要執行一次某個函數，從而實現無休止滾動 //而循環的實現：appendTo()或者append,三目運算符（或者 if else）,insertBefore()或者prepend()$(function() { // demo示例一 setInterval('autoScroll("#demo1")', 1000);// demo示例一函數function autoScroll(obj) { $(obj).find(".demo:first").animate({ marginTop: "-20px" }, 500, function() { $(this).css({ marginTop: "0px" }).find(".con:first").appendTo(this); //函數appendTo()把第一個挪到最后一個 }); }; // demo示例二 $('#demo2 a:first').siblings().hide(); setInterval(function() { $('#demo2 a:visible').slideUp('slow', function() { $(this).next('a')[0] === undefined ? $('a:first').fadeIn("slow") : $(this).next('a').fadeIn("slow"); }); }, 1000 * 2)});// demo示例三var drawLetters = document.getElementById("demo3"); var dl = document.getElementById("dl"); var speed = 20; //滾動速度值，值越大速度越慢 function Marquee() { drawLetters.scrollTop++; var newNode = document.createElement("div"); newNode.innerHTML = dl.innerHTML; drawLetters.insertBefore(newNode, null); } var MyMar = setInterval(Marquee, speed); //設置定時器</script></body></html> |
再為大家分享一段之前收藏的代碼：jQuery文字逐行向上滾動代碼：
實現原理：整體向上滾動一行距離后，將第一行appendTo最后一行
|
1
2
3
4
5
6
7
8
9
10
11
12
|
<div class="apple"> <ul> <li><a href="#" target="_blank">你是我的小丫小蘋果 </a></li> <li><a href="#" target="_blank">怎么愛你都不嫌多</a></li> <li><a href="#" target="_blank">紅紅的小臉兒溫暖我的心窩 </a></li> <li><a href="#" target="_blank">點亮我生命的火 火火火火</a></li> <li><a href="#" target="_blank">你是我的小丫小蘋果 </a></li> <li><a href="#" target="_blank">就像天邊最美的云朵</a></li> <li><a href="#" target="_blank">春天又來到了花開滿山坡 </a></li> <li><a href="#" target="_blank">種下希望就會收獲</a></li> </ul> </div> |
|
1
2
3
4
5
6
7
8
9
10
11
|
<script type="text/javascript"> function autoScroll(obj){ $(obj).find("ul").animate({marginTop : "-39px"},500,function(){ $(this).css({marginTop : "0px"}).find("li:first").appendTo(this); }) } $(function(){ setInterval('autoScroll(".apple")',2000); }) </script> |
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持服務器之家。
原文鏈接：https://blog.csdn.net/qq_39198420/article/details/77062145
