求一个滚动图片的javascript代码

storein 2003-09-01 03:20:50
我在网上着了半天,都没有找到我想要的这种
我希望:能够滚动多幅图片(比如多个logo)
然后当鼠标移动到图片上时,停止滚动(网上的我找到的都不停止滚动)
谢谢
...全文
133 点赞 收藏 7
写回复
7 条回复
切换为时间正序
请发表友善的回复…
发表回复
sw47 2003-09-04
这个可以呀
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>文字滚动</title>
  <meta name="GENERATOR" content="Microsoft Visual Studio.NET 7.0">
  <meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
  <style type=text/css>
  <!--
   .myBoard {
    position: absolute;
    top: 50px;
    left: 50px;
    width: 200px;
    height: 200px;
    background-color: silver;
    visibility: hidden;
    clip: rect(0 0 0 0);
   }
  //-->
  </style>
 <script id=clientEventHandlersJS language=javascript>
 <!--
  var top = 50;
  var left = 50;
  var objs, objCurrent, objNew;
  var i, j;
  var ivlID, ivlsID;
  var bRoll, bScroll, bWait;
  
  bWait = false;   //初始为非等待状态
  objs = 2;     //滚动块的块数
  
  function window_onload() {
   i = 1;
   objCurrent = document.all.item("myBoard0" + i);
   objNew = document.all.item("myBoard0" + (i+1));
   objCurrent.style.clip = "rect(0 200 200 0)";
   objCurrent.style.visibility = "visible";
   bRoll = true;   //开始等待变换
   ivlID = window.setTimeout("roll()",2000);
  }
  
  function roll() {
   window.clearTimeout(ivlID);
   bRoll = false;   //结束等待变换
   j=0;
   objNew.style.visibility = "visible";
   bScroll = true;   //开始滚动
   ivlsID = window.setInterval("scroll();",18);  //开始滚动
  }
 
  function scroll() {
   objCurrent.style.clip = "rect(" + j + " 200 200 0)";
   objCurrent.style.top = 50-j;
   objNew.style.top = 250-j;
   objNew.style.clip = "rect(0 200 " + j + " 0)";
   j+=5;
   if (j>200) {
    window.clearInterval(ivlsID);    //到达顶峰,滚动停止
    bScroll = false;   //滚动结束
    objCurrent.style.visibility = "hidden";
    i++;  //到下一个对象
    objCurrent = document.all.item("myBoard0" + i);
    objNew = document.all.item("myBoard0" + (i+1));
    if(i>=objs) {
     i=0;
     objNew = document.all.item("myBoard0" + (i+1));
    }
    bRoll = true;    //开始等待变换
    if(!bWait) {
     ivlID = window.setTimeout("roll();",2000)   //滚动结束,开始全局变换计时
    }
   }
  }
  
  function bmouseover() {
   if(bRoll) {
    window.clearTimeout(ivlID);
   }else {
    bWait = true;
   }
  }
  
  function bmouseout() {
   if(bRoll) {
    ivlID = window.setTimeout("roll()",2000);
   }else {
    bWait = false;
   }
  }
 //-->
 </script>
</head>
 <body language=javascript onload="return window_onload()">
 <div id="myBoard01" class=myBoard onmouseover="bmouseover();" onmouseout="bmouseout();">
  <table border=0 cellspacing=0 cellpadding=0 width=100% height=100%>
   <tr>
    <td bgcolor=#00ccff align=center>this is info one.</td>
   </tr>
  </table>
 </div>
 <div id="myBoard02" class=myBoard onmouseover="bmouseover();" onmouseout="bmouseout();">
  <table border=0 cellspacing=0 cellpadding=0 width=100% height=100%>
   <tr>
    <td bgcolor="#cccc00" align=center>this is info two.</td>
   </tr>
  </table>
 </div>
 </body>
</html>
回复
sw47 2003-09-03
<marquee onmouseover=stop() onmouseout=start()><img><img><img><img><img></marquee>
回复
sw47 2003-09-03
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>文字滚动</title>
  <meta name="GENERATOR" content="Microsoft Visual Studio.NET 7.0">
  <meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
  <style type=text/css>
  <!--
   .myBoard {
    position: absolute;
    top: 50px;
    left: 50px;
    width: 200px;
    height: 200px;
    background-color: silver;
    visibility: hidden;
    clip: rect(0 0 0 0);
   }
  //-->
  </style>
 <script id=clientEventHandlersJS language=javascript>
 <!--
  var top = 50;
  var left = 50;
  var objs, objCurrent, objNew;
  var i, j;
  var ivlID, ivlsID;
  var bRoll, bScroll, bWait;
  
  bWait = false;   //初始为非等待状态
  objs = 2;     //滚动块的块数
  
  function window_onload() {
   i = 1;
   objCurrent = document.all.item("myBoard0" + i);
   objNew = document.all.item("myBoard0" + (i+1));
   objCurrent.style.clip = "rect(0 200 200 0)";
   objCurrent.style.visibility = "visible";
   bRoll = true;   //开始等待变换
   ivlID = window.setTimeout("roll()",2000);
  }
  
  function roll() {
   window.clearTimeout(ivlID);
   bRoll = false;   //结束等待变换
   j=0;
   objNew.style.visibility = "visible";
   bScroll = true;   //开始滚动
   ivlsID = window.setInterval("scroll();",18);  //开始滚动
  }
 
  function scroll() {
   objCurrent.style.clip = "rect(" + j + " 200 200 0)";
   objCurrent.style.top = 50-j;
   objNew.style.top = 250-j;
   objNew.style.clip = "rect(0 200 " + j + " 0)";
   j+=5;
   if (j>200) {
    window.clearInterval(ivlsID);    //到达顶峰,滚动停止
    bScroll = false;   //滚动结束
    objCurrent.style.visibility = "hidden";
    i++;  //到下一个对象
    objCurrent = document.all.item("myBoard0" + i);
    objNew = document.all.item("myBoard0" + (i+1));
    if(i>=objs) {
     i=0;
     objNew = document.all.item("myBoard0" + (i+1));
    }
    bRoll = true;    //开始等待变换
    if(!bWait) {
     ivlID = window.setTimeout("roll();",2000)   //滚动结束,开始全局变换计时
    }
   }
  }
  
  function bmouseover() {
   if(bRoll) {
    window.clearTimeout(ivlID);
   }else {
    bWait = true;
   }
  }
  
  function bmouseout() {
   if(bRoll) {
    ivlID = window.setTimeout("roll()",2000);
   }else {
    bWait = false;
   }
  }
 //-->
 </script>
</head>
 <body language=javascript onload="return window_onload()">
 <div id="myBoard01" class=myBoard onmouseover="bmouseover();" onmouseout="bmouseout();">
  <table border=0 cellspacing=0 cellpadding=0 width=100% height=100%>
   <tr>
    <td bgcolor=#00ccff align=center>this is info one.</td>
   </tr>
  </table>
 </div>
 <div id="myBoard02" class=myBoard onmouseover="bmouseover();" onmouseout="bmouseout();">
  <table border=0 cellspacing=0 cellpadding=0 width=100% height=100%>
   <tr>
    <td bgcolor="#cccc00" align=center>this is info two.</td>
   </tr>
  </table>
 </div>
 </body>
</html>
回复
连续向左滚动
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>连续向左滚动</title>
<style type="text/css">
<!--
body {
font-size: 9pt;
color: #000000;
}
a {
color: #0000FF;
text-decoration: none;
}
a:hover {
color: #FF0000;
text-decoration: underline;
}
-->
</style>
</head>

<body>

<div id="marquees">
<a href="#">链接一</a>
<a href="#">链接二</a>
<a href="#">链接三</a>
<a href="#">链接四</a>
</div>

<div id="templayer" style="position:absolute;left:0;top:0;visibility:hidden"></div>
<script language="JavaScript">

marqueesWidth=200;

with(marquees){
style.height=0;
style.width=marqueesWidth;
style.overflowX="hidden";
style.overflowY="visible";
noWrap=true;
onmouseover=new Function("stopscroll=true");
onmouseout=new Function("stopscroll=false");
}
preLeft=0; currentLeft=0; stopscroll=false;

function init(){
templayer.innerHTML="";
while(templayer.offsetWidth<marqueesWidth){
templayer.innerHTML+=marquees.innerHTML;
}
marquees.innerHTML+=templayer.innerHTML;
setInterval("scrollLeft()",10);
}init();

function scrollLeft(){
if(stopscroll==true) return;
preLeft=marquees.scrollLeft;
marquees.scrollLeft+=1;
if(preLeft==marquees.scrollLeft){
marquees.scrollLeft=templayer.offsetWidth-marqueesWidth+1;
}
}


</script>
</body>
</html>
回复
coffee_cn 2003-09-03
<marquee
style="width:130px;height:100px;"
direction="up"
SCROLLAMOUNT=10
SCROLLDELAY=400
onmouseover="stop();"
onmouseout="start();">
<br>
1
2
3
4
5
6
7
8
9
0
<br>
</marquee>
回复
storein 2003-09-03
可能我没有说明白我得要求:
图片是从下往上滚动,不是连续的那种,当滚动显示了一副图片时,这副图片应该暂停一下,然后在继续滚动。各副图片见不应该存在不连续的空白。当鼠标放上去时,暂停滚动。
回复
zgmboy 2003-09-03
mark.
回复
发动态
发帖子
JavaScript
创建于2007-09-28

8.4w+

社区成员

Web 开发 JavaScript
申请成为版主
社区公告
暂无公告