ASP:循环滚动图片的代码+解释

最新推荐文章于 2017-06-23 13:13:30 发布

shenbau

最新推荐文章于 2017-06-23 13:13:30 发布

阅读量3.5k

点赞数 6

<!DOCTYPE html >
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<body>
<div>
    <div id=demo style="overflow:hidden; WIDTH: 204px; align:center">
      <table cellspacing="0" cellpadding="0" align="center"  border="0">
      <tbody>
        <tr>
          <td id="marquePic1" valign="top">
  
      <table width="660" height="80" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td width="66" align="center"><img src="image/likaifu.jpg" width="55" height="60"></td>
          <td width="66" align="center"><img src="image/likaifu.jpg" width="55" height="60"></td>
          <td width="66" align="center"><img src="image/likaifu.jpg" width="55" height="60"></td>
          <td width="66" align="center"><img src="image/likaifu.jpg" width="55" height="60"></td>
          <td width="66" align="center"><img src="image/likaifu.jpg" width="55" height="60"></td>
          <td width="66" align="center"><img src="image/likaifu.jpg" width="55" height="60"></td>
          <td width="66" align="center"><img src="image/likaifu.jpg" width="55" height="60"></td>
          <td width="66" align="center"><img src="image/likaifu.jpg" width="55" height="60"></td>
          <td width="66" align="center"><img src="image/likaifu.jpg" width="55" height="60"></td>
          <td width="77" align="center"><img src="image/likaifu.jpg" width="55" height="60"></td>
       </tr>
    <tr>
      <td height="5" align="center" >李开复</td>
      <td align="center"> </td>
      <td align="center"> </td>
      <td align="center"> </td>
      <td align="center"> </td>
      <td align="center"> </td>
      <td align="center"> </td>
      <td align="center"> </td>
      <td align="center"> </td>
      <td align="center" bgcolor="#FFFF99"> </td>
    </tr>
  </table>  
  
  </td>
        <td id="marquePic2" valign="top"></td>
      </tr>
    </tbody>
  </table>
</div>
<script type=text/javascript>
var speed=35        //定义速度,实指下面滚动函数的执行间隔,值越小滚动越快
marquePic2.innerHTML=marquePic1.innerHTML       //将demo1中的内容复制到demo2
function Marquee(){                           //开始定义滚动函数
if(demo.scrollLeft>=marquePic1.scrollWidth){   //如果滑动块的位置大于demo2的宽度,滑动块退回一个demo2的宽度
demo.scrollLeft=0
}else{                                         //否则,滑动块向右滚动(图片向左滚)
demo.scrollLeft++
}}                              //滚动函数定义完
var MyMar=setInterval(Marquee,speed)            //设置定时器,使滚动函数每30毫秒运行一次
demo.οnmοuseοver=function() {clearInterval(MyMar)}        //鼠标经过时,清除定时器,停止执行滚动函数,弹出信息;
demo.οnmοuseοut=function() {MyMar=setInterval(Marquee,speed)}     // 鼠标离开后,继续滚动
</script>
</div>
</body>
</html>

<marquee>标签是很方便,但要实现不间断的滚动确比较麻烦.

offsetWidth是指物体可见宽度
scrollLeft是指滚动滑块在滚动条上的位置

<div id=demo style="width:200;overflow:auto">
<table><tr>
<td id=demo1>
<img src='a.gif' width=100><img src='b.gif' width=100></td>
<td id=demo2></td>
</tr></table>
</div>

<script>
var speed=30 //定义速度,实指下面滚动函数的执行间隔,值越小滚动越快
demo2.innerHTML=demo1.innerHTML //将demo1中的内容复制到demo2
function Marquee(){ //开始定义滚动函数
if(demo2.offsetWidth-demo.scrollLeft<=0)
demo.scrollLeft-=demo1.offsetWidth //如果滑动块的位置大于demo2的宽度,滑动块退回一个demo2的宽度
else{
demo.scrollLeft++ //否则,滑动块向右滚动(图片向左滚)
}
}//滚动函数定义完
var MyMar=setInterval(Marquee,speed) //设置定时器,使滚动函数每30毫秒运行一次
demo.οnmοuseοver=function() {clearInterval(MyMar);viewstatus();}//鼠标经过时,清除定时器,停止执行滚动函数,弹出信息;
demo.οnmοuseοut=function() {MyMar=setInterval(Marquee,speed)}// 鼠标离开后,继续滚动

function viewstatus(){//这是我加的函数,很简单,不注释了
mess="demo.scrollLeft:"+demo.scrollLeft+"ndemo1.offsetWidth:"+demo1.offsetWidth+"ndemo2.offsetWidth:"+demo2.offsetWidth;
alert(mess);
}
</script>

源文件：