jQuery实现简单的间隔向上滚动效果


Posted in Javascript onMarch 09, 2015

本文实例讲述了jQuery实现简单的间隔向上滚动效果的方法。分享给大家供大家参考。具体实现方法如下:

<script type="text/javascript" src="js/jquery-1.4.4.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="#" target="_blank">aaaaaa</a></li>

  <li><a href="#" target="_blank">bbbbbb</a></li>

  <li><a href="#" target="_blank">cccccc</a></li>

  <li><a href="#" target="_blank">dddddd</a></li>

  <li><a href="#" 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>

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
使用onbeforeunload属性后的副作用
Mar 08 Javascript
jQuery替换字符串(实例代码)
Nov 13 Javascript
javascript跨域方法、原理以及出现问题解决方法(详解)
Aug 06 Javascript
仿Angular Bootstrap TimePicker创建分钟数-秒数的输入控件
Jul 01 Javascript
卸载安装Node.js与npm过程详解
Aug 15 Javascript
javascript的函数劫持浅析
Sep 26 Javascript
兼容浏览器的js事件绑定函数(详解)
May 09 Javascript
基于JavaScript实现五子棋游戏
Aug 26 Javascript
React组件refs的使用详解
Feb 09 Javascript
Jquery和CSS实现选择框重置按钮功能
Nov 08 jQuery
小程序中canvas的drawImage方法参数使用详解
Jul 04 Javascript
JQuery中DOM节点的操作与访问方法实例分析
Dec 23 jQuery
jQuery实现鼠标划过展示大图的方法
Mar 09 #Javascript
javascript 对象数组根据对象object key的值排序
Mar 09 #Javascript
jquery插件corner实现圆角边框的方法
Mar 09 #Javascript
jQuery中animate用法实例分析
Mar 09 #Javascript
深入探讨JavaScript String对象
Mar 09 #Javascript
jQuery实现冻结表头的方法
Mar 09 #Javascript
jQuery焦点控制图层展示延迟隐藏的方法
Mar 09 #Javascript
You might like
Netflix将与CLAMP、乙一以及冲方丁等6名知名制作人合伙展开原创动画计划!
2020/03/06 日漫
php学习笔记之 函数声明(二)
2011/06/09 PHP
php反射应用示例
2014/02/25 PHP
PHP递归调用数组值并用其执行指定函数的方法
2015/04/01 PHP
jquery 将disabled的元素置为enabled的三种方法
2009/07/25 Javascript
JavaScript 弹出窗体点击按钮返回选择数据的实现
2010/04/01 Javascript
由JavaScript中call()方法引发的对面向对象继承机制call的思考
2011/09/12 Javascript
js获取客户端外网ip的简单实例
2013/11/21 Javascript
JQuery中模拟image的ajaxPrefilter与ajaxTransport处理
2015/06/19 Javascript
javascript单页面手势滑屏切换原理详解
2016/03/21 Javascript
轻松掌握jQuery中wrap()与unwrap()函数的用法
2016/05/24 Javascript
利用D3.js实现最简单的柱状图示例代码
2016/12/09 Javascript
JS实现图片垂直居中显示小结
2016/12/13 Javascript
基于Angularjs+mybatis实现二级评论系统(仿简书)
2017/02/13 Javascript
详解如何使用webpack在vue项目中写jsx语法
2017/11/08 Javascript
Vue 中的compile操作方法
2018/02/26 Javascript
JavaScript实现浅拷贝与深拷贝的方法分析
2018/07/05 Javascript
JS实现的新闻列表自动滚动效果示例
2019/01/30 Javascript
jquery绑定事件 bind和on的用法与区别分析
2020/05/22 jQuery
VUE 实现element upload上传图片到阿里云
2020/08/12 Javascript
jquery实现拖拽添加元素功能
2020/12/01 jQuery
[01:00:53]OG vs IG 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
[33:28]完美世界DOTA2联赛PWL S3 PXG vs GXR 第三场 12.19
2020/12/24 DOTA
常用python数据类型转换函数总结
2014/03/11 Python
Python使用面向对象方式创建线程实现12306售票系统
2015/12/24 Python
Python用 KNN 进行验证码识别的实现方法
2018/02/06 Python
Django 使用logging打印日志的实例
2018/04/28 Python
python 实现提取某个索引中某个时间段的数据方法
2019/02/01 Python
浅析python中while循环和for循环
2019/11/19 Python
解析pip安装第三方库但PyCharm中却无法识别的问题及PyCharm安装第三方库的方法教程
2020/03/10 Python
CSS3教程(8):CSS3透明度指南
2009/04/02 HTML / CSS
毕业生求职简历的自我评价
2013/10/07 职场文书
电气专业应届生求职信
2013/11/01 职场文书
咖啡厅创业计划书范本
2014/01/22 职场文书
《月球之谜》教学反思
2014/04/10 职场文书
2019最新版股权转让及委托持股协议书范本
2019/08/07 职场文书