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


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中为String对象添加trim,ltrim,rtrim方法
Sep 22 Javascript
让FireFox支持innerText的实现代码
Dec 01 Javascript
jquery中使用$(#form).submit()重写提交表单无效原因分析及解决
Mar 25 Javascript
JS应用正则表达式转换大小写示例
Sep 18 Javascript
SublimeText自带格式化代码功能之reindent
Dec 27 Javascript
Angular 根据 service 的状态更新 directive
Apr 03 Javascript
浅谈angularjs module返回对象的坑(推荐)
Oct 21 Javascript
浅谈JS函数节流防抖
Oct 18 Javascript
Express下采用bcryptjs进行密码加密的方法
Feb 07 Javascript
Vue项目中最新用到的一些实用小技巧
Nov 06 Javascript
vue使用原生swiper代码实例
Feb 05 Javascript
js操作两个json数组合并、去重,以及删除某一项元素
Sep 22 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中修改浏览器的User-Agent来伪装你的浏览器和操作系统
2011/07/29 PHP
PHP empty函数报错解决办法
2014/03/06 PHP
ThinkPHP模板范围判断输出In标签与Range标签用法详解
2014/06/30 PHP
PHP连接MySQL数据库三种实现方法
2020/12/10 PHP
javascript 写类方式之十
2009/07/05 Javascript
js parentElement和offsetParent之间的区别
2010/03/23 Javascript
推荐30个新鲜出炉的精美 jQuery 效果
2012/03/26 Javascript
JS中setTimeout()的用法详解
2013/04/14 Javascript
Jquery利用mouseenter和mouseleave实现鼠标经过弹出层且可以点击
2014/02/12 Javascript
JavaScript操作URL的相关内容集锦
2015/10/29 Javascript
AngularJS删除路由中的#符号的方法
2016/09/20 Javascript
关于vue.js过渡css类名的理解(推荐)
2017/04/10 Javascript
lhgcalendar时间插件限制只能选择三个月的实现方法
2017/07/03 Javascript
webpack学习教程之前端性能优化总结
2017/12/05 Javascript
Vue-cropper 图片裁剪的基本原理及思路讲解
2018/04/17 Javascript
解决vue初始化项目时,一直卡在Project description上的问题
2019/10/31 Javascript
Jquery如何使用animation动画效果改变背景色的代码
2020/07/20 jQuery
使用webpack5从0到1搭建一个react项目的实现步骤
2020/12/16 Javascript
python利用urllib和urllib2访问http的GET/POST详解
2017/09/27 Python
python爬虫爬取某站上海租房图片
2018/02/04 Python
python实现银联支付和支付宝支付接入
2019/05/07 Python
python安装numpy和pandas的方法步骤
2019/05/27 Python
Python学习笔记之文件的读写操作实例分析
2019/08/07 Python
对Python获取屏幕截图的4种方法详解
2019/08/27 Python
用Python画一个LinkinPark的logo代码实例
2019/09/10 Python
python多线程高级锁condition简单用法示例
2019/11/07 Python
Python稀疏矩阵及参数保存代码实现
2020/04/18 Python
3D动画《斗罗大陆》上线当日播放过亿
2021/03/16 国漫
北美最大的零售退货翻新商:VIP Outlet
2019/11/21 全球购物
分布式数据库需要考虑哪些问题
2013/12/08 面试题
中科方德软件测试面试题
2016/04/21 面试题
自我评价格式
2014/01/06 职场文书
办公室综合文员岗位职责范本
2014/02/13 职场文书
党支部公开承诺践诺书
2014/03/28 职场文书
丧事主持词大全
2014/04/02 职场文书
2019年警察入党转正申请书最新范文
2019/09/03 职场文书