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


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实现自定义对话框的代码
Jun 15 Javascript
firefox和IE系列的相关区别整理 以备后用
Dec 28 Javascript
推荐6款基于jQuery实现图片效果插件
Dec 07 Javascript
jQuery 翻页组件yunm.pager.js实现div局部刷新的思路
Aug 11 Javascript
Angular设置title信息解决SEO方面存在问题
Aug 19 Javascript
jQuery编写网页版2048小游戏
Jan 06 Javascript
Vue中fragment.js使用方法详解
Mar 09 Javascript
微信小程序自定义prompt组件步骤详解
Jun 12 Javascript
layui扩展上传组件模拟进度条的方法
Sep 23 Javascript
构建大型 Vue.js 项目的10条建议(小结)
Nov 14 Javascript
javascript前端和后台进行数据交互方法示例
Aug 07 Javascript
jquery实现鼠标悬浮弹出气泡提示框
Dec 23 jQuery
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 网上商城促销设计实例代码
2012/02/17 PHP
浅析PHP Socket技术
2013/08/02 PHP
递归删除一个节点以及该节点下的所有节点示例
2014/03/19 PHP
php实现断点续传大文件示例代码
2020/06/19 PHP
jQuery select的操作实现代码
2009/05/06 Javascript
打印json对象的内容及JSON.stringify函数应用
2013/03/29 Javascript
node.js中的http.response.writeHead方法使用说明
2014/12/14 Javascript
js密码强度检测
2016/01/07 Javascript
浅谈JS中的!=、== 、!==、===的用法和区别
2016/09/24 Javascript
mui框架移动开发初体验详解
2017/10/11 Javascript
记录一篇关于redux-saga的基本使用过程
2018/08/18 Javascript
Vue-CLI 3.X 部署项目至生产服务器的方法
2019/03/22 Javascript
vue 中Virtual Dom被创建的方法
2019/04/15 Javascript
vue 实现滚动到底部翻页效果(pc端)
2019/07/31 Javascript
JS开发自己的类库实例分析
2019/08/28 Javascript
vue远程加载sfc组件思路详解
2019/12/25 Javascript
Vue 解决在element中使用$notify在提示信息中换行问题
2020/11/11 Javascript
如何在Express4.x中愉快地使用async的方法
2020/11/18 Javascript
python实现通过shelve修改对象实例
2014/09/26 Python
python基础教程项目二之画幅好画
2018/04/02 Python
Python 最大概率法进行汉语切分的方法
2018/12/14 Python
Python编程在flask中模拟进行Restful的CRUD操作
2018/12/28 Python
使用pandas实现连续数据的离散化处理方式(分箱操作)
2019/11/22 Python
python十进制转二进制的详解
2020/02/07 Python
Python中使用filter过滤列表的一个小技巧分享
2020/05/02 Python
TensorFlow低版本代码自动升级为1.0版本
2021/02/20 Python
CSS3 画基本图形,圆形、椭圆形、三角形等
2016/09/20 HTML / CSS
web字体加载方案优化小结
2019/11/29 HTML / CSS
详解HTML5 Canvas标签及基本使用
2020/01/10 HTML / CSS
采用专利算法搜索最廉价的机票:CheapAir
2016/09/10 全球购物
俄罗斯三星品牌商店:Samsungstore
2020/04/05 全球购物
高三英语教学计划
2015/01/23 职场文书
新学期新寄语,献给新生们!
2019/11/15 职场文书
浅谈Mysql多表连接查询的执行细节
2021/04/24 MySQL
python利用while求100内的整数和方式
2021/11/07 Python
Python可变与不可变数据和深拷贝与浅拷贝
2022/04/06 Python