新闻栏滚动效果解析.docxVIP

新闻栏滚动效果解析我们在有些网站上的首页，特别是一些政府网站里，会看到有一个区域会从下向上滚动新闻信息。新闻的信息在后台数据库里肯定是一个表，表的结构大致是字段数据类型解释idint或number一条记录的id号，用于唯一确定一个记录，方便日后的删、查、改操作contentvarchar或text新闻的实际内容datedate发布日期，这个字段可以没有例如idcontentdate1新闻消息一2014-5-32新闻消息二2014-8-143新闻消息三2014-8-30本文并不对后端的数据处理做过多的叙述，主要是想对前端的信息如何呈现进行阐述。下面就是一个简单的例子，首先请看HTML代码整体架构图当然，由于新闻消息比较多，如果全部显示出来，会影响这个网页的布局，所以这里需要做一个滚动的效果。那么实际的标签布局应该是这样的所以在CSS样式中，给div标签的属性增加了一个overflow：hidden，让超出div高度的内容隐藏不显示，将来这个ul开始滚动的时候，下面的内容就会呈现出来了。类似于电影的字幕效果。接下来看一下jQuery的动作设置jQuery 第一部分这是一个处理动画的函数，首先来解释下面的appendTo（）方法。举一个小例子，结合上图 jQuery第一部分带注释的代码，就是将刚刚隐藏掉的第一个li标签追加到ul内部的最后一个子标签的后面。也就是这样的效果。再结合div的overflow：hidden的属性，就实现了字幕滚动的效果。大家也可以联想一下我们在做Flash动画是的遮罩层的效果，与这里也是类似的。jQuery 第二部分接着来看jQuery的第二部分，这部分和第一部分可以处于同一个js文件中。这部分就是来调用动画函数的。首先通过var $this = $(#news)找到div元素，然后给这个元素绑定一个hover函数，效果是当鼠标放在这个div元素上的时候，动画停止；当鼠标从div上移开时，继续通过setInterval（）方法以间隔500毫秒的频率调用动画函数，使ul动起来。