js滚动效果

1、图片向右滚动

<div id=demo style="overflow:hidden;height:200;width:500;background:#214984;color:#ffffff">
<table align=left cellpadding=0 cellspace=0 border=0><tr><td id=demo1 valign=top>
<img src="pic/1.jpg" width="156" height="200" />
<img src="pic/2.jpg" width="160" height="198" />
<img src="pic/3.jpg" width="155" height="200" />
<img src="pic/4.jpg" width="157" height="200" />
</td><td id=demo2 valign=top></td></tr></table></div>
<script>
var speed=30
demo2.innerHTML=demo1.innerHTML
function Marquee(){
if(demo.scrollLeft<=0)
demo.scrollLeft+=demo2.offsetWidth
else{
demo.scrollLeft--
}
}
var MyMar=setInterval(Marquee,speed)
demo.οnmοuseοver=function() {clearInterval(MyMar)}
demo.οnmοuseοut=function() {MyMar=setInterval(Marquee,speed)}
</script>

2、图片向下滚动

<div id=demo style="overflow:hidden;height:400;width:160;background:#214984;color:#ffffff">
<table align=top cellpadding=0 cellspace=0 border=0><tr><td id=demo1 valign=top>
<img src="pic/1.jpg" width="156" height="200" /><br>
<img src="pic/2.jpg" width="160" height="198" /><br>
<img src="pic/3.jpg" width="155" height="200" /><br>
<img src="pic/4.jpg" width="157" height="200" />
</td></tr><tr><td id=demo2 valign=top></td></tr>
</table>
</div>
<script>
var speed=30
demo2.innerHTML=demo1.innerHTML
function Marquee(){
if(demo.scrollTop<=0)
demo.scrollTop+=demo2.offsetHeight
else{
demo.scrollTop--
}
}
var MyMar=setInterval(Marquee,speed)
demo.οnmοuseοver=function() {clearInterval(MyMar)}
demo.οnmοuseοut=function() {MyMar=setInterval(Marquee,speed)}
</script>

3、图片向上滚动

<div id=demo style="overflow:hidden;height:400;width:160;background:#214984;color:#ffffff">
<table align=top cellpadding=0 cellspace=0 border=0><tr><td id=demo1 valign=top>
<img src="pic/1.jpg" width="156" height="200" /><br>
<img src="pic/2.jpg" width="160" height="198" /><br>
<img src="pic/3.jpg" width="155" height="200" /><br>
<img src="pic/4.jpg" width="157" height="200" /></td>
</tr><tr><td id=demo2 valign=top></td></tr></table>
</div>
<script>
var speed=30
demo2.innerHTML=demo1.innerHTML//克隆demo1为demo2
function Marquee(){
if(demo2.offsetHeight-demo.scrollTop<=0)//当滚动至demo1与demo2交界时
demo.scrollTop-=demo1.offsetHeight//demo跳到最顶端
else{
demo.scrollTop++
}
}
var MyMar=setInterval(Marquee,speed)//设置定时器
demo.οnmοuseοver=function() {clearInterval(MyMar)}//鼠标移上时清除定时器达到滚动停止的目的
demo.οnmοuseοut=function() {MyMar=setInterval(Marquee,speed)}//鼠标移开时重设定时器
</script>

 

JS效果2

<SCRIPT language=JavaScript>

<!--//

 var x = 0;

 var y = 0;

 var limdex = 800;

 var dest = 0;

 var distance = 0;

 var step = 0;

 var destination = 0;

 var on = true;

 

function scrollit(destination) {

 step = 2;

 dest = destination;

 if (y<dest & y < limdex){

  while (y<dest) {

   step += (step / 7);

   y += step;

   parent.frames[0].scroll(0,y);

  } 

                        // top.main.scroll(dest,0);

  if(dest <=limdex) { parent.frames[0].scroll(0,dest); }

  y = dest;

 }

 if (y > dest)  {

  while (y>dest) {

   step += (step / 7);

   if(y >= (0+step)) { y -= step; parent.frames[0].scroll(0,y); }

   else break;

  }

  if(dest >= 0) { parent.frames[0].scroll(0,dest); }

  y = dest;

 }

 if (y<1) { parent.frames[0].scroll(0,1); y=1 }

 if (y>limdex) { parent.frames[0].scroll(0,limdex); y=limdex }

 y = dest;

}

 

function scrollnow() {

                if (on){

                if (y < limdex & y >= 0 ) {             

                                parent.frames[0].scroll(0,y);

                           

                        y = y + 1;

                       

                        setTimeout('scrollnow()', 8);

       

                }

                else if (y < 0) {

               

                        y = limdex;

                        scrollnow();

                }

            else {

               

                y=0;

                scrollnow();

                }

                }

 

}

 

 

 

// *********************************

// 去掉原来的stopscroll()

function stopscroll() {

        if (on){

        on = false;

        }

        else {

        on = true;

        scrollnow();

        }

       

}

function startscroll() { on = true; scrollnow(); }

function stop_start() {

 if (on){ on = false;}else { on = true;scrollnow();}

}

 

scrollnow();

 

//***********************************

 

//-->

 

</SCRIPT>