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 相关文章推荐
jQuery 版本的文本输入框检查器Input Check
Jul 09 Javascript
js 强制弹出窗口代码研究-又一款代码
Mar 20 Javascript
js动态拼接正则表达式的两种方法
Mar 04 Javascript
jQuery+html5实现div弹出层并遮罩背景
Apr 15 Javascript
javaScript中的原型解析【推荐】
May 05 Javascript
详解AngularJS中ng-src指令的使用
Sep 07 Javascript
WEB 前端开发中防治重复提交的实现方法
Oct 26 Javascript
Bootstrap modal 多弹窗之叠加显示不出弹窗问题的解决方案
Feb 23 Javascript
ES6实现的遍历目录函数示例
Apr 07 Javascript
在Bootstrap开发框架中使用dataTable直接录入表格行数据的方法
Oct 25 Javascript
jquery validate 实现动态增加/删除验证规则操作示例
Oct 28 jQuery
Vue中component标签解决项目组件化操作
Sep 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
这部好评如潮的动漫 知名梗频出 但是画风劝退很多人
2020/03/08 日漫
PHP 事件机制(2)
2011/03/23 PHP
php生成RSS订阅的方法
2015/02/13 PHP
php基于curl实现随机ip地址抓取内容的方法
2016/10/11 PHP
php die()与exit()的区别实例详解
2016/12/03 PHP
PHP框架laravel的.env文件配置教程
2017/06/07 PHP
基于JQuery的一个简单的鼠标跟随提示效果
2010/09/23 Javascript
30个最佳jQuery Lightbox效果插件分享
2011/04/11 Javascript
使用javascipt---实现二分查找法
2013/04/10 Javascript
写得不错的jquery table鼠标经过变色代码
2013/09/27 Javascript
JavaScript中使用ActiveXObject操作本地文件夹的方法
2014/03/28 Javascript
javascript读写json示例
2014/04/11 Javascript
JavaScript实现向右伸出的多级网页菜单效果
2015/08/25 Javascript
JavaScript代码轻松实现网页内容禁止复制(代码简单)
2015/10/23 Javascript
详解JavaScript中双等号引起的隐性类型转换
2016/05/30 Javascript
原生js实现自由拖拽弹窗代码demo
2016/06/29 Javascript
webpack+vue.js实现组件化详解
2016/10/12 Javascript
概述jQuery的元素筛选
2016/11/23 Javascript
微信小程序之MaterialDesign--input组件详解
2017/02/15 Javascript
NodeJS基础API搭建服务器详细过程记录
2017/04/01 NodeJs
JavaScript使用canvas绘制随机验证码
2020/02/17 Javascript
python获取本地计算机名字的方法
2015/04/29 Python
Python实现类似比特币的加密货币区块链的创建与交易实例
2018/03/20 Python
python调用摄像头显示图像的实例
2018/08/03 Python
用Python将mysql数据导出成json的方法
2018/08/21 Python
Python中的异常处理try/except/finally/raise用法分析
2019/02/28 Python
python pycharm的安装及其使用
2019/10/11 Python
Pandas实现dataframe和np.array的相互转换
2019/11/30 Python
Pygame框架实现飞机大战
2020/08/07 Python
基于Python的图像阈值化分割(迭代法)
2020/11/20 Python
世界上最大的糖果店:Dylan’s Candy Bar
2017/11/07 全球购物
node中使用shell脚本的方法步骤
2021/03/23 Javascript
培训演讲稿范文
2014/01/12 职场文书
孔庙导游词
2015/02/04 职场文书
实习班主任自我评价
2015/03/11 职场文书
win10下go mod配置方式
2021/04/25 Golang