jquery特效实现滚动新闻效果

╭飛雪飄零╮ 站长评论3,7561字数 1324阅读模式

首先需要jquery的框架支持(这点博客已经具备了jquery的环境,可以不管),在你想要添加效果的页面里面的<head></head>之间添加如下功能函数:

<script type="text/javascript">
function AutoScroll(obj){
$(obj).find("ul:first").animate({
marginTop:"-25px"
},500,function(){
$(this).css({marginTop:"0px"}).find("li:first").appendTo(this);
});
}
</script>

   这个就是滚动函数,里面的 marginTop:"-25px" 这个25px为你定义的每一行新闻的高度,一般默认就行!然后再页面中任何位置,就是你想要实现滚动新闻的位置添加新闻的代码:

<div id="scrollDiv">
<ul>
<li>这是滚动新闻的第一行</li>
<li>这是滚动新闻的第二行</li>
<li>这是滚动新闻的第三行</li>
<li>这是滚动新闻的第四行</li>
<li>这是滚动新闻的第五行</li>
<li>这是滚动新闻的第六行</li>
<li>这是滚动新闻的第七行</li>
<li>这是滚动新闻的第八行</li>
</ul>
</div>

   注意,这里的 id="scrollDiv"是必须的,最后针对这个div框架添加滚动的效果,就是在页面的最底部,或者<head></head>之间添加:

<script type="text/javascript">
$(document).ready(function(){
setInterval('AutoScroll("#scrollDiv")',1000)
});
</script>

    这里的AutoScroll就是开始添加的功能函数,括号里面的”#scrollDiv“就是滚动新闻的div的id名称,可以自由设置,但这2个地方一定要保持一致!

最后对这个div添加css样式代码:

<style type="text/css">
ul,li{margin:0;padding:0}
#scrollDiv{width:300px;height:25px;line-height:25px;border:#ccc 1px solid;overflow:hidden}
#scrollDiv li{height:25px;padding-left:10px;}
</style>

    CSS代码可以自由修改。这样就完成了,更新一下首页即可看到效果了,在给出的效果预览里面还有多行滚动,还有可控制上下滚动的效果,大家可以多尝试一下其他的效果!代码不多,但是效果蛮不错的!可以有很好的用户体验效果!
下面是我自己修改的了,首先需要巴士飞扬的列表插件支持。比如想滚动播出最新文章 那么就是在模板适当的位置中插入一下代码。 

<div id="scrollDiv">
<ul>
<#CACHE_INCLUDE_RANDOMSORTNEW#>
</ul>
</div>

当然你需要调用其他的也行~只要修改当中<#CACHE_INCLUDE_RANDOMSORTNEW#>这句调用代码即可。

继续阅读
历史上的今天
4月
10
 最后更新:2020-2-4
╭飛雪飄零╮
  • 本文由 ╭飛雪飄零╮ 发表于 2011/04/10 00:30:12
  • 发表评论