cari

Rumah >hujung hadapan web >tutorial js >仿京东快报向上滚动的实例_javascript技巧

仿京东快报向上滚动的实例_javascript技巧

韦小宝
韦小宝asal
2017-12-15 11:01:421417semak 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(&#39;AutoScroll("#demo")&#39;, 1000)
});
</script>
</body>
</html>


以上这篇仿京东快报向上滚动的实例就是小编分享给大家的全部内容了，希望能给大家一个参考！！

相关推荐：

JS冒泡排序选择排序与插入排序实例分析

js获取前端在本地上传图片的尺寸方法

js setinterval 修改运行中时间段方法

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技巧

Artikel berkaitan

Lihat lagi