jQuery实现动态向上滚动
编程学习 2021-07-04 14:07www.dzhlxh.cn编程入门
这篇文章主要为大家详细介绍了jQuery实现动态向上滚动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了jQuery实现动态向上滚动的具体代码，供大家参考，具体内容如下
总结：概括滚动的新闻、字幕、图片：两个最核心功能 ：
1、”永动“（infinite）
2、循环
js实现”永动“（infinite） 的实现方法离不开定时器setInterval()，也就是说每过一段时间都要执行一次某个函数，从而实现无休止滚动；
而循环的实现：appendTo()或者append,三目运算符（或者 if else）,insertBefore()或者prepend()等等好多种方法。
代码：
<!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最后一行
<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>
<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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持狼蚁SEO。
上一篇：ES5和ES6中类的区别总结
下一篇：Vue组件简易模拟实现购物车