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 html 静态页面传参数
Apr 10 Javascript
JqGrid web打印实现代码
May 31 Javascript
不用锚点也可以平滑滚动到页面的指定位置实现代码
May 08 Javascript
javaScript 动态访问JSon元素示例代码
Aug 30 Javascript
javascript 四十条常用技巧大全
Sep 09 Javascript
微信小程序前端源码逻辑和工作流
Sep 25 Javascript
javascript数组去重方法分析
Dec 15 Javascript
Vue中的数据监听和数据交互案例解析
Jul 12 Javascript
使用async、enterproxy控制并发数量的方法详解
Jan 02 Javascript
微信网页登录逻辑与实现方法
Apr 29 Javascript
vue中上传视频或图片或图片和文字一起到后端的解决方法
Dec 01 Javascript
JS面向对象编程——ES6 中class的继承用法详解
Mar 03 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
历史证明,懒惰才是推动科学发展技术进步的动力
2021/03/02 无线电
为查询结果建立向后/向前按钮
2006/10/09 PHP
PHP下10件你也许并不了解的事情
2008/09/11 PHP
PHP学习笔记之二
2011/01/17 PHP
PHP中实现Bloom Filter算法
2015/03/30 PHP
PHP获取访问页面HTTP状态码的实现代码
2016/11/03 PHP
swoole和websocket简单聊天室开发
2017/11/18 PHP
thinkPHP5框架路由常用知识点汇总
2019/09/15 PHP
php pdo连接数据库操作示例
2019/11/18 PHP
Aster vs KG BO3 第三场2.19
2021/03/10 DOTA
JavaScript中的null和undefined解析
2012/04/14 Javascript
JavaScript高级程序设计 阅读笔记(十三) js定义类或对象
2012/08/14 Javascript
用JS提交参数创建form表单在FireFox中遇到的问题
2013/01/16 Javascript
js自动生成的元素与页面原有元素发生堆叠的解决方法
2014/09/04 Javascript
使用 JavaScript 进行函数式编程 (一) 翻译
2015/10/02 Javascript
网页中右键功能的实现方法之contextMenu的使用
2017/02/20 Javascript
微信小程序App生命周期详解
2018/01/31 Javascript
浅谈VUE监听窗口变化事件的问题
2018/02/24 Javascript
vue-router两种模式区别及使用注意事项详解
2019/08/01 Javascript
[01:51]历届DOTA2国际邀请赛举办地回顾 TI9落地上海
2018/08/26 DOTA
python的即时标记项目练习笔记
2014/09/18 Python
python merge、concat合并数据集的实例讲解
2018/04/12 Python
使用numba对Python运算加速的方法
2018/10/15 Python
Python实现微信中找回好友、群聊用户撤回的消息功能示例
2019/08/23 Python
python 实现单通道转3通道
2019/12/03 Python
thinkphp5 路由分发原理
2021/03/18 PHP
全球最大的跑步用品商店:Road Runner Sports
2016/09/11 全球购物
顶级宝石首饰网络零售商:Angara
2016/10/25 全球购物
全球最大的在线橄榄球商店:Lovell Rugby
2018/05/20 全球购物
澳大利亚运动鞋零售商:The Athlete’s Foot
2018/11/04 全球购物
运动会广播稿200字
2014/01/15 职场文书
《桂林山水》教学反思
2014/02/08 职场文书
国际商贸专业自荐信
2014/06/09 职场文书
运动会演讲稿100字
2014/08/25 职场文书
应届生求职自荐信范文
2015/03/04 职场文书
2016学校元旦晚会经典开场白台词
2015/12/03 职场文书