本文实例为大家分享了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