QQ 1640076782

2010年04月27日

图片向上滚动代码

Filed under: li — lifengwu @ 11:40 上午

最近做了一个外贸游乐设备网站，其中客户要求，图片向上滚动,找了一些代码，但是对<!DOCTYPE html PUBLIC “-//W3C//dtD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/dtD/xhtml1-transitional.dtd“>
W3C标准兼容性都不怎么好，最后找到这样的代码，发现可以用，兼容性很好，大家可以借鉴一下：
<div id=”mq” onmouseover=iScrollamount=0 onmouseout=iScrollamount=1>
          <div align=”center”>
            <div>
              <dl>
                <dd><a href=”pagelist.html”><img alt=”" src=”image/index-11.jpg” onload=javascript:DrawImage(this);></a> </dd>
                <dt><a href=”pagelist.html”><span>NMR EXPERIMENTa</span></a> </dt>
              </dl>
              <dl>
                <dd><a href=”pagelist.html”><img alt=”" src=”image/index-11.jpg” onload=javascript:DrawImage(this); ></a> </dd>
                <dt><a href=”pagelist.html”><span>ROBOT COMPREHEN</span></a> </dt>
              </dl>
              <dl>
                <dd><a href=”pagelist.html”><img alt=”" src=”image/index-11.jpg” onload=javascript:DrawImage(this); ></a> </dd>
                <dt><a href=”pagelist.html”><span>TIERED WaREHOUS</span></a> </dt>
              </dl>
              <dl>
                <dd><a href=”pagelist.html”><img alt=”" src=”image/index-11.jpg” onload=javascript:DrawImage(this); ></a> </dd>
                <dt><a href=”pagelist.html”><span>POSITION CONTRO</span></a> </dt>
              </dl>
              <dl>
                <dd><a href=”pagelist.html”><img alt=”" src=”image/index-11.jpg” onload=javascript:DrawImage(this); ></a> </dd>
                <dt><a href=”pagelist.html”><span>HYDRaULIC aND C</span></a> </dt>
              </dl>
              <dl>
                <dd><a href=”#pagelist.html”><img alt=”" src=”image/index-11.jpg” onload=javascript:DrawImage(this); ></a> </dd>
                <dt><a href=”pagelist.html”><span>DOUBLE-DIMENSIO</span></a> </dt>
              </dl>
              <dl>
                <dd><a href=”pagelist.html”><img alt=”" src=”image/index-11.jpg” onload=javascript:DrawImage(this); ></a> </dd>
                <dt><a href=”pagelist.html”><span>RUNNING BED FOR</span></a> </dt>
              </dl>
     <dl>
                <dd><a href=”pagelist.html”><img alt=”" src=”image/index-11.jpg” onload=javascript:DrawImage(this); ></a> </dd>
                <dt><a href=”pagelist.html”><span>ROBOT COMPREHEN</span></a> </dt>
              </dl>
              <dl>
                <dd><a href=”pagelist.html”><img alt=”" src=”image/index-11.jpg” onload=javascript:DrawImage(this); ></a> </dd>
                <dt><a href=”pagelist.html”><span>TIERED WaREHOUS</span></a> </dt>
              </dl>
              <dl>
                <dd><a href=”#”><img alt=”" src=”image/index-11.jpg” onload=javascript:DrawImage(this); ></a> </dd>
                <dt><a href=”#”><span>POSITION CONTRO</span></a> </dt>
              </dl>
              <dl>
                <dd><a href=”pagelist.html”><img alt=”" src=”image/index-11.jpg” onload=javascript:DrawImage(this); ></a> </dd>
                <dt><a href=”pagelist.html”><span>HYDRaULIC aND C</span></a> </dt>
              </dl>
              <dl>
                <dd><a href=”pagelist.html”><img alt=”" src=”image/index-11.jpg” onload=javascript:DrawImage(this); ></a> </dd>
                <dt><a href=”pagelist.html”><span>DOUBLE-DIMENSIO</span></a> </dt>
              </dl>
              <dl>
                <dd><a href=”pagelist.html”><img alt=”" src=”image/index-11.jpg” onload=javascript:DrawImage(this); ></a> </dd>
                <dt><a href=”pagelist.html”><span>RUNNING BED FOR</span></a> </dt>
              </dl>
            </div>
          </div>
        </div>

js：
<SCRIPT>  
  var   oMarquee   =   document.getElementById(“mq”);     //滚动对象  
  var   iLineHeight   =   142;     //单行高度，像素  
  var   iLineCount   =   4;     //实际行数  
  var   iScrollamount   =   1;     //每次滚动高度，像素  
  function   run()   {  
  oMarquee.scrollTop   +=   iScrollamount;  
  if   (  oMarquee.scrollTop   ==   iLineCount   *   iLineHeight   )  
  oMarquee.scrollTop   =   0;  
  if   (   oMarquee.scrollTop   %   iLineHeight   ==   0   )   {  
  window.setTimeout(   “run()”,   2000   );  
  }   else   {  
  window.setTimeout(   “run()”,   5   );  
  }  
  }  
  oMarquee.innerHTML   +=   oMarquee.innerHTML;  
  window.setTimeout(   “run()”,   2000   );  
  </SCRIPT>
以后做这样的成排图片向上滚动效果就可以直接拿来用了！！