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 相关文章推荐
IE6背景图片不缓存问题解决方案及图片使用策略多个方法小结
May 14 Javascript
纯Javascript实现Windows 8 Metro风格实现
Oct 15 Javascript
js实现input框文字动态变换显示效果
Aug 19 Javascript
js生成随机数的方法实例
Oct 16 Javascript
深入理解关于javascript中apply()和call()方法的区别
Apr 12 Javascript
js 基础篇必看(点击事件轮播图的简单实现)
Aug 20 Javascript
jQuery Collapse1.1.0折叠插件简单使用
Aug 28 jQuery
vue中如何实现后台管理系统的权限控制的方法示例
Sep 19 Javascript
一个因@click.stop引发的bug的解决
Jan 08 Javascript
浅谈Vue的响应式原理
May 30 Javascript
基于Proxy的小程序状态管理实现
Jun 14 Javascript
使用React代码动态生成栅格布局的方法
May 24 Javascript
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
PHP 高级课程笔记 面向对象
2009/06/21 PHP
深入探讨:Nginx 502 Bad Gateway错误的解决方法
2013/06/03 PHP
php版银联支付接口开发简明教程
2016/10/14 PHP
PHP实现绘制二叉树图形显示功能详解【包括二叉搜索树、平衡树及红黑树】
2017/11/16 PHP
关于实现代码语法标亮 dp.SyntaxHighlighter
2007/02/02 Javascript
JsDom 编程小结
2011/08/09 Javascript
js+css实现的简单易用兼容好的分页
2013/12/30 Javascript
用jQuery toggleClass 实现鼠标移上变色
2014/05/14 Javascript
JavaScript strike方法入门实例(给字符串加上删除线)
2014/10/17 Javascript
jquery实现网页的页面平滑滚动效果代码
2015/11/02 Javascript
基于Jquery代码实现手风琴菜单
2015/11/19 Javascript
JavaScript之json_动力节点Java学院整理
2017/06/29 Javascript
基于jquery.page.js实现分页效果
2018/01/01 jQuery
微信小程序 如何引入外部字体库iconfont的图标
2018/01/31 Javascript
解决vue build打包之后首页白屏的问题
2018/03/06 Javascript
layerUI下的绑定事件实例代码
2018/08/17 Javascript
JS实现利用闭包判断Dom元素和滚动条的方向示例
2019/08/26 Javascript
微信小程序 this.triggerEvent()的具体使用
2019/12/10 Javascript
React Native中ScrollView组件轮播图与ListView渲染列表组件用法实例分析
2020/01/06 Javascript
jQuery+ajax实现文件上传功能
2020/12/22 jQuery
Python 常用 PEP8 编码规范详解
2017/01/22 Python
一文总结学习Python的14张思维导图
2017/10/17 Python
【python】matplotlib动态显示详解
2019/04/11 Python
关于python 跨域处理方式详解
2020/03/28 Python
一款基于css3的列表toggle特效实例教程
2015/01/04 HTML / CSS
HTML5离线缓存Manifest是什么
2016/03/09 HTML / CSS
Zooplus葡萄牙:欧洲领先的网上宠物商店
2018/07/01 全球购物
abstract 可以和 virtual 一起使用吗?可以和 override 一起使用吗?
2012/10/15 面试题
如何进行有效的自我评价
2013/09/27 职场文书
路政管理专业推荐信
2013/11/11 职场文书
新闻简讯格式及范文
2015/07/22 职场文书
怎样写好演讲稿题目?
2019/08/21 职场文书
CSS中em的正确打开方式详解
2021/04/08 HTML / CSS
Java基于Dijkstra算法实现校园导游程序
2022/03/17 Java/Android
spring cloud eureka 服务启动失败的原因分析及解决方法
2022/03/17 Java/Android
Android开发 使用文件储存的方式保存QQ密码
2022/04/24 Java/Android