新闻栏滚动效果解析文档格式.docx
- 文档编号:17601703
- 上传时间:2022-12-07
- 格式:DOCX
- 页数:6
- 大小:593.74KB
新闻栏滚动效果解析文档格式.docx
《新闻栏滚动效果解析文档格式.docx》由会员分享,可在线阅读,更多相关《新闻栏滚动效果解析文档格式.docx(6页珍藏版)》请在冰豆网上搜索。
数据类型
解释
id
int或number
一条记录的id号,用于唯一确定一个记录,方便日后的删、查、改操作
content
varchar或text
新闻的实际内容
date
发布日期,这个字段可以没有
例如
1
新闻消息一
2014-5-3
2
新闻消息二
2014-8-14
3
新闻消息三
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动起来。
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 新闻 滚动 效果 解析