Rumah > Artikel > hujung hadapan web > 仿京东快报向上滚动的实例_javascript技巧
仿京东快报向上滚动的实例_javascript技巧
- 韦小宝asal
- 2017-12-15 11:01:421336semak imbas
下面小编就为大家分享一篇仿京东快报向上滚动的js实例，提供js源码哦！对js感兴趣的同学可以看看源码，希望对大家有所帮助。一起跟随小编过来看看吧
实例如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<p id="broadcast" class="bar" name="giftactive">
<p style="float:left"><strong>间隔滚动效果：</strong></p>
<p id="demo" style="overflow:hidden;height:22px;line-height:22px;">
<ul class="mingdan" id="holder">
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" target="_blank">aaaaaa</a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" target="_blank">bbbbbb</a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" target="_blank">cccccc</a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" target="_blank">dddddd</a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" target="_blank">eeeeee</a></li>
</ul>
</p>
</p>
<script type="text/javascript">
function AutoScroll(obj) {
$(obj).find("ul:first").animate({
marginTop: "-22px"
}, 500, function() {
$(this).css({ marginTop: "0px" }).find("li:first").appendTo(this);
});
}
$(document).ready(function() {
setInterval('AutoScroll("#demo")', 1000)
});
</script>
</body>
</html>以上这篇仿京东快报向上滚动的实例就是小编分享给大家的全部内容了，希望能给大家一个参考！！
相关推荐：
Atas ialah kandungan terperinci 仿京东快报向上滚动的实例_javascript技巧. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：详解webpack require.ensure与require AMD的区别_javascript技巧Artikel seterusnya：JS+canvas画一个圆锥实例代码_javascript技巧