欢迎来到天天文库
浏览记录
ID：15644085
大小：409.50 KB
页数：21页
时间：2018-08-04
《无缝滚动-js原理分析和css分析》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。
1、学习情景四图片（文字）无缝滚动4.1任务目标4.1.1任务引入滚动效果，是网页中很常见，用途也很广的一种效果。就是HTML自带的标签也有专门表示滚动的标签。Marquee标签可以很轻松的实现页面中的文字或者图片的滚动。如下：这个是html自带的滚动标签marqee。默认向左滚动。但是，marquee标签有个致命的缺陷－－滚动中会有空白出现。这些空白，会让网页的界面效果大打折扣。如果能让滚动的时候没有空白，那么整个页面效果就舒服多了！这种没有空白的滚动，我们通常称之“无缝滚动”――就是“没有缝隙（空白）的滚动效果”。怎么才能让图片滚动的时
2、候没有空白呢？HTML自带的滚动标签自然满足不了这种视觉特效要求（也正是因为这点，marquee标签现在已经逐渐的淡出人们的视线，处于被淘汰的境地了）。因此，需要借助我们神通广大的Javascript来实现这个效果。现在很多网站都喜欢使用无缝滚动的图片或者文字来突出内容，以此来吸引浏览者的注意。特别是一些企业网站的产品展示、人物介绍或者新闻公告部分，更是滚动特效的常用部分。图4.1.1－1某网站的产品展示部分――该部分就是用js实现了产品图片的水平滚动。图4.1.1－2某网站的客户动态部分――该部分用js实现了客户信息的垂直向上滚动。4.1.1任务目标利用js效果，实现如下
3、样式的新闻动态向上无缝滚动。图4.1.2－1新闻动态无缝滚动效果图小提示如果没有特殊的要求：水平滚动一般是向左滚动，垂直滚动一般是向上滚动。因为这样符合人们的“从左到右，从上到下的阅读习惯”。4.1设计思路任何网站网页都是从效果图切片后，再通过各种方式布局而成（现在主要使用div＋css）。一个特效做的再好看，它的“前身”还是一张静静的效果图。（本例效果图见源码中“学习情景四无缝滚动”――“无缝滚动效果图.jpg”,并附有psd源文件以供参考切片）因此，我们在制作绚丽的JS特效的先前步骤一般是：1.根据策划和页面的效果图，完成效果图的切片，做成静态html页面――这里采用时下流行的div＋c
4、ss布局。2.在html静态页面的基础之上，再添加JS代码，完成特效。也就是说，js特效是在html结构成型之后，再添加上去的。不同的结构，要表现出同样的js效果，可能会需要编写不同的js特效代码。4.2任务实施4.2.1切片布局1.用photoshop打开源码中“学习情景四－无缝滚动”的效果图2.切片结构分析因为该新闻部分是圆角，并且有些图片的修饰在上面。因此，整个新闻部分被分成三个部分。如下图所示图4.3.1－1新闻动态无缝滚动效果图分析那么我们在切片的时候，分成三块来切片。其中头部和底部各切一块。中间比较特殊，因为考虑到切片要尽量的小点，又利于内容的扩展。所以，中间部分的背景不宜切成一
5、整块。最好的方法就是切一块高度为1px的图片，让它垂直平铺作为新闻的背景。（具体的切片，同学们可以参考源码。）另外，“更多”部分也是一个图片，也需要把它切片出来。切片完成！1.在DW中完成新闻板块的布局这里采用时下流行的DIV＋CSS布局。先在DW中创建站点，然后建立相关的css文件和html文件，站点大致结构如下：图4.3.1－2站点参考结构先把css文件，在DW站点中，拖到html文件里的
6、text-algin:center;/*页面内容居中*/}*{margin:0px;padding:0px;/*去掉所有标签的marign和padding的值*/}ul{list-style:none;/*去掉ul标签默认的点样式*/}aimg{border:none;/*超链接下，图片的边框*/}a{color:#333;text-decoration:none;/*超链接样式*/}a:hover{color:#ff0000;}1.开始新闻动态框架布局先用一个div，id=”news”，用来装套整个新闻动态。
此文档下载收益归作者所有
