滾動新聞
demo1：javascript
<!DOCTYPE html>css
<html>html
<head>java
<title>div內容間隔1秒動態滾動</title>jquery
</head>app
<body>ide
<div id="demo">
<span id="sp">
<p>恭喜133****1231用戶得到100元手機話費</p>
<p>恭喜134****1232用戶得到100元手機話費</p>
<p>恭喜135****1233用戶得到200元手機話費</p>
<p>恭喜136****1234用戶得到100元手機話費</p>
<p>恭喜137****1235用戶得到200元手機話費</p>
<p>恭喜138****1236用戶得到100元手機話費</p>
</span>
</div>post
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>this
<script type="text/javascript">spa
$(document).ready(function() {
setInterval('autoScroll("#demo")', 1000);
});
function autoScroll(obj) {
$(obj).animate({
marginTop: "-30px"
}, 500, function() {
$(this).css({marginTop:"0px"}).find("p:first").appendTo(this);
});
}
</script>
</body>
</html>
demo2：
<!DOCTYPE html>
<html>
<head>
<style>
*{padding:0;margin:0;list-style:none;}
</style>
</head>
<body>
<a href="#">第一條新聞</a>
<a href="#">第二條新聞</a>
<a href="#">第三條動態</a>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
<script>
$(function() {
$('a:first').siblings().hide();
setInterval(function() {
$('a:visible').slideUp('slow', function() {
$(this).next('a')[0] === undefined ? $('a:first').fadeIn("slow") : $(this).next('a').fadeIn("slow");
});
}, 1000*2)
});
</script>
</body>
</html>
demo3：
<!DOCTYPE html>
<html>
<head>
</head>
<body> <div id="drawLetters" 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 language="javascript" type="text/javascript"> var drawLetters = document.getElementById("drawLetters"); 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>
- 1. 【js與jquery】jquery循環滾動新聞
- 2. jQuery新聞列表滾動(上下滾動、橫向滾動、無縫滾動、停頓滾動)
- 3. iOS 新浪新聞首頁卡片滾動特效實現
- 4. javascript新聞向上停頓1秒後繼續滾動
- 5. iOS滾動的導航條(仿網易新聞)
- 6. 模仿新聞客戶端的分類滾動視圖
- 7. iscroll 滾動刷新
- 8. kubernetes滾動更新
- 9. EXT3.1-gridpanel定時刷新滾動條自動滾動
- 10. iOS開發 用UICollectionView仿網易新聞的滾動按鈕效果
- 更多相關文章...
- • ionic 滾動條 - ionic 教程
- • MySQL 5.7的新特性（新功能） - MySQL教程
- • 算法總結-滑動窗口
- • SpringBoot中properties文件不能自動提示解決方法
-
每一个你不满意的现在，都有一个你没有努力的曾经。