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 相关文章推荐
window.location.hash 属性使用说明
Mar 20 Javascript
JSON 教程 json入门学习笔记
Sep 22 Javascript
浅析document.ready和window.onload的区别讲解
Dec 18 Javascript
JavaScript中使用arguments获得函数传参个数实例
Aug 27 Javascript
jQuery焦点图切换特效代码分享
Sep 15 Javascript
自动化测试读写64位操作系统的注册表
Aug 15 Javascript
微信和qq时间格式模板实例详解
Oct 21 Javascript
微信小程序 slider 详解及实例代码
Jan 10 Javascript
JS实现touch 点击滑动轮播实例代码
Jan 19 Javascript
详解Vue2+Echarts实现多种图表数据可视化Dashboard(附源码)
Mar 21 Javascript
node前端开发模板引擎Jade的入门
May 11 Javascript
vue+Element-ui实现登录注册表单
Nov 17 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调用Java对象的方法
2006/10/09 PHP
解析PHP汉字转换拼音的类
2013/06/18 PHP
三种php连接access数据库方法
2013/11/11 PHP
ThinkPHP连接数据库及主从数据库的设置教程
2014/08/22 PHP
PHP中cookie和session的区别实例分析
2014/08/28 PHP
thinkphp区间查询、统计查询与SQL直接查询实例分析
2014/11/24 PHP
PHP 文件写入和读取操作实例详解【必看篇】
2019/11/04 PHP
Ajax一统天下之Dojo整合篇
2007/03/24 Javascript
基于jquery的大众点评,分类导航实现代码
2011/08/23 Javascript
jQuery1.6 类型判断实现代码
2011/09/01 Javascript
基于jquery创建的一个图片、视频缓冲的效果样式插件
2012/08/28 Javascript
使用Js让Html中特殊字符不被转义
2013/11/05 Javascript
javascript浏览器兼容教程之事件处理
2014/06/09 Javascript
使用cluster 将自己的Node服务器扩展为多线程服务器
2014/11/10 Javascript
javascript中的Function.prototye.bind
2015/06/25 Javascript
JS+CSS实现自适应选项卡宽度的圆角滑动门效果
2015/09/15 Javascript
探讨:JavaScript ECAMScript5 新特性之get/set访问器
2016/05/05 Javascript
怎么引入(调用)一个JS文件
2016/05/26 Javascript
js实现为a标签添加事件的方法(使用闭包循环)
2016/08/02 Javascript
NodeJS实现微信公众号关注后自动回复功能
2017/05/31 NodeJs
详解angularJS动态生成的页面中ng-click无效解决办法
2017/06/19 Javascript
讲解vue-router之什么是嵌套路由
2018/05/28 Javascript
小程序云开发之用户注册登录
2019/05/18 Javascript
JQuery+drag.js上传图片并且实现图片拖曳
2020/11/18 jQuery
[54:19]完美世界DOTA2联赛PWL S2 Magma vs PXG 第二场 11.28
2020/12/01 DOTA
对python中的for循环和range内置函数详解
2018/04/17 Python
用TensorFlow实现戴明回归算法的示例
2018/05/02 Python
python删除文本中行数标签的方法
2018/05/31 Python
TensorFlow 模型载入方法汇总(小结)
2018/06/19 Python
使用Nibabel库对nii格式图像的读写操作
2020/07/01 Python
美国隐形眼镜网:Major Lens
2018/02/09 全球购物
2015年实习班主任工作总结
2015/04/23 职场文书
消夏晚会主持词
2015/06/30 职场文书
Pytorch使用shuffle打乱数据的操作
2021/05/20 Python
springboot+VUE实现登录注册
2021/05/27 Vue.js
Linux、ubuntu系统下查看显卡型号、显卡信息详解
2022/04/07 Servers