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

 更新时间:2017年12月13日 10:18:11   作者:璁璁那~年  
下面小编就为大家分享一篇仿京东快报向上滚动的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

实例如下:

<!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>
<div id="broadcast" class="bar" name="giftactive">
<div style="float:left"><strong>间隔滚动效果:</strong></div>
<div 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>
</div>
</div>
<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>

以上这篇仿京东快报向上滚动的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • swiper4实现移动端导航切换

    swiper4实现移动端导航切换

    这篇文章主要为大家详细介绍了swiper4实现移动端导航切换,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-09-09
  • 通过JS 获取Mouse Position(鼠标坐标)的代码

    通过JS 获取Mouse Position(鼠标坐标)的代码

    最近我发现在webpage中获取空间的绝对坐标时,如果有滚动条就会有错,后来用无名发现的方法得以解决。
    2009-09-09
  • JS简单模拟触发按钮点击功能的方法

    JS简单模拟触发按钮点击功能的方法

    这篇文章主要介绍了JS简单模拟触发按钮点击功能的方法,涉及JavaScript事件调用机制及事件触发的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-11-11
  • 用户输入密码的强度

    用户输入密码的强度

    用户输入密码的强度...
    2006-07-07
  • javascript操纵OGNL标签示例代码

    javascript操纵OGNL标签示例代码

    这篇文章主要介绍了javascript 怎么操纵OGNL标签,需要的朋友可以参考下
    2014-06-06
  • 什么是cookie?js手动创建和存储cookie

    什么是cookie?js手动创建和存储cookie

    cookie 是存储于访问者的计算机中的变量,在这个例子中我们要创建一个存储访问者名字的 cookie,需要的朋友可以参考下
    2014-05-05
  • velocity.js实现页面滚动切换效果

    velocity.js实现页面滚动切换效果

    这篇文章主要介绍了velocity.js实现页面滚动切换效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-10-10
  • JavaScript检测浏览器cookie是否已经启动的方法

    JavaScript检测浏览器cookie是否已经启动的方法

    这篇文章主要介绍了JavaScript检测浏览器cookie是否已经启动的方法,实例分析了javascript操作cookie的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-02-02
  • JavaScript中const关键字的用法及特性

    JavaScript中const关键字的用法及特性

    该文章讲解了JavaScript中const关键字的用法以及它的一些特性,该关键字用于创建常量,即一旦赋值之后就不能再修改,但是,使用 const创建的对象和数组却可以被修改,本文通过讲解“赋值”和“变异”之间的重要区别,详细解释了这一现象,需要的朋友可以参考下
    2023-05-05
  • 用瀑布流的方式在网页上插入图片的简单实现方法

    用瀑布流的方式在网页上插入图片的简单实现方法

    下面小编就为大家带来一篇用瀑布流的方式在网页上插入图片的简单实现方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-09-09

最新评论