注册 登录  
 加关注
查看详情
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

悠游自在

似水流年,悠游天地,自在我心

 
 
 

日志

 
 
 
 

网页:多图片横屏滚动的原理与实现  

2014-07-28 20:58:01|  分类: IT技术 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
假设有多张图片,不能同时显示在一个div中,想让它们以横向滚动的方式在div中滚动显示,应该怎么实现呢。
首先,这里涉及到一个容器控件的视口和滚动范围的概念。
什么是视口呢?就是容器在页面上显示的大小,这个通常是由width、height属性定义出来的,在javascript里取得这个容器控件后,用offsetWidth、offsetHeight来取得视口的大小。
滚动范围呢是由容器内部的控件的大小来计算出来的。如下所示:
<div id="boxframe"  style="width:100px;height:100px; overflow:hidden;">
    <div id="boxbig"  style="width:500px;height:500px" ></div>
</div>
boxframe在外层,它的视口大小是100*100,而其内部的boxbig却有500*500大,受boxframe大小的限制,boxbig显示不全(boxframe有overflow:hidden;的属性,表示超出其边框的不显示),但系统让boxframe有一个滚动尺寸,使其通过滚动,可以浏览boxbig的全部内容,在上例中,boxframe的滚动尺寸就为500*500。有了视口尺寸和滚动尺寸,我们还需要指定滚动的位置,才能确定显示的boxbig中的哪个位置的内容。滚动位置是通过boxframe的scrollLeft、scrollRight确定的。如下图所示,boxframe在横向滚动了100px的示意。
网页:多图片横屏滚动的原理与实现 - Grace - 悠游自在
 以上讲了这么多,无非是说明,只要外框比内容小,滚动可以有。
接下来介绍,如何设定自动滚动。这需要用到javascript里的setInterval,它可按照指定的周期(以毫秒计)来调用函数。
那么,为了用div实现横向滚动,需要有什么特别注意的呢。到网上搜一搜,就会发现关于横向滚动的教学里很多是用table作为容器控件来实现横向滚动,在竖向滚动的时候才用div,这是为什么呢?因为在缺省的情况下,一个div占一排,多个div是竖向排列的。要让div横向排在一起,需要指定其float:left属性。另外,多个div横排在一起,还需要其外层容器的width能够容纳多个div的宽度和,否则还是会自动换行。
最后说明一点,为了使得滚动的效果比较平滑,会先将多个图片排成一排,放在一个很宽的div里,然后再复制一个相同的div,与前面的div放在一排,这样,滚动的范围事实上是两倍的多图片的宽度。
以下是实现的代码:
  <style >
      .boxframe {overflow: hidden; height: 120px; width: 600px; color: #ff0000 ;margin:0px auto     }
      .boxbig { overflow: hidden; height: 120px; width: 970px; }
      .picdiv { float:left}
      .picitem { height: 120px; width: 150px; margin:3px,15px}
  </style>
  <div id="boxframe" class="boxframe">
      <div id="boxbig1" class="boxbig">
          <div class="picdiv">
                <img border="0" src="http://www.qpsh.com/icon/BS9097.jpg" width="150" height="100" hspace="22"><a href="http://www.fankelipinka.com" target="_blank"></a></img><br>
                <center><b>说明一</b></center>
          </div>
          <div class="picdiv">
                <img border="0" src="http://www.qpsh.com/icon/BS9092.jpg" width="150" height="100" hspace="22"><a href="http://www.wangtx.com" target="_blank"></a></img><br>
                <center><b>说明二</b></center>
          </div>
          <div class="picdiv">
                <img border="0" src="http://www.qpsh.com/icon/BS9084.jpg" width="150" height="100" hspace="22"><a href="http://www.yamaxun.org" target="_blank"></a></img><br>
                <center><b>说明三</b></center>
          </div>
          <div class="picdiv">
                <img border="0" src="http://www.qpsh.com/icon/BS9079.jpg" width="150" height="100" hspace="22"><a href="http://www.cnwenger.com" target="_blank"></a></img><br>
                <center><b>说明四</b></center>
          </div>
          <div class="picdiv">
                <img border="0" src="http://www.qpsh.com/icon/BS9070.jpg" width="150" height="100" hspace="22"><a href="http://www.pc555.com" target="_blank"></a></img><br>
                <center><b>说明五</b></center>
          </div>
      </div>
      <div id="boxbig2" class="boxbig"></div>
  </div>
  <script type="text/javascript">
      boxbig2.innerHTML = boxbig1.innerHTML;
      var speed1 = 20;
      function MarqueesLeft() {
          var d = document.getElementById("boxframe");
          if (d.scrollLeft + d.offsetWidth >= d.scrollWidth)
              d.scrollLeft = 0;
          else
              d.scrollLeft ++;
      }
      function MarqueesRight() {
          var d = document.getElementById("boxframe");
          a = eval(1);
          if (d.scrollLeft - 1 <= 0)
              d.scrollLeft = d.scrollWidth - d.offsetWidth;
          else
              d.scrollLeft --;
      }
      var MyMars1 = setInterval(MarqueesLeft, speed1)//如果要实现向右滚动就把MarqueesLeft换成MarqueesRight
      boxframe.onmouseover = function () { clearInterval(MyMars1) }//当鼠标进入boxframe区域时,暂时停止滚动,方便用户选取
      boxframe.onmouseout = function () { MyMars1 = setInterval(MarqueesLeft, speed1) }//如果要实现向右滚动就把MarqueesLeft换成MarqueesRight
  </script>
本文参考了以下网上资料。
http://www.cnblogs.com/panjun-Donet/archive/2008/09/19/1294310.html
http://wenku.baidu.com/view/c306b41714791711cc791710.html
  评论这张
 
阅读(504)| 评论(1)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018