美好的一天从javame开始！

javame----书写你我的明天！
BlogJava 首页 新随笔 联系 聚合 管理
  4 Posts :: 0 Stories :: 1 Comments :: 0 Trackbacks
滚动方法大全

 

滚动方法大全

一、我认为比较好用的一个方法
<table>
<tr>
<td>
<div id=DIV1 style=overflow:hidden;height:40px>
<div id=DIV2>
    <table>
          <tr><td>
                   //插入你要滚动的内容1
        </td></tr>
      <tr><td>
                   //插入你要滚动的内容2
                </td></tr>
          </table>
    </div>
<div id=DIV3>
</div>
<script type="text/javascript">
    var speed=60;       //设置速度
    var FGDemo=document.getElementById('DIV1');
    var FGDemo1=document.getElementById('DIV2');     //定义三个层的转换
    var FGDemo2=document.getElementById('DIV3');
    FGDemo2.innerHTML=FGDemo1.innerHTML
    function Marquee1(){
    if(FGDemo2.offsetHeight-FGDemo.scrollTop<=0)
    FGDemo.scrollTop-=FGDemo1.offsetHeight
    else{
    FGDemo.scrollTop++
    }
    }
    var MyMar1=setInterval(Marquee1,speed)
    FGDemo.onmouseover=function() {clearInterval(MyMar1)}
    FGDemo.onmouseout=function() {MyMar1=setInterval(Marquee1,speed)}
</script> </div>
</td>
</tr>
</table>

二、最简单的一个方法

<table><tr><td>
<div id=demo style=overflow:hidden;height:40px>   //设置滚动的方向和滚动的高度
<div id=demo1>
     <table>
      <tr><td>
                   //插入你要滚动的内容1
        </td></tr>
      <tr><td>
                   //插入你要滚动的内容2
                </td></tr>              
        </table>
</div>
<div id=demo2>
</div>
<script>
var t=demo.scrollTop
demo2.innerText=demo1.innerText
function qswhMarquee(){
if(demo2.offsetTop-demo.scrollTop<=0)
demo.scrollTop-=demo1.offsetHeight
else
demo.scrollTop = demo.scrollTop +1 //1表示一次移动的象素
}
setInterval(qswhMarquee,100)//100 表示 滚动的时间
</script></div>
</td></tr></table>

以上两个方法在同一页面可以使用多次。但是每次写方法的时候必须将变量名和DIV的名字做相应的改变。
否则会相互干扰。以致其中的一些不能达到效果下面这个方法在同一页面里好象只能用一次。我试过几次都没有能成功

三、比较适合图片的滚动。可能比较长


 <TABLE>
  <TR>
   <TD >
     <DIV id=roll_layer2 style="OVERFLOW: hidden; WIDTH: 100%; HEIGHT: 20px" align=center></DIV>
        <DIV id=topic style="DISPLAY: none">
           <table>
                //插入滚动内容
            </table>
         </DIV>
         <DIV id=topic style="DISPLAY: none">
        <table>    
                         //插入第二版显示的内容
                 </table>          
      </DIV>
<SCRIPT language=JavaScript>
<!--
var speed2=20;
var offset2= 5;
var delay2=500;     //滚动速度设置

var cur2 = 0;

var roll_interval2;
var pasue_timeout2;


function roll2(){
    now_pos2 = roll_layer2.scrollTop;
    roll_layer2.scrollTop+=offset2;
    if (now_pos2==roll_layer2.scrollTop){
        pasue2('stop');
    }
}
function stop_roll2(){
    window.clearInterval(roll_interval2);
}
function start_roll2(){
    roll_layer2.scrollTop = 0;
    roll_interval2 = window.setInterval('roll2()',speed2);
}
function text_switch2(){
    roll_layer2.innerHTML=topic[cur2].innerHTML;
    if (++cur2==topic.length){
        cur2=0;
    }
    roll_layer2.innerHTML+=topic[cur2].innerHTML;
}
function pasue2(act){
    if (act=='stop'){
        stop_roll2();
        pasue2('timeout');
    }else if(act=='timeout'){
        pasue_timeout2 = window.setTimeout("pasue2('switch');",delay2);
    }else if(act=='switch'){
        text_switch2();
        start_roll2();
    }
}
function start2(){
    text_switch2();
    cur2=0;
    pasue2("timeout");
}
start2();
//-->
            </SCRIPT>
                      </TD></TR></TABLE>
这个用起来比较麻烦。可能是代码比较长的缘故。但是如果是图片滚动用起来效果可能比较好。

要看效果,可以将以上代码全部复制,在桌面新建记事本.将所有代码粘帖进去.然后另存为以html格式保存..然后打开就可以看效果了!
posted on 2007-08-16 12:16 齐函 阅读(254) 评论(0)  编辑  收藏

只有注册用户登录后才能发表评论。
网站导航: