Flash课件网 - 您身边的课件制作专家
Flash课件网官方,专业代做课件、定制原创Flash动画或参赛课件、修改Flash、制作演讲或汇报幻灯片PPT课件。联系QQ:4318100或搜索微信号:flashkj

网站小调整之首页添加新闻滚动效果

本站提供Flash课件代做和PPT幻灯片定制业务,联系QQ/微信:4318100

 

  昨天在首页添加了单行的滚动新闻效果,目的也是为了突出一些重要的信息,现在在这里将方法告诉大家:

  首先需要jquery的框架支持,在你想要添加效果的页面里面的<head></head>之间添加如下功能函数:

JavaScript代码
  1. <script type="text/javascript">
  2. function AutoScroll(obj){
  3.         $(obj).find("ul:first").animate({
  4.                 marginTop:"-25px"
  5.         },500,function(){
  6.                 $(this).css({marginTop:"0px"}).find("li:first").appendTo(this);
  7.         });   
  8. }
  9. </script>

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

XML/HTML代码
  1. <div id="scrollDiv">  
  2.   <ul>  
  3.     <li>这是滚动新闻的第一行</li>  
  4.     <li>这是滚动新闻的第二行</li>  
  5.     <li>这是滚动新闻的第三行</li>  
  6.     <li>这是滚动新闻的第四行</li>  
  7.     <li>这是滚动新闻的第五行</li>  
  8.     <li>这是滚动新闻的第六行</li>  
  9.     <li>这是滚动新闻的第七行</li>  
  10.     <li>这是滚动新闻的第八行</li>  
  11.   </ul>  
  12. </div>  

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

JavaScript代码
  1. <script type="text/javascript">   
  2. $(document).ready(function(){   
  3. setInterval('AutoScroll("#scrollDiv")',1000)   
  4. });   
  5. </script>  

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

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

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

  这样就完成了,更新一下首页即可看到效果了,当然还可以做出多行滚动的效果,也可添加控制上下滚动,原理同上。大家可以多尝试一下其他的效果!代码虽不多,但是效果蛮不错的!可以有较好的用户体验效果!

 

标签:
分类:资源素材| 发布:admin| 查看: | 发表时间:2011-11-1
原创文章如转载,请注明:转载自Flash课件网 http://www.flashkj.com/
本文链接:http://www.flashkj.com/ziyuan/188.html

已经有 ( 0 ) 位网友发表了评论,你也评一评吧!

Design By Flashkj.Com | Login | Power By Chen Feiyang.