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


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 相关文章推荐
javascript编程起步(第七课)
Feb 27 Javascript
Mootools 1.2教程 Tooltips
Sep 15 Javascript
JavaScript中__proto__与prototype的关系深入理解
Dec 04 Javascript
jquery+ajax+text文本框实现智能提示完整实例
Jul 09 Javascript
js从外部获取图片的实现方法
Aug 05 Javascript
JQuery 获取多个select标签option的text内容(实例)
Sep 07 jQuery
vue组件父子间通信详解(三)
Nov 07 Javascript
vue中子组件调用兄弟组件方法
Jul 06 Javascript
详解Webstorm 下的Angular2.0开发之路(图文)
Dec 06 Javascript
纯 JS 实现放大缩小拖拽功能(完整代码)
Nov 25 Javascript
JS实现小米轮播图
Sep 21 Javascript
基于openlayers实现角度测量功能
Sep 28 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之第二天
2006/10/09 PHP
php设计模式  Command(命令模式)
2011/06/17 PHP
优化PHP代码技巧的小结
2013/06/02 PHP
laravel安装zend opcache加速器教程
2015/03/02 PHP
PHP检查文件是否存在,不存在自动创建及读取文件内容操作示例
2020/01/23 PHP
PHP实现计算器小功能
2020/08/28 PHP
JS控制日期显示的小例子
2013/11/23 Javascript
用JavaScript显示浏览器客户端信息的超相近教程
2015/06/18 Javascript
js实现input密码框提示信息的方法(附html5实现方法)
2016/01/14 Javascript
Bootstrap中datetimepicker使用小结
2016/12/28 Javascript
详解PHP后期静态绑定分析与应用
2018/03/21 Javascript
30分钟快速入门掌握ES6/ES2015的核心内容(下)
2018/04/18 Javascript
jQuery实现图片上传预览效果功能完整实例【测试可用】
2018/05/28 jQuery
VUE引入第三方js包及调用方法讲解
2019/03/01 Javascript
vue路由传参页面刷新参数丢失问题解决方案
2019/10/08 Javascript
vue实现简单图片上传
2020/06/30 Javascript
[01:45]DOTA2新英雄“神谕者”全方位展示
2014/11/21 DOTA
python迭代器实例简析
2014/09/25 Python
python图像处理之反色实现方法
2015/05/30 Python
python中安装Scrapy模块依赖包汇总
2017/07/02 Python
python输出100以内的质数与合数实例代码
2018/07/08 Python
python使用pipeline批量读写redis的方法
2019/02/18 Python
django 使用全局搜索功能的实例详解
2019/07/18 Python
完美解决Django2.0中models下的ForeignKey()问题
2020/05/19 Python
怎么快速自学python
2020/06/22 Python
Python 解析库json及jsonpath pickle的实现
2020/08/17 Python
AmazeUI 平滑滚动效果的示例代码
2020/08/20 HTML / CSS
Hashtable 添加内容的方式有哪几种,有什么区别?
2012/04/08 面试题
工厂厂长的职责
2013/12/12 职场文书
大学旷课检讨书
2014/01/28 职场文书
2014道德模范事迹材料
2014/02/16 职场文书
承诺书格式
2014/06/03 职场文书
生产工厂门卫岗位职责
2014/09/26 职场文书
2015年图书馆个人工作总结
2015/05/26 职场文书
运动会开幕式主持词
2015/07/01 职场文书
《英雄联盟》2022日蚀、月蚀皮肤演示 黑潮亚索曝光
2022/04/13 其他游戏