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


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学习基础知识小结
Nov 25 Javascript
使用Jquery获取带特殊符号的ID 标签的方法
Apr 30 Javascript
从零学jquery之如何使用回调函数
May 16 Javascript
JavaScript编程中布尔对象的基本使用
Oct 25 Javascript
Javascript之Math对象详解
Jun 07 Javascript
vuejs绑定class和style样式
Apr 11 Javascript
基于jQuery的$.getScript方法去加载javaScript文档解析
Nov 08 jQuery
QQ跳转支付宝并自动领红包脚本(最新)
Jun 22 Javascript
记一次react前端项目打包优化的方法
Mar 30 Javascript
JS错误处理与调试操作实例分析
Apr 13 Javascript
详解React 元素渲染
Jul 07 Javascript
.netcore+vue 实现压缩文件下载功能
Sep 24 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实现的获取网页中的图片并保存到本地的代码
2010/01/05 PHP
php 实现进制转换(二进制、八进制、十六进制)互相转换实现代码
2010/10/22 PHP
ucenter通信原理分析
2015/01/09 PHP
WordPress分页伪静态加html后缀
2016/06/08 PHP
PHP匿名函数(闭包函数)详解
2019/03/22 PHP
Mootools 1.2教程 Fx.Morph、Fx选项和Fx事件
2009/09/15 Javascript
用jquery设置按钮的disabled属性的实现代码
2010/11/28 Javascript
改变文件域的样式实现思路同时兼容ie、firefox
2013/10/23 Javascript
js判读浏览器是否支持html5的canvas的代码
2013/11/18 Javascript
JavaScript indexOf方法入门实例(计算指定字符在字符串中首次出现的位置)
2014/10/17 Javascript
探讨AngularJs中ui.route的简单应用
2016/11/16 Javascript
JS针对Array的各种操作汇总
2016/11/29 Javascript
Vue.js常用指令的使用小结
2017/06/23 Javascript
element ui里dialog关闭后清除验证条件方法
2018/02/26 Javascript
vue.js将时间戳转化为日期格式的实现代码
2018/06/05 Javascript
JQuery属性操作与循环用法示例
2019/05/15 jQuery
解决layui动态添加的元素click等事件触发不了的问题
2019/09/20 Javascript
JS如何实现手机端输入验证码效果
2020/05/13 Javascript
js在HTML的三种引用方式详解
2020/08/29 Javascript
python多重继承新算法C3介绍
2014/09/28 Python
Python实现遍历windows所有窗口并输出窗口标题的方法
2015/03/13 Python
Windows下用py2exe将Python程序打包成exe程序的教程
2015/04/08 Python
使用Python的Scrapy框架十分钟爬取美女图
2016/12/26 Python
Django中redis的使用方法(包括安装、配置、启动)
2018/02/21 Python
TensorFlow2.1.0安装过程中setuptools、wrapt等相关错误指南
2020/04/08 Python
在Ubuntu 20.04中安装Pycharm 2020.1的图文教程
2020/04/30 Python
HTML5 canvas基本绘图之填充样式实现
2016/06/27 HTML / CSS
英国领先的办公用品供应商:Viking
2016/08/01 全球购物
岗位职责的含义
2013/11/17 职场文书
本科毕业生的求职信范文
2013/11/20 职场文书
大学生职业生涯规划范文——找准自我,定位人生
2014/01/23 职场文书
社团活动总结范文
2014/04/26 职场文书
节约用水标语
2014/06/11 职场文书
优秀党员主要事迹材料
2015/11/04 职场文书
高一数学教学反思
2016/02/18 职场文书
tomcat的catalina.out日志按自定义时间格式进行分割的操作方法
2022/04/02 Servers