关于滚动图源代码的答复


          目前大部分网页上的滚动图都是用JavaScript脚本做的,因Javascript由浏览器解释执行,因我也是菜鸟一个,就依瓢画窟芦,从别的网页上复制过来,修改几个变量拿来就用。下面就是我的做法:

         原理分析:其原理很简单,首先定义一个DIV合子,设ID号为div_0,这个合子的显示属性为hidden(不可见)。然后设计二个运动合,ID号分别为div_1与div_2,这两个子合或左右,或上下紧密相连,且二个合子的内容保持衔接,朝某个方位整体移动,这样,就形成了滚动效果。合子的内容可以是文字、图片、flash动画或视频。

         代码分析

        一是首先定义合子DIV,ID为div_0,并设定其属性与样式。主要作用:起一个窗口作用,让DIV_1与DIV_2在其上做移动运行。

        <div id="div_0" style="WIDTH: 600px; height:180px COLOR: #ffffff; OVERFLOW: hidden" >  或

        <div id="div_0" >  但必须在CSS样式表中对div_0进行定义或设定。

         中间为移动合内容

        </div>

      二是div_1与div_2定义(下面以表为框架、以图形为显示元素)

      <table width="100%"  border="0" cellspacing="0" cellpadding="0">

       ========  把这个表做二个单位列,每个单位为一个合子,以便于控制显示元素,特别是图片,不用表也可以。

      <tr> 

             <td id="div_1"> ===========  第一单元列ID为:div_1================ 

                 <TABLE height="100%" border=0 cellPadding=0 cellSpacing=0 bgcolor="#FFFFFF" >

                    <TR align="center">            
                       <TD><A href="#"><IMG width="120" height="120" src="XX1.jpg"></A></TD>
                       <TD><A href="#"><IMG width="120" height="120" src="XX2.jpg"></A></TD>
                        ........................可以定义很多显示元素,但长度不能等于合子div_0长度
                   <TR>
                </TABLE>   
           </td>   ===  第一单元列定义结束==========  
               <td id="div_2"></td> ======  第二单位列ID为:div_2,暂不定义内容,后复制div_1内容=====     
      </tr>
   </table>
 三是用javascript控制其移动
<SCRIPT>
  var div_0=document.getElementById("div_0");
  var div_1=document.getElementById("div_1");
  var div_2=document.getElementById("div_2");
  var div_speed=20//速度数值越大速度越慢
  div_2.innerHTML=div_1.innerHTML
  function Marquee_1(){
      if(div_2.offsetWidth-div_0.scrollLeft<=0)
         div_0.scrollLeft-=div_1.offsetWidth
      else
    {div_0.scrollLeft++}
      }
  var MyMar_1=setInterval(Marquee_1,div_speed)
  div_0.onmouseover=function()  //鼠标移动到div_0层时事件:停止
    {clearInterval(MyMar_1)}
  div_0.onmouseout=function()  //鼠标离开div_0层时事件:运行
     {MyMar_1=setInterval(Marquee_1,div_speed)}
</SCRIPT>
  我这个编辑器还要修改,不适做代码,我在留言板上复制了一份。自己慢慢试。
 


(投稿日期:2013-5-28 19:08:36)            返回主页    关闭窗口