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捕获鼠标右键菜单中的粘帖事件实现代码
Apr 01 Javascript
jquery 3D 标签云示例代码
Jun 12 Javascript
理解AngularJs指令
Dec 10 Javascript
jQuery添加options点击事件并传值实例代码
May 18 Javascript
jQuery插件pagination实现无刷新分页
May 21 Javascript
JS+canvas绘制的动态机械表动画效果
Sep 12 Javascript
微信小程序 数据绑定及运算的简单实例
Sep 20 Javascript
jquery实现点击a链接,跳转之后,该a链接处显示背景色的方法
Jan 18 jQuery
iview中Select 选择器多选校验方法
Mar 15 Javascript
angular ng-model 无法获取值的处理方法
Oct 02 Javascript
jQuery实现checkbox全选、反选及删除等操作的方法详解
Aug 02 jQuery
Node.js控制台彩色输出的方法与原理实例详解
Dec 01 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+Redis事务解决高并发下商品超卖问题(推荐)
2020/08/03 PHP
jquery.gridrotator实现响应式图片展示画廊效果
2015/06/23 Javascript
javascript动态添加删除tabs标签的方法
2015/07/06 Javascript
JavaScrip常见的一些算法总结
2015/12/28 Javascript
使用jQuery或者原生js实现鼠标滚动加载页面新数据
2016/03/06 Javascript
BootStrap树状图显示功能
2016/11/24 Javascript
js 将input框中的输入自动转化成半角大写(税号输入框)
2017/02/16 Javascript
详解Node.js利用node-git-server快速搭建git服务器
2017/09/27 Javascript
详解bootstrap导航栏.nav与.navbar区别
2017/11/23 Javascript
Node实战之不同环境下配置文件使用教程
2018/01/02 Javascript
jQuery幻灯片插件owlcarousel参数说明中文文档
2018/02/27 jQuery
微信小程序制作表格的方法
2019/02/14 Javascript
使用jquery-easyui的布局layout写后台管理页面的代码详解
2019/06/19 jQuery
layui表格内放置图片,并点击放大的实例
2019/09/10 Javascript
layui的布局和表格的渲染以及动态生成表格的方法
2019/09/18 Javascript
vuex分模块后,实现获取state的值
2020/07/26 Javascript
理解JavaScript中的Proxy 与 Reflection API
2020/09/21 Javascript
[07:57]2018DOTA2国际邀请赛寻真——PSG.LGD凤凰浴火
2018/08/12 DOTA
使用Python生成随机密码的示例分享
2016/02/18 Python
python getopt详解及简单实例
2016/12/30 Python
基于python时间处理方法(详解)
2017/08/14 Python
对tensorflow 中tile函数的使用详解
2020/02/07 Python
python 读取串口数据的示例
2020/11/09 Python
Python实现自动整理文件的脚本
2020/12/17 Python
如何使用Python进行PDF图片识别OCR
2021/01/22 Python
程序集与命名空间有什么不同
2014/07/25 面试题
高中英语教学反思
2014/02/04 职场文书
师范生自我鉴定
2014/03/20 职场文书
我心目中的好老师活动方案
2014/08/19 职场文书
2015年员工试用期工作总结
2014/12/12 职场文书
青年志愿者服务活动总结
2015/05/06 职场文书
母亲节主题班会
2015/08/14 职场文书
导游词书写之黄山
2019/08/06 职场文书
商业计划书之服装
2019/09/09 职场文书
python opencv常用图形绘制方法(线段、矩形、圆形、椭圆、文本)
2021/04/12 Python
SQL Server远程连接的设置步骤(图文)
2022/03/23 SQL Server