学习情景四  图片（文字）无缝滚动
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的公用样式（就是几乎每个页面都会采用的样式），参考如下：
body{
    font-size:12px;
    line-height:24px;
    text-algin:center;        /* 页面内容居中 */
    }
*{
    margin:0px;
    padding:0px;            /*  去掉所有标签的marign和padding的值  */
    }
ul{
    list-style:none;          /*  去掉ul标签默认的点样式  */
    }
a img{
      border:none;        /*  超链接下，图片的边框  */
    }
a{           
    color:#333;
    text-decoration:none;    /* 超链接样式 */
    }
a:hover{
    color:#ff0000;
    }
4. 开始新闻动态框架布局
先用一个div，id=”news”，用来装套整个新闻动态。
<!--  新闻动态开始 -->
<div  id=”news”>
           
</div>
<!--  新闻动态结束 -->
因为新闻动态被分成了三个部分，所以再使用三个div分别来表示新闻动态的 头部、中间和底部部分。并且分别使用三个id来标识它们。HTML代码如下：
<!--  新闻动态开始 -->
<div  id=”news”>
            <!--  头部 -->
              <div  id="news_t">
              </div>
              <!--  头部结束 -->
              <!--  中间 -->
              <div  id ="news_z">
              </div>
              <!--  中间结束 -->
              <!--  底部 -->
              <div  id ="news_d">
              </div>
              <!--  底部结束 -->
</div>
<!--  新闻动态结束 -->
5. 整体样式设置
根据效果图切片，先设定好新闻动态整块的宽高和背景。
#news{
    width:399px;
    height:251px;
    background:url(../images/gd_mid.gif) repeat-y;    /*  背景垂直排列 */
    margin-left:auto;        /* firefox下居中 */
    margin-right:auto;
    text-align:left;            /* 让新闻内容靠左 */
    }
需要说明的是：为了内容的扩展性，新闻中间部分的背景，被设为了整个新闻动态的背景。
6. 新闻头部制作
这里因为有个more的图片，所以头部的图片是个背景，背景之上放的是more图片。这个more是个超链接结构，通过点击它可以打开更多的新闻列表。
修正头部html结构如下：
…其他部分代码省略…
<!--  头部 -->
  <div  id="news_t">
    <a href="#" target="_self"><img src="images/more.gif" width="45" height="11" /
></a>
  </div>
<!--  头部结束 -->
…其他部分代码省略…
设置头部样式
#news_t{
    width:399px;
    height:64px;
    background:url(../images/gd_top.gif) no-repeat;
    overflow:hidden;  /* 这个一定要加上，内容超出的部分要隐藏，免得撑高头部 */
    }
#news_t a{
    float:right;
    margin-right:30px;
    margin-top:30px;
    display:inline;
    }
图 4.3.1－3 html滚动效果代码新闻动态头部效果
7. 新闻底部制作
这部分因为没有内容，所以可以添加   来填充内容。设置好宽高后，可以直接给底部添加
背景。
底部样式如下：
/*  底部样式 */
#news_d{
      width:399px;
      height:16px;
      overflow:hidden;    /* 这个一定要加上，内容超出的部分要隐藏，免得撑高底部结构 */
      background:url(../images/gd_btm.gif) no-repeat;
    }
图 4.3.1－4 添加了新闻动态底部样式（还未添加中间内容）
8. 中间部分制作
通过计算得知，中间部分的高度为 251px－64px－16px＝171px。
但是，内容上只设计了6行的高度（行高设为24px）。
因此，中间内容高为 6×24px＝144px，距离上面下面，各为 13px 和 14px。
注意: 通过观察效果图发现，中间部分的宽度并没有达到新闻动态的宽度，而是要窄点。
图 4.3.1－5 中间部分分析
添加中间部分样式
/*  中间样式 */
#news_z{
    height:144px;
    width:335px;
    margin-left:35px;
    margin-top:13px;
    margin-bottom:14px;
    overflow:hidden;    /*  这个一定要加，超出的内容部分要隐藏，免得撑高中间部分 */
    }
添加新闻列表。对于列表，一般使用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>
            <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-20</span></li>
            <li><a href="#">新闻滚动内容内容内容演示6</a><span>2010-01-20</span></li>
          </ul>
      </div>
<!--  中间结束 -->
…….
给新闻列表添加样式
#news ul li { height:24px;}
#news ul li a{
    width:180px;
    float:left;
    display:block;
    overflow:hidden;
    background:url(../images/sj.gif) 0px 8px no-repeat;
    text-indent:15px;
    height:24px;
    }
#news ul li span{
    float:right;
    color:#999;
    }

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。