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


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 相关文章推荐
javascript 类定义的4种方法
Sep 12 Javascript
使用jQuery解决IE与FireFox下createElement方法的差异
Nov 14 Javascript
javascript实现给定半径求出圆的面积
Jun 26 Javascript
使用OpenLayers3 添加地图鼠标右键菜单
Dec 29 Javascript
DIV随滚动条滚动而滚动的实现代码【推荐】
Apr 12 Javascript
详解javascript立即执行函数表达式IIFE
Feb 13 Javascript
webpack配置之后端渲染详解
Oct 26 Javascript
vue scroller返回页面记住滚动位置的实例代码
Jan 29 Javascript
Vue.js+Layer表格数据绑定与实现更新的实例
Mar 07 Javascript
大转盘抽奖小程序版 转盘抽奖网页版
Apr 16 Javascript
JavaScript定时器设置、使用与倒计时案例详解
Jul 08 Javascript
微信小程序实现点击空白隐藏的方法示例
Aug 13 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生成随机数或者字符串的代码
2008/09/05 PHP
深入file_get_contents与curl函数的详解
2013/06/25 PHP
thinkphp常见路径用法分析
2014/12/02 PHP
php使用Image Magick将PDF文件转换为JPG文件的方法
2015/04/01 PHP
PHP利用Mysql锁解决高并发的方法
2018/09/04 PHP
document 和 document.all 分别什么时候用
2006/06/22 Javascript
js 效率组装字符串 StringBuffer
2009/12/23 Javascript
jquery 日期控件datepicker属性详细解析
2013/11/08 Javascript
对new functionName()定义一个函数的理解
2014/05/22 Javascript
js类定义函数时用prototype与不用的区别示例介绍
2014/06/10 Javascript
jquery ezUI 双击行记录弹窗查看明细的实现方法
2016/06/01 Javascript
BootStrap学习系列之Bootstrap Typeahead 组件实现百度下拉效果(续)
2016/07/07 Javascript
基于js里调用函数时,函数名带括号和不带括号的区别
2016/07/28 Javascript
jquery层级选择器(匹配父元素下的子元素实现代码)
2016/09/05 Javascript
Bootstrap table 定制提示语的加载过程
2017/02/20 Javascript
vue实现app页面切换动画效果实例
2017/05/23 Javascript
jQuery常用选择器详解
2017/07/17 jQuery
Vue组件之Tooltip的示例代码
2017/10/18 Javascript
微信小程序使用radio显示单选项功能【附源码下载】
2017/12/11 Javascript
vue移动端UI框架实现QQ侧边菜单组件
2018/03/09 Javascript
vue实现动态添加数据滚动条自动滚动到底部的示例代码
2018/07/06 Javascript
微信小程序自定义select下拉选项框组件的实现代码
2018/08/28 Javascript
浅析Proxy可以优化vue的数据监听机制问题及实现思路
2018/11/29 Javascript
详解关于React-Router4.0跳转不置顶解决方案
2019/05/10 Javascript
Vue+Element UI+vue-quill-editor富文本编辑器及插入图片自定义
2019/08/20 Javascript
详解vue中多个有顺序要求的异步操作处理
2019/10/29 Javascript
Python找出最小的K个数实例代码
2018/01/04 Python
python 数据生成excel导出(xlwt,wlsxwrite)代码实例
2019/08/23 Python
Python中 Global和Nonlocal的用法详解
2020/01/20 Python
受外贸欢迎的美国主机:BlueHost
2017/05/16 全球购物
英语简历自我评价
2014/01/26 职场文书
社区母亲节活动记录
2014/03/06 职场文书
新农村建设汇报材料
2014/08/15 职场文书
2015庆祝七一建党节94周年活动总结
2015/03/20 职场文书
2015年保育员个人工作总结
2015/05/13 职场文书
只用40行Python代码就能写出pdf转word小工具
2021/05/31 Python