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嵌套函数及闭包
Nov 09 Javascript
autoIMG 基于jquery的图片自适应插件代码
Mar 12 Javascript
jQuery控制图片的hover效果(smartRollover.js)
Mar 18 Javascript
Jquery多选下拉列表插件jquery multiselect功能介绍及使用
May 24 Javascript
javascript动态控制服务器控件实例
Sep 05 Javascript
javascript封装简单实现方法
Aug 11 Javascript
微信小程序 地图map详解及简单实例
Jan 10 Javascript
通过jsonp获取json数据实现AJAX跨域请求
Jan 22 Javascript
js按条件生成随机json:randomjson实现方法
Apr 07 Javascript
vue跨域解决方法
Oct 15 Javascript
React组件重构之嵌套+继承及高阶组件详解
Jul 19 Javascript
关于vue状态过渡transition不起作用的原因解决
Apr 09 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
Apache+php+mysql在windows下的安装与配置图解(最新版)
2008/11/30 PHP
php数组函数序列之ksort()对数组的元素键名进行升序排序,保持索引关系
2011/11/02 PHP
php使用socket post数据到其它web服务器的方法
2015/06/02 PHP
php获取是星期几的的一些常用姿势
2019/12/15 PHP
Javascript调试工具(下载)
2007/01/09 Javascript
半角全角相互转换的js函数
2009/10/16 Javascript
JS中处理与当前时间间隔的函数代码
2012/05/23 Javascript
jquery表格内容筛选实现思路及代码
2013/04/16 Javascript
得到form下的所有的input的js代码
2013/11/07 Javascript
js 左右悬浮对联广告特效代码
2014/12/12 Javascript
函数window.open实现关闭所有的子窗口
2015/08/03 Javascript
js图片轮播手动切换效果
2015/11/10 Javascript
javascript闭包概念简单解析(推荐)
2016/06/03 Javascript
浅谈JS正则表达式的RegExp对象和括号的使用
2016/07/28 Javascript
不使用script导入js文件的几种方法
2016/10/27 Javascript
分享vue.js devtools遇到一系列问题
2017/10/24 Javascript
如何重置vue打印变量的显示方式
2017/12/06 Javascript
[04:09]显微镜下的DOTA2第十二期—NaVi美如画的团战
2014/06/23 DOTA
[02:17]2016完美“圣”典风云人物:Sccc专访
2016/12/03 DOTA
python编程-将Python程序转化为可执行程序[整理]
2007/04/09 Python
在Python中操作字符串之startswith()方法的使用
2015/05/20 Python
Python实现删除文件中含“指定内容”的行示例
2017/06/09 Python
python 列表递归求和、计数、求最大元素的实例
2018/11/28 Python
对django views中 request, response的常用操作详解
2019/07/17 Python
Python项目 基于Scapy实现SYN泛洪攻击的方法
2019/07/23 Python
北京麒麟网信息技术有限公司网络游戏测试面试题
2013/09/28 面试题
广州足迹信息技术有限公司Java软件工程师试题
2014/02/15 面试题
Servlet如何得到服务器的信息
2015/12/22 面试题
普通党员四风问题对照检查材料
2014/09/27 职场文书
实习指导老师意见
2015/06/04 职场文书
法律意见书范本
2015/06/04 职场文书
草房子读书笔记
2015/06/29 职场文书
暑假打工感想
2015/08/07 职场文书
2019年预备党员的思想汇报:加深对党的认知
2019/09/25 职场文书
MySQL 百万级数据的4种查询优化方式
2021/06/07 MySQL
nginx location 带斜杠【 / 】与不带的区别
2022/04/13 Servers