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


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 屏蔽一个区域内的所有元素,禁止输入
Oct 22 Javascript
js实现表格字段排序
Feb 19 Javascript
jQuery中after()方法用法实例
Dec 25 Javascript
jquery马赛克拼接翻转效果代码分享
Aug 24 Javascript
轻松掌握JavaScript策略模式
Aug 25 Javascript
jquery 中toggle的2种用法详解(推荐)
Sep 02 Javascript
angularjs ocLazyLoad分步加载js文件实例
Jan 17 Javascript
javascript防篡改对象实例详解
Apr 10 Javascript
javascript编程实现栈的方法详解【经典数据结构】
Apr 11 Javascript
浅谈React中的元素、组件、实例和节点
Feb 27 Javascript
JSON获取属性值方法代码实例
Jun 30 Javascript
Ant Design Pro 之 ProTable使用操作
Oct 31 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/12/25 PHP
PHP句法规则详解 入门学习
2011/11/09 PHP
PHP中如何实现常用邮箱的基本判断
2014/01/07 PHP
php实现事件监听与触发的方法
2014/11/21 PHP
php实现ip白名单黑名单功能
2015/03/12 PHP
WordPress中获取指定分类及其子分类下的文章数目
2015/12/31 PHP
PHP登录验证码的实现与使用方法
2016/07/07 PHP
Git命令之分支详解
2021/03/02 PHP
JAVASCRIPT keycode总结
2009/02/04 Javascript
使用jQuery操作Cookies的实现代码
2011/10/09 Javascript
用JQuery在网页中实现分隔条功能的代码
2012/08/09 Javascript
关于jquery input textare 事件绑定及用法学习
2013/04/03 Javascript
jQuery实现打开页面渐现效果示例
2016/07/27 Javascript
JavaScript之排序函数_动力节点Java学院整理
2017/06/30 Javascript
jqgrid实现简单的单行编辑功能
2017/09/30 Javascript
用Webpack构建Vue项目的实践
2017/11/07 Javascript
浅谈Vue.js 组件中的v-on绑定自定义事件理解
2017/11/17 Javascript
Vue实现左右菜单联动实现代码
2018/08/12 Javascript
JS正则表达式验证端口范围(0-65535)
2020/01/06 Javascript
解决vue初始化项目一直停在downloading template的问题
2020/11/09 Javascript
python爬虫实战之爬取京东商城实例教程
2017/04/24 Python
python字典操作实例详解
2017/11/16 Python
Python3爬虫学习入门教程
2018/12/11 Python
Python帮你微信头像任意添加装饰别再@微信官方了
2019/09/25 Python
python TK库简单应用(实时显示子进程输出)
2019/10/29 Python
Keras在训练期间可视化训练误差和测试误差实例
2020/06/16 Python
Python如何执行系统命令
2020/09/23 Python
Belle Maison倍美丛官网:日本千趣会旗下邮购网站
2016/07/22 全球购物
驴妈妈旅游网:中国新型的B2C旅游电子商务网站
2016/08/16 全球购物
中专自我鉴定
2014/02/05 职场文书
产假请假条
2014/04/10 职场文书
煤矿安全生产标语
2014/06/06 职场文书
小学生作文批改评语
2014/12/25 职场文书
合作与交流自我评价
2015/03/09 职场文书
音乐课外活动总结
2015/05/09 职场文书
婚礼答谢词范文
2015/09/29 职场文书