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 对象是否存在判断
Jul 15 Javascript
jquery 选项卡效果 新手代码
Jul 08 Javascript
JavaScript跨浏览器获取页面中相同class节点的方法
Mar 03 Javascript
教你如何终止JQUERY的$.AJAX请求
Feb 23 Javascript
jQuery获取单击节点对象的方法
Jun 02 Javascript
详解JavaScript RegExp对象
Feb 04 Javascript
JS实现简单的天数计算器完整实例
Apr 28 Javascript
JavaScript之RegExp_动力节点Java学院整理
Jun 29 Javascript
vue中使用ueditor富文本编辑器
Feb 08 Javascript
JavaScript变量基本使用方法实例分析
Nov 15 Javascript
《javascript设计模式》学习笔记五:Javascript面向对象程序设计工厂模式实例分析
Apr 08 Javascript
vue webpack build资源相对路径的问题及解决方法
Jun 04 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中把有符号整型转换为无符号整型方法
2015/05/27 PHP
浅析PHP开发规范
2018/02/05 PHP
Laravel 使用查询构造器配合原生sql语句查询的例子
2019/10/12 PHP
推荐自用 Javascript 缩图函数 (onDOMLoaded)……
2007/10/23 Javascript
jQuery提示效果代码分享
2014/11/20 Javascript
20个实用的JavaScript技巧分享
2014/11/28 Javascript
jQuery实现伸展与合拢panel的方法
2015/04/30 Javascript
JS实现DIV容器赋值的方法
2015/12/14 Javascript
BootStrap glyphicons 字体图标实现方法
2016/05/01 Javascript
JS导出PDF插件的方法(支持中文、图片使用路径)
2016/07/12 Javascript
Angular 4依赖注入学习教程之FactoryProvider配置依赖对象(五)
2017/06/04 Javascript
关于jQuery.ajax()的jsonp碰上post详解
2017/07/02 jQuery
jQuery中ajax获取数据赋值给页面的实例
2017/12/31 jQuery
使用vue制作探探滑动堆叠组件的实例代码
2018/03/07 Javascript
p5.js入门教程之图片加载
2018/03/20 Javascript
vue数据控制视图源码解析
2018/03/28 Javascript
Vue中JS动画与Velocity.js的结合使用
2019/02/13 Javascript
Node使用Selenium进行前端自动化操作的代码实现
2019/10/10 Javascript
js实现批量删除功能
2020/08/27 Javascript
使用vue编写h5公众号跳转小程序的实现代码
2020/11/27 Vue.js
[19:24]DOTA2客户端使用指南 一分钟快速设置轻松超神
2013/09/24 DOTA
[02:08]2014DOTA2国际邀请赛 430专访:力争取得小组前二
2014/07/11 DOTA
Python实现模拟登录及表单提交的方法
2015/07/25 Python
PyTorch CNN实战之MNIST手写数字识别示例
2018/05/29 Python
Python中的正则表达式与JSON数据交换格式
2019/07/03 Python
pytorch 实现模型不同层设置不同的学习率方式
2020/01/06 Python
Pytorch 实现计算分类器准确率(总分类及子分类)
2020/01/18 Python
Python编写memcached启动脚本代码实例
2020/08/14 Python
会计专业毕业生推荐信
2013/11/05 职场文书
初一地理教学反思
2014/01/16 职场文书
医务人员自我评价
2014/01/26 职场文书
优秀家长自荐材料
2014/08/26 职场文书
2014年帮扶工作总结
2014/11/26 职场文书
2014年学校禁毒工作总结
2014/12/23 职场文书
解析mybatis-plus中的resultMap简单使用
2021/11/23 Java/Android
Python OpenCV形态学运算示例详解
2022/04/07 Python