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


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 相关文章推荐
让mayfish支持mysqli数据库驱动的实现方法
May 22 Javascript
jquery lazyload延迟加载技术的实现原理分析
Jan 24 Javascript
javascript学习笔记(二十) 获得和设置元素的特性(属性)
Jun 20 Javascript
通过JavaScript使Div居中并随网页大小改变而改变
Jun 24 Javascript
解决jQuery上传插件Uploadify出现Http Error 302错误的方法
Dec 18 Javascript
javascript Promise简单学习使用方法小结
May 17 Javascript
Vue.js开发环境快速搭建教程
Mar 17 Javascript
js+canvas实现动态吃豆人效果
Mar 22 Javascript
JS中promise化微信小程序api
Apr 12 Javascript
vue开发移动端底部导航条功能
Apr 08 Javascript
JavaScript装箱及拆箱boxing及unBoxing用法解析
Jun 15 Javascript
解决vue中使用less/sass及使用中遇到无效的问题
Oct 24 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 编写安全的代码时容易犯的错误小结
2010/05/20 PHP
在PHP中利用wsdl创建标准webservice的实现代码
2011/12/07 PHP
destoon实现商铺管理主页设置增加新菜单的方法
2014/06/26 PHP
php数字每三位加逗号的功能函数
2015/10/22 PHP
PHP测试成功的邮件发送案例
2015/10/26 PHP
WordPress中重置文章循环的rewind_posts()函数讲解
2016/01/11 PHP
PHP中explode函数和split函数的区别小结
2016/08/24 PHP
PHP curl批处理及多请求并发实现方法分析
2018/08/15 PHP
js字符串截取函数substr substring slice使用对比
2013/11/27 Javascript
jquery中添加属性和删除属性
2015/06/03 Javascript
探讨JavaScript语句的执行过程
2016/01/28 Javascript
详解Vue中localstorage和sessionstorage的使用
2017/12/22 Javascript
jQuery实现的响应鼠标移动方向插件用法示例【附源码下载】
2018/08/28 jQuery
vue-cli3中配置alias和打包加hash值操作
2020/09/04 Javascript
Python Socket编程入门教程
2014/07/11 Python
10种检测Python程序运行时间、CPU和内存占用的方法
2015/04/01 Python
Python引用模块和查找模块路径
2016/03/17 Python
解决python3 安装完Pycurl在import pycurl时报错的问题
2018/10/15 Python
Python 文本文件内容批量抽取实例
2018/12/10 Python
Python函数定义及传参方式详解(4种)
2019/03/18 Python
python实现删除列表中某个元素的3种方法
2020/01/15 Python
Pycharm操作Git及GitHub的步骤详解
2020/10/27 Python
Python 的 f-string 可以连接字符串与数字的原因解析
2021/02/20 Python
京东港澳售:京东直邮港澳台
2018/01/31 全球购物
纽约海:Sea New York
2018/11/04 全球购物
软件测试工程师面试问题精选
2016/10/28 面试题
会计自我鉴定范文
2013/10/06 职场文书
周年庆典邀请函范文
2014/01/23 职场文书
淘宝店铺营销方案
2014/02/13 职场文书
土地转让协议书
2014/04/15 职场文书
就业协议书盖章的注意事项
2014/09/28 职场文书
2015年社区纪检工作总结
2015/04/21 职场文书
导游词之江苏同里古镇
2019/11/18 职场文书
python中opencv实现图片文本倾斜校正
2021/06/11 Python
Golang使用Panic与Recover进行错误捕获
2022/03/22 Golang
Java 超详细讲解ThreadLocal类的使用
2022/04/07 Java/Android