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


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实现鼠标滑过遮罩并高亮显示效果
Jul 16 Javascript
JavaScript charCodeAt方法入门实例(用于取得指定位置字符的Unicode编码)
Oct 17 Javascript
javascript弹出页面回传值的方法
Jan 28 Javascript
Javascript writable特性介绍
Feb 27 Javascript
JSON字符串和对象之间的转换详解
May 26 Javascript
jquery判断checkbox是否选中及改变checkbox状态的实现方法
May 26 Javascript
jquery获取复选框checkbox的值的简单实现方法
May 26 Javascript
vue2.0 自定义日期时间过滤器
Jun 07 Javascript
微信小程序利用Canvas绘制图片和竖排文字详解
Jun 25 Javascript
jQuery zTree树插件的使用教程
Aug 16 jQuery
layui table去掉右侧滑动条的实现方法
Sep 05 Javascript
jQuery高级编程之js对象、json与ajax用法实例分析
Nov 01 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 中dirname(_file_)讲解
2007/03/18 PHP
php+memcache实现的网站在线人数统计代码
2014/07/04 PHP
php+mysqli预处理技术实现添加、修改及删除多条数据的方法
2015/01/30 PHP
在win系统安装配置 Memcached for PHP 5.3 图文教程
2015/03/03 PHP
php利用嵌套数组拼接与解析json的方法
2017/02/07 PHP
php中通用的excel导出方法实例
2017/12/30 PHP
javascript 面向对象思想 附源码
2009/07/07 Javascript
jquery如何改变html标签的样式(两种实现方法)
2013/01/16 Javascript
JQuery分别取得每行最后一列和最后一行的示例代码
2013/08/18 Javascript
jQuery中unbind()方法用法实例
2015/01/19 Javascript
辨析JavaScript中的Undefined类型与null类型
2016/05/26 Javascript
基于jquery日历价格、库存等设置插件
2020/07/05 jQuery
JS基于贪心算法解决背包问题示例
2017/11/27 Javascript
详解vue-cli快速构建vue应用并实现webpack打包
2017/12/13 Javascript
vue实现动态显示与隐藏底部导航的方法分析
2019/02/11 Javascript
egg.js的基本使用和调用数据库的方法示例
2019/05/18 Javascript
微信小程序实现单个卡片左滑显示按钮并防止上下滑动干扰功能
2019/12/06 Javascript
JS实现碰撞检测效果
2020/03/12 Javascript
[57:36]DOTA2-DPC中国联赛 正赛 SAG vs CDEC BO3 第三场 2月1日
2021/03/11 DOTA
python实现的二叉树算法和kmp算法实例
2014/04/25 Python
详解django三种文件下载方式
2018/04/06 Python
使用Python+wxpy 找出微信里把你删除的好友实例
2019/02/21 Python
django迁移数据库错误问题解决
2019/07/29 Python
python生成13位或16位时间戳以及反向解析时间戳的实例
2020/03/03 Python
Python使用Excel将数据写入多个sheet
2020/05/16 Python
Python Request类源码实现方法及原理解析
2020/08/17 Python
详解快速开发基于 HTML5 网络拓扑图应用
2018/01/08 HTML / CSS
中专毕业生自我鉴定
2013/11/21 职场文书
小学二年级评语
2014/04/21 职场文书
中学优秀班主任事迹材料
2014/05/01 职场文书
公司口号大全
2014/06/11 职场文书
机关单位工作失职检讨书
2014/11/20 职场文书
小学教师年度个人总结
2015/02/05 职场文书
毕业晚宴祝酒词
2015/08/11 职场文书
小程序教您怎样你零成本推广获取数万用户的方法
2019/07/30 职场文书
分享15个Webpack实用的插件!!!
2021/03/31 Javascript