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


Posted in Javascript onDecember 13, 2017

实例如下:

<!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>

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

Javascript 相关文章推荐
驱动事件的addEvent.js代码
Mar 27 Javascript
javascript 鼠标悬浮图片显示原图 移出鼠标后原图消失(多图)
Dec 28 Javascript
JavaScript 函数replace深入了解
Mar 14 Javascript
javascript实现图片循环渐显播放的方法
Feb 24 Javascript
跟我学习javascript的严格模式
Nov 16 Javascript
js父页面中使用子页面的方法
Jan 09 Javascript
jQuery 常用代码集锦(必看篇)
May 16 Javascript
jquery中的常见问题及快速解决方法小结
Jun 14 Javascript
浅谈js之字面量、对象字面量的访问、关键字in的用法
Nov 20 Javascript
EasyUI Tree树组件无限循环的解决方法
Sep 27 Javascript
vue resource post请求时遇到的坑
Oct 19 Javascript
基于Vue.js+Nuxt开发自定义弹出层组件
Oct 09 Javascript
Angular2使用vscode断点调试ts文件的方法
Dec 13 #Javascript
vue-router路由懒加载和权限控制详解
Dec 13 #Javascript
JS+canvas画一个圆锥实例代码
Dec 13 #Javascript
JS排序算法之冒泡排序,选择排序与插入排序实例分析
Dec 13 #Javascript
实例分析js事件循环机制
Dec 13 #Javascript
javascript实现QQ空间相册展示源码
Dec 12 #Javascript
自定义PC微信扫码登录样式写法
Dec 12 #Javascript
You might like
ThinkPHP之用户注册登录留言完整实例
2014/07/22 PHP
PHP浮点比较大小的方法
2016/02/14 PHP
javascript 面向对象,实现namespace,class,继承,重载
2009/10/29 Javascript
JS实现来回出现文字的状态栏特效代码
2015/10/31 Javascript
js立即执行函数: (function ( ){})( ) 与 (function ( ){}( )) 有什么区别?
2015/11/18 Javascript
Node.js connect ECONNREFUSED错误解决办法
2016/09/15 Javascript
详解VUE的状态控制与延时加载刷新
2017/03/27 Javascript
微信小程序 跳转方式总结
2017/04/20 Javascript
Mui使用jquery并且使用点击跳转新窗口的实例
2017/08/19 jQuery
vue项目中使用axios上传图片等文件操作
2017/11/02 Javascript
使用vue-router设置每个页面的title方法
2018/02/11 Javascript
vue-router命名路由和编程式路由传参讲解
2019/01/19 Javascript
Seajs源码详解分析
2019/04/02 Javascript
JavaScript中var的重要性实例分析
2019/07/09 Javascript
JS数组进阶示例【数组的几种函数用法】
2020/01/16 Javascript
Javascript执行流程细节原理解析
2020/05/14 Javascript
javascript贪吃蛇游戏设计与实现
2020/09/17 Javascript
python黑魔法之参数传递
2016/02/12 Python
Java多线程编程中ThreadLocal类的用法及深入
2016/06/21 Python
Python如何实现守护进程的方法示例
2017/02/08 Python
python安装cx_Oracle模块常见问题与解决方法
2017/02/21 Python
Python利用ORM控制MongoDB(MongoEngine)的步骤全纪录
2018/09/13 Python
在python2.7中用numpy.reshape 对图像进行切割的方法
2018/12/05 Python
python3实现斐波那契数列(4种方法)
2019/07/15 Python
使用python远程操作linux过程解析
2019/12/04 Python
python实现加密的方式总结
2020/01/19 Python
python 实现图像快速替换某种颜色
2020/06/04 Python
selenium+超级鹰实现模拟登录12306
2021/01/24 Python
售后主管岗位职责
2013/12/08 职场文书
社会实践活动总结范文
2014/07/03 职场文书
区长工作作风个人整改措施
2014/10/01 职场文书
法人代表证明书格式
2014/10/01 职场文书
小学教代会开幕词
2016/03/04 职场文书
vue3如何优雅的实现移动端登录注册模块
2021/03/29 Vue.js
MySql 8.0及对应驱动包匹配的注意点说明
2021/06/23 MySQL
一篇文章了解正则表达式的替换技巧
2022/02/24 Javascript