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


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 相关文章推荐
清除网页历史记录,屏蔽后退按钮!
Dec 22 Javascript
JavaScript 三种创建对象的方法
Oct 16 Javascript
javascript题目,重写函数让其无限相加
Feb 15 Javascript
JS控制阿拉伯数字转为中文大写示例代码
Sep 04 Javascript
JS判断不能为空实例代码
Nov 26 Javascript
第六篇Bootstrap表格样式介绍
Jun 21 Javascript
js实现用户输入的小写字母自动转大写字母的方法
Jan 21 Javascript
JS闭包用法实例分析
Mar 27 Javascript
Popup弹出框添加数据实现方法
Oct 27 Javascript
vue-cli 打包后提交到线上出现 &quot;Uncaught SyntaxError:Unexpected token&quot; 报错
Nov 06 Javascript
SpringBoot在yml配置文件中配置druid的操作
Nov 16 Javascript
JavaScript构造函数原理及实现流程解析
Nov 19 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
解决PHP程序运行时:Fatal error: Maximum execution time of 30 seconds exceeded in的错误提示
2016/11/25 PHP
dwr spring的集成实现代码
2009/03/22 Javascript
javascript options属性集合操作代码
2009/12/28 Javascript
jquery validate使用攻略 第四步
2010/07/01 Javascript
控制文字内容的显示与隐藏示例
2014/06/11 Javascript
jQuery事件的绑定、触发、及监听方法简单说明
2016/05/10 Javascript
Bootstrap3制作自己的导航栏
2016/05/12 Javascript
jQuery对checkbox 复选框的全选全不选反选的操作
2016/08/09 Javascript
jQuery动态修改字体大小的方法【测试可用】
2016/09/09 Javascript
在js中实现邮箱格式的验证方法(推荐)
2016/10/24 Javascript
JavaScript数组排序小程序实现解析
2020/01/13 Javascript
小程序跳转到的H5页面再跳转回跳小程序的方法
2020/03/06 Javascript
JavaScript ECMA-262-3 深入解析(一):执行上下文实例分析
2020/04/25 Javascript
JavaScript实现复选框全选和取消全选
2020/11/20 Javascript
Vue用mixin合并重复代码的实现
2020/11/27 Vue.js
绘制微信小程序验证码功能的实例代码
2021/01/05 Javascript
HTML中使用python屏蔽一些基本功能的方法
2017/07/07 Python
python 输出上个月的月末日期实例
2018/04/11 Python
面向初学者的Python编辑器Mu
2018/10/08 Python
Python函数中参数是传递值还是引用详解
2019/07/02 Python
python GUI库图形界面开发之PyQt5信号与槽机制、自定义信号基础介绍
2020/02/25 Python
python GUI库图形界面开发之PyQt5工具栏控件QToolBar的详细使用方法与实例
2020/02/28 Python
AmazeUI 按钮交互的实现示例
2020/08/24 HTML / CSS
澳大利亚家居用品零售商:Harris Scarfe
2020/10/10 全球购物
Python里面如何拷贝一个对象
2014/02/17 面试题
出纳岗位职责模板
2013/11/27 职场文书
甲方资料员岗位职责
2013/12/13 职场文书
新护士岗前培训制度
2014/02/02 职场文书
高校优秀辅导员事迹材料
2014/05/07 职场文书
施工安全标语
2014/06/07 职场文书
群众路线自我剖析材料
2014/10/08 职场文书
电影雷锋观后感
2015/06/10 职场文书
读《方与圆》有感:交友方圆有度
2020/01/14 职场文书
MySQL慢查询的坑
2021/04/28 MySQL
Redis 异步机制
2022/05/15 Redis
windows server2008 开启端口的实现方法
2022/06/25 Servers