无缝滚动-js原理分析和css分析_第1页
无缝滚动-js原理分析和css分析_第2页
无缝滚动-js原理分析和css分析_第3页
无缝滚动-js原理分析和css分析_第4页
无缝滚动-js原理分析和css分析_第5页
已阅读5页，还剩16页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

1、学习情景四 图片（文字）无缝滚动4.1 任务目标4.1.1 任务引入滚动效果，是网页中很常见，用途也很广的一种效果。就是HTML自带的标签也有专门表示滚动的标签<marquee>。Marquee标签可以很轻松的实现页面中的文字或者图片的滚动。如下：<marquee>这个是html自带的滚动标签marqee。默认向左滚动。</marquee>但是，marquee标签有个致命的缺陷滚动中会有空白出现。这些空白，会让网页的界面效果大打折扣。如果能让滚动的时候没有空白，那么整个页面效果就舒服多了！这种没有空白的滚动，我们通常称之“无缝滚动”就是“没有缝隙（空白）的滚

2、动效果”。怎么才能让图片滚动的时候没有空白呢？HTML自带的滚动标签<marquee>自然满足不了这种视觉特效要求（也正是因为这点，marquee标签现在已经逐渐的淡出人们的视线，处于被淘汰的境地了）。因此，需要借助我们神通广大的Javascript来实现这个效果。现在很多网站都喜欢使用无缝滚动的图片或者文字来突出内容，以此来吸引浏览者的注意。特别是一些企业网站的产品展示、人物介绍或者新闻公告部分，更是滚动特效的常用部分。图1 某网站的产品展示部分该部分就是用js实现了产品图片的水平滚动。图2 某网站的客户动态部分该部分用js实现了客户信息的垂直向上滚动。4.1.2 任务目标利用j

3、s效果，实现如下样式的新闻动态向上无缝滚动。图 1 新闻动态无缝滚动效果图小提示如果没有特殊的要求：水平滚动一般是向左滚动，垂直滚动一般是向上滚动。因为这样符合人们的“从左到右，从上到下的阅读习惯”。4.2 设计思路任何网站网页都是从效果图切片后，再通过各种方式布局而成（现在主要使用divcss）。一个特效做的再好看，它的“前身”还是一张静静的效果图。（本例效果图见源码中“学习情景四无缝滚动”“无缝滚动效果图.jpg”,并附有psd源文件以供参考切片）因此，我们在制作绚丽的JS特效的先前步骤一般是：1. 根据策划和页面的效果图，完成效果图的切片，做成静态html页面这里采用时下流行的divcs

4、s布局。2. 在html静态页面的基础之上，再添加JS代码，完成特效。也就是说，js特效是在html结构成型之后，再添加上去的。不同的结构，要表现出同样的js效果，可能会需要编写不同的js特效代码。4.3 任务实施4.3.1 切片布局1. 用photoshop打开源码中“学习情景四无缝滚动”的效果图2. 切片结构分析因为该新闻部分是圆角，并且有些图片的修饰在上面。因此，整个新闻部分被分成三个部分。如下图所示图 4.3.11 新闻动态无缝滚动效果图分析那么我们在切片的时候，分成三块来切片。其中头部和底部各切一块。中间比较特殊，因为考虑到切片要尽量的小点，又利于内容的扩展。所以，中间部分的背景不宜

5、切成一整块。最好的方法就是切一块高度为1px的图片，让它垂直平铺作为新闻的背景。（具体的切片，同学们可以参考源码。）另外，“更多”部分也是一个图片，也需要把它切片出来。切片完成！3. 在DW中完成新闻板块的布局这里采用时下流行的DIVCSS布局。先在DW中创建站点，然后建立相关的css文件和html文件，站点大致结构如下：图 4.3.12 站点参考结构先把css文件，在DW站点中，拖到html文件里的<head>标签之间。把css文件跟html文件链接起来。然后编写css的公用样式（就是几乎每个页面都会采用的样式），参考如下：bodyfont-size:12px;line-heig

6、ht:24px; text-algin:center; /* 页面内容居中 */*margin:0px;padding:0px; /* 去掉所有标签的marign和padding的值 */ullist-style:none; /* 去掉ul标签默认的点样式 */a img border:none; /* 超链接下，图片的边框 */a color:#333;text-decoration:none; /* 超链接样式 */a:hovercolor:#ff0000;4. 开始新闻动态框架布局先用一个div，id=”news”，用来装套整个新闻动态。<!- 新闻动态开始 -><di

7、v id=”news”></div><!- 新闻动态结束 ->因为新闻动态被分成了三个部分，所以再使用三个div分别来表示新闻动态的 头部、中间和底部部分。并且分别使用三个id来标识它们。HTML代码如下：<!- 新闻动态开始 -><div id=”news”> <!- 头部 -> <div id="news_t"> </div> <!- 头部结束 -> <!- 中间 -> <div id ="news_z"> </div&

8、gt; <!- 中间结束 -> <!- 底部 -> <div id ="news_d"> </div> <!- 底部结束 -></div><!- 新闻动态结束 ->5. 整体样式设置根据效果图切片，先设定好新闻动态整块的宽高和背景。#newswidth:399px;height:251px;background:url(./images/gd_mid.gif) repeat-y; /* 背景垂直排列 */margin-left:auto; /* firefox下居中 */margin-rig

9、ht:auto;text-align:left; /* 让新闻内容靠左 */需要说明的是：为了内容的扩展性，新闻中间部分的背景，被设为了整个新闻动态的背景。6. 新闻头部制作这里因为有个more的图片，所以头部的图片是个背景，背景之上放的是more图片。这个more是个超链接结构，通过点击它可以打开更多的新闻列表。修正头部html结构如下：其他部分代码省略<!- 头部 -> <div id="news_t"> <a href="#" target="_self"><img src="

10、images/more.gif" width="45" height="11" /></a> </div><!- 头部结束 ->其他部分代码省略设置头部样式#news_twidth:399px;height:64px;background:url(./images/gd_top.gif) no-repeat; overflow:hidden; /* 这个一定要加上，内容超出的部分要隐藏，免得撑高头部 */#news_t afloat:right;margin-right:30px;margin-top:

11、30px;display:inline;图 4.3.13 新闻动态头部效果7. 新闻底部制作这部分因为没有内容，所以可以添加 &nbsp; 来填充内容。设置好宽高后，可以直接给底部添加背景。底部样式如下：/* 底部样式 */#news_d width:399px; height:16px; overflow:hidden; /* 这个一定要加上，内容超出的部分要隐藏，免得撑高底部结构 */ background:url(./images/gd_btm.gif) no-repeat;图 4.3.14 添加了新闻动态底部样式（还未添加中间内容）8. 中间部分制作通过计算得知，中间部分的高度

12、为 251px64px16px171px。但是，内容上只设计了6行的高度（行高设为24px）。因此，中间内容高为 6×24px144px，距离上面下面，各为 13px 和 14px。注意: 通过观察效果图发现，中间部分的宽度并没有达到新闻动态的宽度，而是要窄点。图 4.3.15 中间部分分析添加中间部分样式/* 中间样式 */#news_zheight:144px;width:335px;margin-left:35px;margin-top:13px;margin-bottom:14px;overflow:hidden; /* 这个一定要加，超出的内容部分要隐藏，免得撑高中间部分

13、*/添加新闻列表。对于列表，一般使用ul和li来做。<!- 中间 -> <div id ="news_z"> <ul> <li><a href="#">新闻滚动内容内容内容演示1</a><span>2010-01-20</span></li> <li><a href="#">新闻滚动内容内容内容演示2</a><span>2010-01-20</span></li&

14、gt; <li><a href="#">新闻滚动内容内容内容演示3</a><span>2010-01-20</span></li> <li><a href="#">新闻滚动内容内容内容演示4</a><span>2010-01-20</span></li> <li><a href="#">新闻滚动内容内容内容演示5</a><span>2010-01

15、-20</span></li> <li><a href="#">新闻滚动内容内容内容演示6</a><span>2010-01-20</span></li> </ul> </div><!- 中间结束 ->.给新闻列表添加样式#news ul li height:24px;#news ul li awidth:180px; float:left;display:block;overflow:hidden;background:url(./image

16、s/sj.gif) 0px 8px no-repeat;text-indent:15px;height:24px;#news ul li spanfloat:right;color:#999;这样，一个静态的新闻列表就完成了。图 4.3.16 静止的新闻动态不过，它只是一般的新闻动态列表，还不会滚动。接下来就添加相关的JS代码。4.3.2 添加JS代码1. js滚动结构分析无缝滚动最大的特色就是能长久的滚动下去，像是一个无限循环一样。当然，实际上的循环是不可能无限的。只是通过手段，欺骗了浏览者的眼睛这个嘛，稍后会有详细解释。图 4.3.21 一双骗人的眼睛为了达到欺骗的目的,这里采用了两个UL

17、列表来做新闻。通过两个新闻内容的滚动来模拟循环滚动。一个在上，一个在下，并且给它们分别用两个id标识，“p1”和“p2”。修改新闻列表html代码如下：<!- 中间 -><div id="news_z"><ul id="p1"> <li><a href="#">新闻滚动内容内容内容演示1</a><span>2010-01-20</span></li> <li><a href="#">新

18、闻滚动内容内容内容演示2</a><span>2010-01-20</span></li> <li><a href="#">新闻滚动内容内容内容演示3</a><span>2010-01-20</span></li> <li><a href="#">新闻滚动内容内容内容演示4</a><span>2010-01-20</span></li> <li><a

19、 href="#">新闻滚动内容内容内容演示5</a><span>2010-01-20</span></li> <li><a href="#">新闻滚动内容内容内容演示6</a><span>2010-01-20</span></li></ul><ul id="p2"></ul></div><!- 中间结束 ->大家会发现这里后的新闻内容html有两个特

20、点：1) id为p1的ul在上，p2这个ul在下。2) p2这个ul里没有任何内容，是空白一片。原因是：1) 上下滚动新闻，因此就让两个新闻内容ul上下排列。2) 如果直接p2也添加上内容的话，会给页面增加下载量，同时也给后台人员增加工作量。因此，p2就先暂时是空白内容，其具体的内容可以在稍后通过js代码添加上去。那么接下来的疑问就是，两个ul怎么来实现循环滚动的呢？2. 先让新闻滚动起来在html里，每个成对的标签，比如这里新闻的中间部分<div>,都有一个属性 scrollTop，它是用来表示内容向上滚动的数值。内容滚动区域DIV.scrollTopDIV我们先让新闻滚动一点。

21、添加如下js，在新闻滚动结构的后面：<!- 新闻动态-><div id=”news”>.省略代码</div><!- 新闻动态结束 -> <script type="text/javascript"> var area=document.getElementById("news_z"); /*获取滚动区域，也就是新闻内容的中间部分div的id。用变量area来表示它。*/ area.scrollTop=10; /* 让新闻内容向上滚动10个像素 */ </script>小提示这里把js

22、代码，写在了html结构的后面，是因为：Js代码要直接获取html结构div的id。如果这里js代码，写在了html结构前面。当js代码运行的时候，html结构还没出现，js会获取不到div的id。可是，添加了代码后，同学们会发现新闻内容会没有变化。为什么呢？是代码错了么？仔细想下，我们的新闻目前只有6条，而6条新闻刚刚好全部出现在新闻中间部分，浏览者正好全部看到它们，所有新闻一目了然。既然内容都在这里了，有必要还需要滚动吗？小提示滚动的意义就在于让浏览者看到被滚动区域隐藏的内容，因此：当内容全部出现在滚动区域之内的时候，内容是不会滚动的。既然内容全部都出现的时候，不会滚动。那么，我们就来增加

23、几条新闻。把原来的6条新闻增加为10条。可是新闻内容多了不会撑高中间部分的div么？当然不会啦。不要忘了我们给中间部分的div（id为 news_z）,添加了一条样式：overflow:hidden;它的作用就是，让超出div高度的部分隐藏（hidden）起来。修改html内容如下：<!- 中间 -><div id="news_z"><ul id="p1"> <li><a href="#">新闻滚动内容内容内容演示1</a><span>2010-01-

24、20</span></li> <li><a href="#">新闻滚动内容内容内容演示2</a><span>2010-01-20</span></li> <li><a href="#">新闻滚动内容内容内容演示3</a><span>2010-01-20</span></li> <li><a href="#">新闻滚动内容内容内容演示4</a

25、><span>2010-01-20</span></li> <li><a href="#">新闻滚动内容内容内容演示5</a><span>2010-01-20</span></li> <li><a href="#">新闻滚动内容内容内容演示6</a><span>2010-01-20</span></li><li><a href="#"

26、>新闻滚动内容内容内容演示7</a><span>2010-01-20</span></li><li><a href="#">新闻滚动内容内容内容演示8</a><span>2010-01-20</span></li><li><a href="#">新闻滚动内容内容内容演示9</a><span>2010-01-20</span></li><li><

27、;a href="#">新闻滚动内容内容内容演示10</a><span>2010-01-20</span></li></ul><ul id="p2"></ul></div><!- 中间结束 ->再打开页面看看：图 4.3.21 新闻内容往上滚动了10个像素3. 让新闻不停的向上滚动新闻内容滚动了，可是只会滚动一下。如何来让它不停的滚动呢？这里就要用到js内置的函数 setInterval。同时，我们也增加了一个变量，命名为dis，用来表示滚动

28、的距离。同时，增加一个函数，让它来让变量dis值不停的变大（内容滚动的越多）。修正js代码如下：<!- 新闻动态-><div id=”news”>.省略代码</div><!- 新闻动态结束 -><script type="text/javascript"> var area=document.getElementById("news_z"); /*获取滚动区域，也就是新闻内容的中间部分div的id。用变量area来表示它。*/var dis=0; /* dis表示内容滚动的距离。一开始没有滚动，

29、就让它的值为0*/ function goUp() dis+; /dis的值增加area.scrollTop=dis; /新闻内容的滚动距离也在增加 var myset=setInterval("goUp()",50); /每50毫秒就执行一下goUp函数 </script>内容是滚动了，不过当内容全部滚动完毕后，又会停止下来。依然达不到循环滚动的目的。小提示当内容全部滚动完毕后，正常情况下，滚动会自动停止。4. 让内容循环滚动起来循环滚动的原理其实很简单，就是用2个内容来轮流滚动。“内容1” 滚动完了就让 “内容2” 开始滚动，然后又是“内容1”滚动。原理示意图如下：图 4.3.23 滚动示意图1最开始的时候图 4.3.24 滚动示意图2内容1开始向上滚动图 4.3.24 滚动示意图3内容1滚到底，内容会停止滚动图 4.3.25 滚动示意图4这时产生第二个内容区，内容2跟内容1完全一样图 4.3.26 滚动示意图5滚动区域内容增加了“内容2”，因此会继续滚动图 4.3.27 滚动示意图6当“内容1”刚好移出区域外的时候图 4.3.28 滚动示意图7让“内容1”回到“起始点”，重新滚动。此时，div.scrollTop为0。根据这个原理，修改js代码如下：<!- 新闻动态-><div id=”news”>.省略代码&l

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论