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 相关文章推荐
在第一个input框内输入内容.textarea自动得到第一个文件框的值的javascript代码
Apr 20 Javascript
JQery jstree 大数据量问题解决方法
Mar 09 Javascript
Vue.js实现简单ToDoList 前期准备(一)
Dec 01 Javascript
vue.js实现请求数据的方法示例
Feb 07 Javascript
详解angularjs中的隔离作用域理解以及绑定策略
May 31 Javascript
详解jquery选择器的原理
Aug 01 jQuery
使用 Javascript 实现浏览器推送提醒功能的示例
Nov 03 Javascript
element-ui使用导航栏跳转路由的用法详解
Aug 22 Javascript
Phaser.js实现简单的跑酷游戏附源码下载
Oct 26 Javascript
微信小程序swiper组件实现抖音翻页切换视频功能的实例代码
Jun 24 Javascript
javaScript实现一个队列的方法
Jul 14 Javascript
react项目从新建到部署的实现示例
Feb 19 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抽象工厂模式(Elgg)
2010/03/21 PHP
PHP队列用法实例
2014/11/05 PHP
php数组函数array_key_exists()小结
2015/12/10 PHP
PHP通过CURL实现定时任务的图片抓取功能示例
2016/10/03 PHP
php通过PHPExcel导入Excel表格到MySQL数据库的简单实例
2016/10/29 PHP
PHP添加PNG图片背景透明水印操作类定义与用法示例
2019/03/12 PHP
JavaScript面向对象之体会[总结]
2008/11/13 Javascript
JQuery 网站换肤功能实现代码
2009/11/02 Javascript
javascript 打开页面window.location和window.open的区别
2010/03/17 Javascript
原生js和jQuery写的网页选项卡特效对比
2015/04/27 Javascript
js实现浮动在网页右侧的简洁QQ在线客服代码
2015/09/04 Javascript
nodejs微信公众号支付开发
2016/09/19 NodeJs
基于Bootstrap和jQuery构建前端分页工具实例代码
2016/11/23 Javascript
Vue项目webpack打包部署到服务器的实例详解
2017/07/17 Javascript
基于angular-utils-ui-breadcrumbs使用心得(分享)
2017/11/03 Javascript
Angular使用动态加载组件方法实现Dialog的示例
2018/05/11 Javascript
JS实现横向轮播图(中级版)
2020/01/18 Javascript
基于Vue CSR的微前端实现方案实践
2020/05/27 Javascript
JavaScript多种图形实现代码实例
2020/06/28 Javascript
[42:04]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#3Secret VS OG第一局
2016/03/03 DOTA
Windows下安装python2.7及科学计算套装
2015/03/05 Python
python爬虫获取淘宝天猫商品详细参数
2020/06/23 Python
python 平衡二叉树实现代码示例
2018/07/07 Python
Tensorflow加载预训练模型和保存模型的实例
2018/07/27 Python
Python验证码截取识别代码实例
2020/05/16 Python
基于Tensorflow读取MNIST数据集时网络超时的解决方式
2020/06/22 Python
Python接收手机短信的代码整理
2020/08/02 Python
python 装饰器的使用示例
2020/10/10 Python
纯CSS实现聊天框小尖角、气泡效果
2014/04/04 HTML / CSS
nohup的用法
2012/11/26 面试题
财务助理岗位职责
2013/11/10 职场文书
发展部经理职责规定
2014/02/22 职场文书
语文高效课堂实施方案
2014/05/03 职场文书
学雷锋活动总结报告
2014/06/26 职场文书
毕业欢送晚会主持词
2019/06/25 职场文书
python实现会员信息管理系统(List)
2022/03/18 Python