jQuery实现简单的间隔向上滚动效果
更新时间：2015年03月09日 10:50:20 作者：恋冬的枫
这篇文章主要介绍了jQuery实现简单的间隔向上滚动效果,实例分析了jQuery通过animate与setInterval控制dom元素滚动特效的技巧,需要的朋友可以参考下
本文实例讲述了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>
<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程序设计有所帮助。
相关文章
倒计时效果在我们的日常生活中经常会用到，比如说高考倒计时、元旦放假倒计时、春节放假倒计时等等，下面通过本篇文章给大家分享基于jQuery实现美观且实用的倒计时实例代码，对jquery倒计时相关知识感兴趣的朋友一起学习吧2015-12-12
这篇文章主要介绍了jquery选择器排除某个DOM元素的方法,也就是在选中的一些元素中,过滤一些不需要的,使用jquery not选择器实现,需要的朋友可以参考下2014-04-04
这篇文章主要介绍了jQuery中end()方法用法,实例分析了end()方法的功能、定义与回到最近的一个"破坏性"操作之前的使用技巧,需要的朋友可以参考下2015-01-01
最近做一个报表页面显示位置配置的界面,刚开始时用的是多个checkbox,选择其中需要的报表即可。后来随着业务变复杂，需要使用两个select,选择其中需要的到右边select，然后提交到数据库2013-10-10
cnblogs园子还没提供这项功能，我们又确实有这个需求，只好自己写一个,需要的朋友可以参考下。2010-11-11
这篇文章主要为大家详细介绍了基于jquery实现五星好评，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-11-11
这篇文章主要介绍了jQuery从零开始做一个分页组件功能,结合实例形式分析了jQuery分页组件的具体步骤、功能实现技巧与操作注意事项,需要的朋友可以参考下2020-05-05
这篇文章主要介绍了jQuery简单实现上下,左右滑动的方法,涉及jQuery动态操作页面元素的相关技巧,需要的朋友可以参考下2016-06-06
这篇文章主要是对jquery中iframe的操作进行了详细的分析介绍，需要的朋友可以过来参考下，希望对大家有所帮助2013-11-11
这篇文章主要介绍了jQuery过滤选择器用法,包括可见性过滤:hidden、:visible,包含过滤:contains等各种常用的过滤选择器,需要的朋友可以参考下2016-09-09
最新评论