您现在的位置是：首页 - 我爱设计 - 正文

关于本站的滚动新闻效果的实现

　　昨天在首页添加了单行的滚动新闻效果，目的也是为了突出一些重要的信息，亦或者打打广告之类的，效果还不错的，现在在这里教大家怎么添加！

　　不知道大家有没有看到论坛里面的一个滚动新闻的特效效果下载，可以到这里看看效果预览，高手们自然一看就知道怎么用了，这里还是介绍一下实现方法！

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

JavaScript代码

<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为你定义的每一行新闻的高度，一般默认就行！然后再页面中任何位置，就是你想要实现滚动新闻的位置添加新闻的代码：

XML/HTML代码

<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>之间添加：

JavaScript代码

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

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

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

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>

　　这样就完成了，更新一下首页即可看到效果了，在给出的效果预览里面还有多行滚动，还有可控制上下滚动的效果，大家可以多尝试一下其他的效果！代码不多，但是效果蛮不错的！可以有很好的用户体验效果！

已经有(9)位网友发表了评论，你也评一评吧！

　　原创文章如转载请注明：转载自心诺设计风尚　xvdesign.com　欢迎订阅心诺设计风尚
　　本文链接：http://xvdesign.com/post/290.html　[复制链接]

标签：特效滚动新闻 jQuery
分类：我爱设计| 发布：心诺设计| 查看： | 发表时间：2010-8-19
引用：点击这里获取该日志的TrackBack引用地址
上一篇：百度对网站降权的简单分析
下一篇：电信的太不厚道了忍无可忍

看图读文
最新酷站

教你如何使用模板中的动态JS调用功能(2010-7-21 11:37:11)
JQuery对Fckeditor编辑器的取值(2009-7-3 20:0:45)
创建一个可调大小的图片网格系统(译).(2009-6-17 23:33:29)
项目进程60%(2009-4-4 0:29:6)
JavaScript是否为创造游戏准备好了(2009-3-11 15:21:40)
Sean主题最后一次更新(含PSD文件)(2009-2-25 22:14:41)
利用jQuery制作一个自动播放的幻灯片(2009-2-24 11:18:24)
jQuery 3 岁了(2009-1-15 15:12:41)

◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。

9 #pba化妆品怎么样

还不错但是不会到内容是哪里调取呢？

http://www.arenw.com 2011-12-24 22:59:39 【REPLY】【TOP】

8 #草榴社区

还有你这个关于百度音乐的插件为什么我找不到添加音乐的选项呢？？？插件下载了也安装了

http://www.081234.com 2011-12-23 9:30:24 【REPLY】【TOP】

7 #草榴社区

您好：我想咨询一下你这个滚动条的速度怎么调节？我的好像太快了按照你的设置来，还有那个右边的天气是怎么弄的呢？希望老大帮解决一下谢谢啦

支持心诺！！！

http://www.081234.com 2011-12-23 9:28:54 【REPLY】【TOP】

6 #浮云

黑框怎么去掉啊？？

http://www.0633fy.com/ 2011-1-4 11:39:52 【REPLY】【TOP】

5 #风

能分享下插件吗?

2010-12-1 10:37:47 【REPLY】【TOP】

4 #风

不知道博主文章里用什么高亮的插件呢?能否告知下,不胜感谢!

seanloo 于 2010-12-1 9:40:00 回复
官方论坛里面有一个高亮显示的插件的，你可以找找，我也是在那找的，做了点小修改

风于 2010-12-1 10:33:28 回复
官方论坛好多下过来装下去都出问题,到现在都是用的江海客0.1版本的..(不过比较喜欢这款风格)

麻烦给出一个链接我看下,先谢了

2010-12-1 8:47:58 【REPLY】【TOP】

3 #佘星星

效果还不错，如果整合在下一版本，就更强悍了。

http://www.shexingxing.cn 2010-8-24 14:26:48 【REPLY】【TOP】

2 #kaka

好功能~~~能不能整合在一句话心情里面 ~~这样就方便多了~

http://www.52lpp.cn 2010-8-19 21:59:12 【REPLY】【TOP】

1 #菜刀

阿诺太有才啦！崇拜啊~~~

seanloo 于 2010-8-19 13:34:30 回复
额~~~~不用这么夸张吧

http://www.iood.cn 2010-8-19 13:01:57 【REPLY】【TOP】

关于本站的滚动新闻效果的实现

相关文章

广告赞助

本类更新

广告宣传

随机文章