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


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 相关文章推荐
jquery实现html页面 div 假分页有原理有代码
Sep 06 Javascript
为什么Node.js会这么火呢?Node.js流行的原因
Dec 01 Javascript
Angularjs 基础入门
Dec 26 Javascript
bootstrap网页框架的使用方法
May 10 Javascript
省市二级联动小案例讲解
Jul 24 Javascript
EditPlus中的正则表达式 实战(4)
Dec 15 Javascript
JavaScript中三个等号和两个等号你了解多少
Jul 04 Javascript
React Native如何消除启动时白屏的方法
Aug 08 Javascript
JavaScript输入分钟、秒倒计时技巧总结(附代码)
Aug 17 Javascript
15分钟学会vue项目改造成SSR(小白教程)
Dec 17 Javascript
javascript实现京东快递单号的查询效果
Nov 30 Javascript
vue 给数组添加新对象并赋值
Apr 20 Vue.js
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 pear安装配置教程
2016/05/14 PHP
Ubuntu VPS中wordpress网站打开时提示”建立数据库连接错误”的解决办法
2016/11/03 PHP
PHP的mysqli_select_db()函数讲解
2019/01/23 PHP
BOOM vs RR BO5 第四场 2.14
2021/03/10 DOTA
JavaScript中的prototype和constructor简明总结
2014/04/05 Javascript
node.js中的console.info方法使用说明
2014/12/09 Javascript
JavaScript获取一个范围内日期的方法
2015/04/24 Javascript
BootStrap glyphicon图标无法显示的解决方法
2016/09/06 Javascript
微信小程序入门教程
2016/11/18 Javascript
bootstrap fileinput 上传插件的基础使用
2017/02/17 Javascript
JavaScript实现修改伪类样式
2017/11/27 Javascript
vue 解决循环引用组件报错的问题
2018/09/06 Javascript
使用imba.io框架得到比 vue 快50倍的性能基准
2019/06/17 Javascript
Vue 权限控制的两种方法(路由验证)
2019/08/16 Javascript
[00:52]DOTA2齐天大圣预告片
2016/08/13 DOTA
Python中logging模块的用法实例
2014/09/29 Python
Python 内置函数complex详解
2016/10/23 Python
Python实现扩展内置类型的方法分析
2017/10/16 Python
python3学习笔记之多进程分布式小例子
2018/02/13 Python
python 求两个向量的顺时针夹角操作
2021/03/04 Python
CSS3 3D位移translate效果实例介绍
2016/05/03 HTML / CSS
Falconeri美国官网:由羊绒和羊毛制成的针织服装
2018/04/08 全球购物
北美最大的手工艺品零售商之一:Michaels Stores
2019/02/27 全球购物
希腊品牌鞋类销售网站:epapoutsia.gr
2020/03/18 全球购物
美国鲜花递送:UrbanStems
2021/01/04 全球购物
学前教育毕业生自荐信范文
2013/12/24 职场文书
大学毕业后的十年规划
2014/01/07 职场文书
参观考察邀请函范文
2014/01/29 职场文书
连锁超市项目计划书
2014/09/15 职场文书
个人政风行风自查自纠报告
2014/10/21 职场文书
大学生团日活动总结
2015/05/06 职场文书
国富论读书笔记
2015/06/26 职场文书
导游词之五台山
2019/10/11 职场文书
golang通过递归遍历生成树状结构的操作
2021/04/28 Golang
Java实现扫雷游戏详细代码讲解
2022/05/25 Java/Android
mysql通过group by分组取最大时间对应数据的两种有效方法
2022/09/23 MySQL