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 相关文章推荐
js实现点击注册按钮开始读秒倒计时的小例子
May 11 Javascript
JS+CSS实现分类动态选择及移动功能效果代码
Oct 19 Javascript
jQuery点击改变class并toggle及toggleClass()方法定义用法
Dec 11 Javascript
JS正则截取两个字符串之间及字符串前后内容的方法
Jan 06 Javascript
JavaScript中的子窗口与父窗口的互相调用问题
Feb 08 Javascript
jQuery实现可兼容IE6的淡入淡出效果告警提示功能示例
Sep 20 jQuery
JavaScript使用百度ECharts插件绘制饼图操作示例
Nov 26 Javascript
单线程JavaScript实现异步过程详解
May 19 Javascript
Node.js API详解之 readline模块用法详解
May 22 Javascript
Angular利用HTTP POST下载流文件的步骤记录
Jul 26 Javascript
vue实现防抖的实例代码
Jan 11 Vue.js
解决vue中provide inject的响应式监听
Apr 19 Vue.js
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中循环语句的用法介绍
2012/01/30 PHP
php生成excel列名超过26列大于Z时的解决方法
2014/12/29 PHP
实例讲解YII2中多表关联的使用方法
2017/07/21 PHP
Laravel中的Auth模块详解
2017/08/17 PHP
JavaScript 学习笔记(七)字符串的连接
2009/12/31 Javascript
关于js日期转化为毫秒数“节省20%的效率和和节省9个字符“问题
2012/03/01 Javascript
js hover 定时器(实例代码)
2013/11/12 Javascript
js利用prototype调用Array的slice方法示例
2014/06/09 Javascript
javascript格式化指定日期对象的方法
2015/04/21 Javascript
用javascript实现自动输出网页文本
2015/07/30 Javascript
JavaScript实现点击单选按钮改变输入框中文本域内容的方法
2015/08/12 Javascript
jQuery实现带有洗牌效果的动画分页实例
2015/08/31 Javascript
12种JavaScript常用的MVC框架比较分析
2015/11/16 Javascript
js过滤HTML标签完整实例
2015/11/26 Javascript
jQuery  ready方法实现原理详解
2016/10/19 Javascript
脚本div实现拖放功能(两种)
2017/02/13 Javascript
使用webpack编译es6代码的方法步骤
2019/04/28 Javascript
[00:52]DOTA2齐天大圣预告片
2016/08/13 DOTA
python使用百度翻译进行中翻英示例
2014/04/14 Python
Python Tkinter GUI编程入门介绍
2015/03/10 Python
实例讲解Python设计模式编程之工厂方法模式的使用
2016/03/02 Python
Python在信息学竞赛中的运用及Python的基本用法(详解)
2017/08/15 Python
K-means聚类算法介绍与利用python实现的代码示例
2017/11/13 Python
python修改list中所有元素类型的三种方法
2018/04/09 Python
python多线程调用exit无法退出的解决方法
2019/02/18 Python
Python计算矩阵的和积的实例详解
2020/09/10 Python
Python根据字符串调用函数过程解析
2020/11/05 Python
Python Pandas数据分析工具用法实例
2020/11/05 Python
css3实现信纸/同学录效果的示例代码
2018/12/11 HTML / CSS
html5 worker 实例(一) 为什么测试不到效果
2013/06/24 HTML / CSS
婴儿鞋,独特的婴儿服装和配件:Zutano
2018/11/03 全球购物
办理暂住证介绍信
2014/01/11 职场文书
四年级科学教学反思
2014/02/10 职场文书
Oracle创建只读账号的详细步骤
2021/06/07 Oracle
css中z-index: 0和z-index: auto的区别
2021/08/23 HTML / CSS
微信小程序调用python模型
2022/04/21 Python