ASP：循环滚动图⽚的代码+解释
<!DOCTYPE html >
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>⽆标题⽂档</title>
</head>
<body>
<div>
<div id=demo >
<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">
html滚动效果代码<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是指滚动滑块在滚动条上的位置
<!--对于此例,⽹页中⼀般会有三个容器，此处为demo,demo1和demo2；其中demo1和demo2均在demo中
demo的overflow属性⽤来设置HTML不能容纳内容时的显⽰⽅式，⼀般为hidden，我在这⾥⽤auto是为了⽅便你查看scrollLeft的状态,
另外为⽅便你理解scrollLeft和offsetWidth，我还在后⾯加了⼀个viewstatus函数,⿏标经过容器时会看到相关参数值
//-->
<div id=demo >
<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>
源⽂件：
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论