jQuery實(shí)現(xiàn)動(dòng)態(tài)向上滾動(dòng)

更新時(shí)間：2020年12月21日 15:56:22 作者：front_end_fan

這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)動(dòng)態(tài)向上滾動(dòng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了jQuery實(shí)現(xiàn)動(dòng)態(tài)向上滾動(dòng)的具體代碼，供大家參考，具體內(nèi)容如下

總結(jié)：概括滾動(dòng)的新聞、字幕、圖片：兩個(gè)最核心功能：

1、”永動(dòng)“（infinite）

2、循環(huán)

js實(shí)現(xiàn)”永動(dòng)“（infinite）的實(shí)現(xiàn)方法離不開(kāi)定時(shí)器setInterval()，也就是說(shuō)每過(guò)一段時(shí)間都要執(zhí)行一次某個(gè)函數(shù)，從而實(shí)現(xiàn)無(wú)休止?jié)L動(dòng)；

而循環(huán)的實(shí)現(xiàn)：appendTo()或者append,三目運(yùn)算符（或者 if else）,insertBefore()或者prepend()等等好多種方法。

代碼：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery動(dòng)態(tài)向上滾動(dòng)</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="#" >第三條動(dòng)態(tài)</a>
</div>
<!-- demo示例三 -->
<div id="demo3" style="overflow:hidden;height:200px;">

 <div id="dl">

 <p>恭喜133****1062用戶獲得10元手機(jī)話費(fèi)</p>

 <p>恭喜153****0792用戶獲得50元助學(xué)代金券</p>

 <p>恭喜153****3890用戶獲得330元上課大禮包</p>

 <p>恭喜189****0883用戶獲得330元上課大禮包</p>

 <p>恭喜133****6823用戶獲得1500元現(xiàn)金</p>

 <p>恭喜153****5050用戶獲得330元上課大禮包</p>
 </div>
 </div>

<script>

 //總結(jié)：3種方法都離不開(kāi)定時(shí)器setInterval()，也就是說(shuō)每過(guò)一段時(shí)間都要執(zhí)行一次某個(gè)函數(shù)，從而實(shí)現(xiàn)無(wú)休止?jié)L動(dòng)
 //而循環(huán)的實(shí)現(xiàn)：appendTo()或者append,三目運(yùn)算符（或者 if else）,insertBefore()或者prepend()


$(function() {
 // demo示例一
 setInterval('autoScroll("#demo1")', 1000);

// demo示例一函數(shù)
function autoScroll(obj) {　　　　　　
 $(obj).find(".demo:first").animate({　　　　　　　　
 marginTop: "-20px"　　　　　　
 }, 500, function() {　　　　　　　　
 $(this).css({
 marginTop: "0px"
 }).find(".con:first").appendTo(this);　　//函數(shù)appendTo()把第一個(gè)挪到最后一個(gè)　　　　
 });　　　　
};

 // 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; //滾動(dòng)速度值，值越大速度越慢
　　　　
function Marquee() {　　　　　　
 drawLetters.scrollTop++;　　　　　　
 var newNode = document.createElement("div");　　　　　　
 newNode.innerHTML = dl.innerHTML;　　　　　　
 drawLetters.insertBefore(newNode, null);　　　　
}　　　　
var MyMar = setInterval(Marquee, speed); //設(shè)置定時(shí)器</script>
</body>
</html>

再為大家分享一段之前收藏的代碼：jQuery文字逐行向上滾動(dòng)代碼：

實(shí)現(xiàn)原理：整體向上滾動(dòng)一行距離后，將第一行appendTo最后一行

<div class="apple">
 <ul>
 <li><a href="#" target="_blank">你是我的小丫小蘋(píng)果 </a></li> 
  <li><a href="#" target="_blank">怎么愛(ài)你都不嫌多</a></li> 
  <li><a href="#" target="_blank">紅紅的小臉兒溫暖我的心窩 </a></li> 
  <li><a href="#" target="_blank">點(diǎn)亮我生命的火 火火火火</a></li> 
  <li><a href="#" target="_blank">你是我的小丫小蘋(píng)果 </a></li> 
  <li><a href="#" target="_blank">就像天邊最美的云朵</a></li> 
  <li><a href="#" target="_blank">春天又來(lái)到了花開(kāi)滿山坡 </a></li> 
  <li><a href="#" target="_blank">種下希望就會(huì)收獲</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>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: