编程 Javascript

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

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>

以上这篇仿京东快报向上滚动的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持三水点靠木。

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

- Author -

璁璁那~年

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

javascript 函数参数限制说明

Nov 19 Javascript

js 控制图片大小核心讲解

Oct 09 Javascript

Angularjs material 实现搜索框功能

Mar 08 Javascript

js如何准确获取当前页面url网址信息

Sep 13 Javascript

JS中artdialog弹出框控件之提交表单思路详解

Apr 18 Javascript

JavaScript 继承详解（五）

Oct 11 Javascript

jQuery+ajax的资源回收处理机制分析

Jan 07 Javascript

使用async、enterproxy控制并发数量的方法详解

Jan 02 Javascript

vue+webpack实现异步组件加载的方法

Feb 03 Javascript

VUE2.0中Jsonp的使用方法

May 22 Javascript

js实现的在本地预览图片功能示例

Nov 09 Javascript

JavaScript 自定义html元素鼠标右键菜单功能

Dec 02 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