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


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 相关文章推荐
JS date对象的减法处理实现代码
Dec 28 Javascript
js操作label给label赋值及取label的值示例
Nov 07 Javascript
js实现遮罩层划出效果是生成div而不是显示
Jul 29 Javascript
javascript实现iframe框架延时加载的方法
Oct 30 Javascript
jQuery获取DOM节点实例分析(2种方式)
Dec 15 Javascript
javascript瀑布流式图片懒加载实例解析与优化
Feb 23 Javascript
使用postMesssage()实现iframe跨域页面间的信息传递
Mar 29 Javascript
vue组件实例解析
Jan 10 Javascript
解决微信二次分享不显示摘要和图片的问题
Aug 18 Javascript
vue.js整合vux中的上拉加载下拉刷新实例教程
Jan 09 Javascript
vue组件详解之使用slot分发内容
Apr 09 Javascript
ES6之模版字符串的具体使用
May 17 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
日本十大最佳动漫,全都是二次元的神级作品
2019/10/05 日漫
php获取新浪微博数据API实例
2013/11/12 PHP
PHP的Yii框架的基本使用示例
2015/08/21 PHP
用Javascript数组处理多个字符串的连接问题
2009/08/20 Javascript
jQuery下通过$.browser来判断浏览器.
2011/04/05 Javascript
javascript表单验证使用示例(javascript验证邮箱)
2014/01/07 Javascript
图片翻转效果具体实现代码
2014/01/09 Javascript
Jquery中国地图热点效果-鼠标经过弹出提示层信息的简单实例
2014/02/12 Javascript
一个简单的jQuery计算器实现了连续计算功能
2014/07/21 Javascript
解决jquery版本冲突的有效方法
2014/09/02 Javascript
jquery动态改变div宽度和高度
2015/02/09 Javascript
详解JavaScript中的Unescape()和String() 函数
2015/11/09 Javascript
javascript实现的全国省市县无刷新多级关联菜单效果代码
2016/08/01 Javascript
JS中script标签defer和async属性的区别详解
2016/08/12 Javascript
详解堆的javascript实现方法
2016/11/29 Javascript
React-router中结合webpack实现按需加载实例
2017/05/25 Javascript
详解使用PM2管理nodejs进程
2017/10/24 NodeJs
详解promise.then,process.nextTick, setTimeout 以及 setImmediate的执行顺序
2018/11/21 Javascript
layer扩展打开/关闭动画的方法
2019/09/23 Javascript
Vue-cli4 配置 element-ui 按需引入操作
2020/09/11 Javascript
Python3实现从指定路径查找文件的方法
2015/05/22 Python
Python中拆分字符串的操作方法
2019/07/23 Python
Python3中urlencode和urldecode的用法详解
2019/07/23 Python
Django发送邮件和itsdangerous模块的配合使用解析
2019/08/10 Python
Python中最好用的命令行参数解析工具(argparse)
2019/08/23 Python
Django restful framework生成API文档过程详解
2020/11/12 Python
Javascript 高级手势使用介绍
2013/04/21 HTML / CSS
舞蹈教育学专业推荐信
2013/11/27 职场文书
绿色学校实施方案
2014/03/31 职场文书
新闻编辑专业自荐信
2014/07/02 职场文书
施工员岗位职责
2015/02/10 职场文书
特岗教师个人总结
2015/02/10 职场文书
2016年入党心得体会范文
2016/01/23 职场文书
Oracle设置DB、监听和EM开机启动的方法
2021/04/25 Oracle
springboot + mongodb 通过经纬度坐标匹配平面区域的方法
2021/11/01 MongoDB
Python保存并浏览用户的历史记录
2022/04/29 Python