无缝滚动-js原理分析和css分析
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
学习情景四图片（文字）无缝滚动
4.1任务目标
4.1.1任务引入
滚动效果，是网页中很常见，用途也很广的一种效果。
就是HTML自带的标签也有专门表示滚动的标签<marquee>。
Marquee标签可以很轻松的实现页面中的文字或者图片的滚动。
如下：
但是，marquee标签有个致命的缺陷－－滚动中会有空白出现。
这些空白，会让网页的界面效果大打折扣。
如果能让滚动的时候没有空白，那么整个页面效果就舒服多了！这种没有空白的滚动，我们通常称之“无缝滚动”――就是“没有缝隙（空白）的滚动效果”。
怎么才能让图片滚动的时候没有空白呢？
HTML自带的滚动标签<marquee>自然满足不了这种视觉特效要求（也正是因为这点，marquee标签现在已经逐渐的淡出人们的视线，处于被淘汰的境地了）。
因此，需要借助我们神通广大的Javascript来实现这个效果。
现在很多网站都喜欢使用无缝滚动的图片或者文字来突出内容，以此来吸引浏览者的注意。
特别是一些企业网站的产品展示、人物介绍或者新闻公告部分，更是滚动特效的常用部分。
图4.1.1－1 某网站的产品展示部分――该部分就是用js实现了产品图片的水平滚动。
图4.1.1－2 某网站的客户动态部分――该部分用js实现了客户信息的垂直向上滚动。
4.1.2任务目标
利用js效果，实现如下样式的新闻动态向上无缝滚动。
图 4.1.2－1 新闻动态无缝滚动效果图
4.2设计思路
任何网站网页都是从效果图切片后，再通过各种方式布局而成（现在主要使用div＋css）。
一个特效做的再好看，它的“前身”还是一张静静的效果图。
（本例效果图见源码中“学习情景四无缝滚动”――“无缝滚动效果图.jpg”,并附有psd源文件以供参考切片）
因此，我们在制作绚丽的JS特效的先前步骤一般是：
1.根据策划和页面的效果图，完成效果图的切片，做成静态html页面――这里
采用时下流行的div＋css布局。
2.在html静态页面的基础之上，再添加JS代码，完成特效。
也就是说，js特效是在html结构成型之后，再添加上去的。
不同的结构，要表现出同样的js效果，可能会需要编写不同的js特效代码。
4.3任务实施
4.3.1切片布局
1.用photoshop打开源码中“学习情景四－无缝滚动”的效果图
2.切片结构分析
因为该新闻部分是圆角，并且有些图片的修饰在上面。
因此，整个新闻部分被分成三个部分。
如下图所示
图 4.3.1－1 新闻动态无缝滚动效果图分析
那么我们在切片的时候，分成三块来切片。
其中头部和底部各切一块。
中间比较特殊，因为考虑到切片要尽量的小点，又利于内容的扩展。
所以，中间部分的背景不宜切成一整块。
最好的方法就是切一块高度为1px的图片，让它垂直平铺作为新闻的背景。
（具体的切片，同学们可以参考源码。
）另外，“更多”部分也是一个图片，也需要把它切片出来。
切片完成！
3.在DW中完成新闻板块的布局
这里采用时下流行的DIV＋CSS布局。
先在DW中创建站点，然后建立相关的css文件和html文件，站点大致结构如下：
图 4.3.1－2 站点参考结构
先把css文件，在DW站点中，拖到html文件里的<head>标签之间。
把css文件跟html 文件链接起来。
然后编写css的公用样式（就是几乎每个页面都会采用的样式），参考如下：
4.开始新闻动态框架布局
先用一个div，id=”news”，用来装套整个新闻动态。
因为新闻动态被分成了三个部分，所以再使用三个div分别来表示新闻动态的头部、中间和底部部分。
并且分别使用三个id来标识它们。
HTML代码如下：
5.整体样式设置
根据效果图切片，先设定好新闻动态整块的宽高和背景。
需要说明的是：为了内容的扩展性，新闻中间部分的背景，被设为了整个新闻动态的背景。
6.新闻头部制作
这里因为有个more的图片，所以头部的图片是个背景，背景之上放的是more图片。
这个more是个超链接结构，通过点击它可以打开更多的新闻列表。
修正头部html结构如下：
设置头部样式
图 4.3.1－3 新闻动态头部效果
7.新闻底部制作
这部分因为没有内容，所以可以添加 来填充内容。
设置好宽高后，可以直接给底部添加背景。
底部样式如下：
图 4.3.1－4 添加了新闻动态底部样式（还未添加中间内容）
8.中间部分制作
通过计算得知，中间部分的高度为251px－64px－16px＝171px。
但是，内容上只设计了6行的高度（行高设为24px）。
因此，中间内容高为6×24px＝144px，距离上面下面，各为13px 和14px。
注意: 通过观察效果图发现，中间部分的宽度并没有达到新闻动态的宽度，而是要窄点。
图 4.3.1－5 中间部分分析添加中间部分样式
添加新闻列表。
对于列表，一般使用ul和li来做。
给新闻列表添加样式
这样，一个静态的新闻列表就完成了。
图 4.3.1－6 静止的新闻动态
不过，它只是一般的新闻动态列表，还不会滚动。
接下来就添加相关的JS代码。
4.3.2添加JS代码
1.js滚动结构分析
无缝滚动最大的特色就是能长久的滚动下去，像是一个无限循环一样。
当然，实际上的循环是不可能无限的。
只是通过手段，欺骗了浏览者的眼睛――这个嘛，稍后会有详细解释。
图 4.3.2－1 一双骗人的眼睛
为了达到欺骗的目的,这里采用了两个UL列表来做新闻。
通过两个新闻内容的滚动来模拟循环滚动。
一个在上，一个在下，并且给它们分别用两个id标识，“p1”和“p2”。
修改新闻列表html代码如下：
大家会发现这里后的新闻内容html有两个特点：
1)id为p1的ul在上，p2这个ul在下。
2)p2这个ul里没有任何内容，是空白一片。
原因是：
1)上下滚动新闻，因此就让两个新闻内容ul上下排列。
2)如果直接p2也添加上内容的话，会给页面增加下载量，同时也给后台人员增加工作量。
因此，p2就先暂时是空白内容，其具体的内容可以在稍后通过js代码添加上去。
那么接下来的疑问就是，两个ul怎么来实现循环滚动的呢？
2.先让新闻滚动起来
在html里，每个成对的标签，比如这里新闻的中间部分<div>,都有一个属性scrollTop，它是用来表示内容向上滚动的数值。
我们先让新闻滚动一点。
添加如下js，在新闻滚动结构的后面：
可是，添加了代码后，同学们会发现新闻内容会没有变化。
为什么呢？？？是代码错了么？？
仔细想下，我们的新闻目前只有6条，而6条新闻刚刚好全部出现在新闻中间部分，浏览者正好全部看到它们，所有新闻一目了然。
既然内容都在这里了，有必要还需要滚动吗？
既然内容全部都出现的时候，不会滚动。
那么，我们就来增加几条新闻。
把原来的6条新闻增加为10条。
可是新闻内容多了不会撑高中间部分的div 么？
当然不会啦。
不要忘了我们给中间部分的div
（id 为 news_z ）,添加了一条样式：
overflow:hidden;
它的作用就是，让超出div 高度的部分隐藏（hidden ）起来。
修改html 内容如下：
再打开页面看看：
图 4.3.2－1 新闻内容往上滚动了10个像素
3.让新闻不停的向上滚动
新闻内容滚动了，可是只会滚动一下。
如何来让它不停的滚动呢？
这里就要用到js内置的函数 setInterval。
同时，我们也增加了一个变量，命名为dis，用来表示滚动的距离。
同时，增加一个函数，让它来让变量dis值不停的变大（内容滚动的越多）。
修正js代码如下：
内容是滚动了，不过当内容全部滚动完毕后，又会停止下来。
依然达不到循环滚动的
目的。
4. 让内容循环滚动起来
循环滚动的原理其实很简单，
就是用2个内容来轮流滚动。
“内容1” 滚动完了就让 “内容
2” 开始滚动，然后又是“内容1”滚动。
原理示意图如下：
图 4.3.2－3 滚动示意图1――最开始的时候
图 4.3.2－4 滚动示意图2――内容1开始向上滚动
图 4.3.2－4 滚动示意图3――内容1滚到底，内容会停止滚动
图 4.3.2－5 滚动示意图4――这时产生第二个内容区，内容2跟内容1完全一样
图 4.3.2－6 滚动示意图5――滚动区域内容增加了“内容2”，因此会继续滚动
图 4.3.2－7 滚动示意图6――当“内容1”刚好移出区域外的时候…
图 4.3.2－8 滚动示意图7――让“内容1”回到“起始点”，重新滚动。
此时，div.scrollTop为0。
根据这个原理，修改js代码如下：
运行下页面。
可以看到，我们的新闻内容已经开始了循环滚动。
不过还不够完美。
因为，一般情况下，鼠标放在滚动内容上的时候，滚动会停止的。
因此，我们继续添加相关的鼠标放上去和鼠标离开滚动区域的事件代码：
新闻内容无缝滚动特效，大功告成～！
作者联系qq：565453278 九天翔龙，现某高校计算机教师。