• 我们的服务
• 作品与案例
• 关于我们
• 技术博客

幸福的思维空间

幸福工作室的博客

• JS实现无缝图片滚动,兼容所有浏览器

  2010-05-25 22:30/点击数()

  图片滚动已经成为很多网站最常用的手段之一。很多时候，普通的滚动可以用marquee来实现，但要想表现效果以及交互更好的话，可以用JS来做。JS来做图片滚动可以使滚动的内容更加多样化。 下面收集几个方向滚动的JS代码。 先了解一下对象的几个的属性： innerHT

      图片滚动已经成为很多网站最常用的手段之一。很多时候，普通的滚动可以用marquee来实现，但要想表现效果以及交互更好的话，可以用JS来做。JS来做图片滚动可以使滚动的内容更加多样化。

      下面收集几个方向滚动的JS代码。

   

  先了解一下对象的几个的属性：

  innerHTML:设置或获取位于对象起始和结束标签内的 HTML

  scrollHeight: 获取对象的滚动高度。

  scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离

  scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离

  scrollWidth:获取对象的滚动宽度

  offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度

  offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置

  offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置

  offsetWidth:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的宽度

  DIV + JS 图片上无缝滚动

  <style type="text/css">
  <!--
  #demo {
  background: #FFF;
  overflow:hidden;
  border: 1px dashed #CCC;
  height: 100px;
  text-align: center;
  float: left;
  }
  #demo img {
  border: 3px solid #F2F2F2;
  display: block;
  }
  -->
  </style>
  向上滚动
  <div id="demo">
  <div id="demo1">
  <a href="#"><img src="http://www.xingfu880.com/other/link/Clear_logo.gif" border="0" /></a>
  <a href="#"><img src="http://www.xingfu880.com/other/link/Clear_logo.gif" border="0" /></a>
  <a href="#"><img src="http://www.xingfu880.com/other/link/Clear_logo.gif" border="0" /></a>
  <a href="#"><img src="http://www.xingfu880.com/other/link/Clear_logo.gif" border="0" /></a>
  <a href="#"><img src="http://www.xingfu880.com/other/link/Clear_logo.gif" border="0" /></a>
  </div>
  <div id="demo2"></div>
  </div>
  <script>
  <!--
  var speed=10; //数字越大速度越慢
  var tab=document.getElementById("demo");
  var tab1=document.getElementById("demo1");
  var tab2=document.getElementById("demo2");
  tab2.innerHTML=tab1.innerHTML; //克隆demo1为demo2
  function Marquee(){
  if(tab2.offsetTop-tab.scrollTop<=0)//当滚动至demo1与demo2交界时
  tab.scrollTop-=tab1.offsetHeight //demo跳到最顶端
  else{
  tab.scrollTop++
  }
  }
  var MyMar=setInterval(Marquee,speed);
  tab.onmouseover=function() {clearInterval(MyMar)};//鼠标移上时清除定时器达到滚动停止的目的
  tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};//鼠标移开时重设定时器
  -->
  </script>

   

  DIV + CSS + JS图片下无缝滚动

  <style type="text/css">
  <!--
  #demo {
  background: #FFF;
  overflow:hidden;
  border: 1px dashed #CCC;
  height: 100px;
  text-align: center;
  float: left;
  }
  #demo img {
  border: 3px solid #F2F2F2;
  display: block;
  }
  -->
  </style>

  向下滚动
  <div id="demo">
  <div id="demo1">
  <a href="#"><img src="http://www.xingfu880.com/other/link/Clear_logo.gif" border="0" /></a>
  <a href="#"><img src="http://www.xingfu880.com/other/link/Clear_logo.gif" border="0" /></a>
  <a href="#"><img src="http://www.xingfu880.com/other/link/Clear_logo.gif" border="0" /></a>
  <a href="#"><img src="http://www.xingfu880.com/other/link/Clear_logo.gif" border="0" /></a>
  <a href="#"><img src="http://www.xingfu880.com/other/link/Clear_logo.gif" border="0" /></a>
  </div>
  <div id="demo2"></div>
  </div>
  <script>
  <!--
  var speed=10; //数字越大速度越慢
  var tab=document.getElementById("demo");
  var tab1=document.getElementById("demo1");
  var tab2=document.getElementById("demo2");
  tab2.innerHTML=tab1.innerHTML; //克隆demo1为demo2
  tab.scrollTop=tab.scrollHeight
  function Marquee(){
  if(tab1.offsetTop-tab.scrollTop>=0)//当滚动至demo1与demo2交界时
  tab.scrollTop+=tab2.offsetHeight //demo跳到最顶端
  else{
  tab.scrollTop--
  }
  }
  var MyMar=setInterval(Marquee,speed);
  tab.onmouseover=function() {clearInterval(MyMar)};//鼠标移上时清除定时器达到滚动停止的目的
  tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};//鼠标移开时重设定时器
  -->
  </script>

  
  DIV + CSS + JS图片左无缝滚动

  <style type="text/css">
  <!--
  #demo {
  background: #FFF;
  overflow:hidden;
  border: 1px dashed #CCC;
  width: 500px;
  }
  #demo img {
  border: 3px solid #F2F2F2;
  }
  #indemo {
  float: left;
  width: 800%;
  }
  #demo1 {
  float: left;
  }
  #demo2 {
  float: left;
  }
  -->
  </style>
  向左滚动
  <div id="demo">
  <div id="indemo">
  <div id="demo1">
  <a href="#"><img src="http://www.xingfu880.com/other/link/Clear_logo.gif" border="0" /></a>
  <a href="#"><img src="http://www.xingfu880.com/other/link/Clear_logo.gif" border="0" /></a>
  <a href="#"><img src="http://www.xingfu880.com/other/link/Clear_logo.gif" border="0" /></a>
  <a href="#"><img src="http://www.xingfu880.com/other/link/Clear_logo.gif" border="0" /></a>
  <a href="#"><img src="http://www.xingfu880.com/other/link/Clear_logo.gif" border="0" /></a>
  <a href="#"><img src="http://www.xingfu880.com/other/link/Clear_logo.gif" border="0" /></a>
  </div>
  <div id="demo2"></div>
  </div>
  </div>
  <script>
  <!--
  var speed=10; //数字越大速度越慢
  var tab=document.getElementById("demo");
  var tab1=document.getElementById("demo1");
  var tab2=document.getElementById("demo2");
  tab2.innerHTML=tab1.innerHTML;
  function Marquee(){
  if(tab2.offsetWidth-tab.scrollLeft<=0)
  tab.scrollLeft-=tab1.offsetWidth
  else{
  tab.scrollLeft++;
  }
  }
  var MyMar=setInterval(Marquee,speed);
  tab.onmouseover=function() {clearInterval(MyMar)};
  tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};
  -->
  </script>

   

  DIV + JS图片右无缝滚动

  <style type="text/css">
  <!--
  #demo {
  background: #FFF;
  overflow:hidden;
  border: 1px dashed #CCC;
  width: 500px;
  }
  #demo img {
  border: 3px solid #F2F2F2;
  }
  #indemo {
  float: left;
  width: 800%;
  }
  #demo1 {
  float: left;
  }
  #demo2 {
  float: left;
  }
  -->
  </style>
  向右滚动
  <div id="demo">
  <div id="indemo">
  <div id="demo1">
  <a href="#"><img src="http://www.xingfu880.com/other/link/Clear_logo.gif" border="0" /></a>
  <a href="#"><img src="http://www.xingfu880.com/other/link/Clear_logo.gif" border="0" /></a>
  <a href="#"><img src="http://www.xingfu880.com/other/link/Clear_logo.gif" border="0" /></a>
  <a href="#"><img src="http://www.xingfu880.com/other/link/Clear_logo.gif" border="0" /></a>
  <a href="#"><img src="http://www.xingfu880.com/other/link/Clear_logo.gif" border="0" /></a>
  <a href="#"><img src="http://www.xingfu880.com/other/link/Clear_logo.gif" border="0" /></a>
  </div>
  <div id="demo2"></div>
  </div>
  </div>
  <script>
  <!--
  var speed=10; //数字越大速度越慢
  var tab=document.getElementById("demo");
  var tab1=document.getElementById("demo1");
  var tab2=document.getElementById("demo2");
  tab2.innerHTML=tab1.innerHTML;
  function Marquee(){
  if(tab.scrollLeft<=0)
  tab.scrollLeft+=tab2.offsetWidth
  else{
  tab.scrollLeft--
  }
  }
  var MyMar=setInterval(Marquee,speed);
  tab.onmouseover=function() {clearInterval(MyMar)};
  tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};
  -->
  </script>
   

    使用这些代码的时候，一定要注意，不能随便把其中的元素代码去掉，否则会造成一些bug，所以当你用这些代码出现错误或者无法实现的时候，请仔细检查你的代码是否和上面提到的这4种源代码有哪些区别。

  上面4种代码是经过实验。绝对没错的。

  幸福工作室-广州网站建设，广州美工设计（www.xingfu880.com）

上一篇：13个效果超酷的Javascript网页导航菜单

下一篇：swfobject.embedSWF属性与用法

文章分类

• 网络资讯
• 建站经验
• 网站推广
• DIV+CSS
• 程序代码
• 国外酷站

快速搜索

热门:用户体验研究 幸福工作室 百度搜索排名

最新更新

• swfobject.embedSWF属性与用法
• JS实现无缝图片滚动,兼容所有浏
• 13个效果超酷的Javascript网页导
• 72小时学会AS3.0--第一小时
• DataGrid 单元格 字体颜色
• Flex DataGrid 分页
• Flex屏蔽并自定义鼠标右键菜单
• Flex教程入门篇（五）
• Flex教程入门篇（四）
• Flex教程入门篇（三）

技术推荐

• 如何找到完美的色彩搭配
• 2011年网页设计趋势分析
• QuickMark QR在3G时代的商机
• 广州网站建设如何优化企业网站
• 广州网站建设教你做企业优化关键
• 第四届站长SEO大赛博百优前五名
• 我来做淘宝商城的首页设计
• 英文版网站建设的细节
• 百度快照倒退导致关键字掉排名
• 从百度快照分析"广州网站建