jQuery实现动态向上滚动

时间：2021-05-26

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章