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 相关文章推荐
JavaScript 语言的递归编程
May 18 Javascript
使用JQuery快速实现Tab的AJAX动态载入(实例讲解)
Dec 11 Javascript
js中跨域方法原理详解
Jul 19 Javascript
JS中使用DOM来控制HTML元素
Jul 31 Javascript
纯javaScript、jQuery实现个性化图片轮播【推荐】
Jan 08 Javascript
javascript 组合按键事件监听实现代码
Feb 21 Javascript
VUE实现日历组件功能
Mar 13 Javascript
weui框架实现上传、预览和删除图片功能代码
Aug 24 Javascript
解读vue生成的文件目录结构及说明
Nov 27 Javascript
vue视图不更新情况详解
May 16 Javascript
vue-cli点击实现全屏功能
Mar 07 Javascript
JavaScript arguments.callee作用及替换方案详解
Sep 02 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+AJAX实现无刷新注册(带用户名实时检测)
2006/12/02 PHP
php中有关合并某一字段键值相同的数组合并的改进
2015/03/10 PHP
jquery遍历input取得input的name
2009/04/27 Javascript
向大师们学习Javascript(视频与PPT)
2009/12/27 Javascript
Javascript引用指针使用介绍
2012/11/07 Javascript
jquery 获取标签名(tagName)示例代码
2013/07/11 Javascript
javascript禁止超链接跳转的方法
2016/02/02 Javascript
js事件驱动机制 浏览器兼容处理方法
2016/07/23 Javascript
react实现菜单权限控制的方法
2017/12/11 Javascript
jQuery第一次运行页面默认触发点击事件的实例
2018/01/10 jQuery
js Array.slice的8种不同用法示例
2019/07/10 Javascript
在vue中使用防抖和节流,防止重复点击或重复上拉加载实例
2019/11/13 Javascript
微信小程序关键字变色实现代码实例
2019/12/13 Javascript
js的Object.assign用法示例分析
2020/03/05 Javascript
React组件设计模式之组合组件应用实例分析
2020/04/29 Javascript
浅谈Vuex的this.$store.commit和在Vue项目中引用公共方法
2020/07/24 Javascript
浅谈JavaScript 声明提升
2020/09/14 Javascript
VUE实现吸底按钮
2021/03/04 Vue.js
Python获取当前时间的方法
2014/01/14 Python
Python切片用法实例教程
2014/09/08 Python
在Django的URLconf中使用多个视图前缀的方法
2015/07/18 Python
对Python 获取类的成员变量及临时变量的方法详解
2019/01/22 Python
基于Python中Remove函数的用法讨论
2020/12/11 Python
Banana Republic欧盟:美国都市简约风格的代表品牌
2018/05/09 全球购物
联想西班牙官网:Lenovo西班牙
2018/08/28 全球购物
波兰化妆品和护肤品购物网站:eKobieca
2019/08/30 全球购物
荷兰家电销售网站:Welhof
2020/12/08 全球购物
农药学硕士毕业生自荐信
2013/09/25 职场文书
大学毕业生文采飞扬的自我鉴定
2013/12/03 职场文书
简单英文演讲稿
2014/01/01 职场文书
励志演讲稿300字
2014/08/21 职场文书
股份合作协议书
2014/09/10 职场文书
优秀班主任先进事迹材料
2014/12/16 职场文书
会议开幕致辞怎么写
2016/03/03 职场文书
为什么MySQL分页用limit会越来越慢
2021/07/25 MySQL
Python中异常处理用法
2021/11/27 Python