JavaScript 滚动特效代码
注意：
以下代码特效放到页面中时，如果html顶部加入了
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
则必须在顶部加入
<script language="javascript" type="text/javascript"></script>
否则下面定义特效在Firefox 3.0中，不执行。
以下代码特效放到页面中时，如果html顶部加入了
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
则必须在顶部加入
<script language="javascript" type="text/javascript"></script>
否则下面定义特效在Firefox 3.0中，不执行。
<table width="716" height="145" cellpadding="0" cellspacing="0" class="border">
<tr>
<td height="22" background="images/lmbj.gif" bgcolor="#F5F8FA">
<span class="STYLE3"> 精品图片</span>
</td>
</tr>
<tr>
<td height="110">
<script language="JavaScript" type="text/javascript">
var flag=false;
function DrawImage110(ImgD)
{
var image=new Image();
image.src=ImgD.src;
if(image.width>0 && image.height>0)
{
flag=true;
if(image.width/image.height>= 104/102)
{
if(image.width>104)
{
ImgD.width=104;
ImgD.height=(image.height*104)/image.width;
}
else
{
ImgD.width=image.width;
ImgD.height=image.height;
}
ImgD.alt=image.width+"×"+image.height +"px";
}
else
{
if(image.height>102)
{
ImgD.height=102;
ImgD.width=(image.width*102)/image.height;
}
else
{
ImgD.width=image.width;
ImgD.height=image.height;
}
ImgD.alt=image.width+"×"+image.height+"px";
}
}
}
</script>
<table width="717" height="110" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td height="110" align="left" valign="middle">
<div id="demo" style="overflow: hidden; width: 700px;">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td id="demo1" align="left">
<table border="0" cellspacing="0" cellpadding="0">
<tr align="left">
<td>
<table border="0" width="121" height="102" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC">
<tr>
<td align="center">
<table width="98%" height="100" border="0" cellspacing="2" cellpadding="0" bgcolor="#ffffff">
<tr>
<td align="center">
<a href="/school/school120.html" target="_blank">
<img src="/upimg/jiaxiaopic/20085511505686973.jpg" width="104" onload="javascript:DrawImage110(this); "
border="0" /></a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td width="100">
</td>
<td>
<table border="0" width="121" height="102" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC">
<tr>
<td align="center">
<table width="98%" height="100" border="0" cellspacing="2" cellpadding="0" bgcolor="#ffffff">
<tr>
<td align="center">
<a href="/school/school120.html" target="_blank">
<img src="/upimg/jiaxiaopic/20085511504944854.jpg" width="104" onload="javascript:DrawImage110(this); "
border="0" /></a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td width="100">
</td>
<td>
<table border="0" width="121" height="102" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC">
<tr>
<td align="center">
<table width="98%" height="100" border="0" cellspacing="2" cellpadding="0" bgcolor="#ffffff">
<tr>
<td align="center">
<a href="/school/school115.html" target="_blank">
<img src="/upimg/jiaxiaopic/200711291702474136.jpg" width="104" onload="javascript:DrawImage110(this); "
border="0" /></a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td width="100">
</td>
<td>
<table border="0" width="121" height="102" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC">
<tr>
<td align="center">
<table width="98%" height="100" border="0" cellspacing="2" cellpadding="0" bgcolor="#ffffff">
<tr>
<td align="center">
<a href="/school/school115.html" target="_blank">
<img src="/upimg/jiaxiaopic/2007112916351958316.jpg" width="104" onload="javascript:DrawImage110(this); "
border="0" /></a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td width="100">
</td>
<td>
<table border="0" width="121" height="102" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC">
<tr>
<td align="center">
<table width="98%" height="100" border="0" cellspacing="2" cellpadding="0" bgcolor="#ffffff">
<tr>
<td align="center">
<a href="/school/school115.html" target="_blank">
<img src="/upimg/jiaxiaopic/2007112916345714642.jpg" width="104" onload="javascript:DrawImage110(this); "
border="0" /></a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td width="100">
</td>
<td>
<table border="0" width="121" height="102" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC">
<tr>
<td align="center">
<table width="98%" height="100" border="0" cellspacing="2" cellpadding="0" bgcolor="#ffffff">
<tr>
<td align="center">
<a href="/school/school115.html" target="_blank">
<img src="/upimg/jiaxiaopic/2007112916594548344.jpg" width="104" onload="javascript:DrawImage110(this); "
border="0" /></a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td width="100">
</td>
</tr>
</table>
</td>
<td id="demo2">
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<script type="text/javascript" language="JavaScript">
var speed=10; //速度数值越大速度越慢
demo2.innerHTML=demo1.innerHTML; //将demo1的HTML装入demo2
function Marquee()
{
if(demo2.offsetWidth-demo.scrollLeft<=0)
{
demo.scrollLeft-=demo1.offsetWidth;
}
else
{
demo.scrollLeft++;
}
}
var MyMar=setInterval(Marquee,speed); //加载定时器
demo.onmouseover=function() {clearInterval(MyMar)} //清除定时器
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)} //重新加载定时器
</script>
</td>
</tr>
</table>
</td>
</tr>
</table>
<tr>
<td height="22" background="images/lmbj.gif" bgcolor="#F5F8FA">
<span class="STYLE3"> 精品图片</span>
</td>
</tr>
<tr>
<td height="110">
<script language="JavaScript" type="text/javascript">
var flag=false;
function DrawImage110(ImgD)
{
var image=new Image();
image.src=ImgD.src;
if(image.width>0 && image.height>0)
{
flag=true;
if(image.width/image.height>= 104/102)
{
if(image.width>104)
{
ImgD.width=104;
ImgD.height=(image.height*104)/image.width;
}
else
{
ImgD.width=image.width;
ImgD.height=image.height;
}
ImgD.alt=image.width+"×"+image.height +"px";
}
else
{
if(image.height>102)
{
ImgD.height=102;
ImgD.width=(image.width*102)/image.height;
}
else
{
ImgD.width=image.width;
ImgD.height=image.height;
}
ImgD.alt=image.width+"×"+image.height+"px";
}
}
}
</script>
<table width="717" height="110" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td height="110" align="left" valign="middle">
<div id="demo" style="overflow: hidden; width: 700px;">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td id="demo1" align="left">
<table border="0" cellspacing="0" cellpadding="0">
<tr align="left">
<td>
<table border="0" width="121" height="102" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC">
<tr>
<td align="center">
<table width="98%" height="100" border="0" cellspacing="2" cellpadding="0" bgcolor="#ffffff">
<tr>
<td align="center">
<a href="/school/school120.html" target="_blank">
<img src="/upimg/jiaxiaopic/20085511505686973.jpg" width="104" onload="javascript:DrawImage110(this); "
border="0" /></a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td width="100">
</td>
<td>
<table border="0" width="121" height="102" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC">
<tr>
<td align="center">
<table width="98%" height="100" border="0" cellspacing="2" cellpadding="0" bgcolor="#ffffff">
<tr>
<td align="center">
<a href="/school/school120.html" target="_blank">
<img src="/upimg/jiaxiaopic/20085511504944854.jpg" width="104" onload="javascript:DrawImage110(this); "
border="0" /></a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td width="100">
</td>
<td>
<table border="0" width="121" height="102" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC">
<tr>
<td align="center">
<table width="98%" height="100" border="0" cellspacing="2" cellpadding="0" bgcolor="#ffffff">
<tr>
<td align="center">
<a href="/school/school115.html" target="_blank">
<img src="/upimg/jiaxiaopic/200711291702474136.jpg" width="104" onload="javascript:DrawImage110(this); "
border="0" /></a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td width="100">
</td>
<td>
<table border="0" width="121" height="102" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC">
<tr>
<td align="center">
<table width="98%" height="100" border="0" cellspacing="2" cellpadding="0" bgcolor="#ffffff">
<tr>
<td align="center">
<a href="/school/school115.html" target="_blank">
<img src="/upimg/jiaxiaopic/2007112916351958316.jpg" width="104" onload="javascript:DrawImage110(this); "
border="0" /></a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td width="100">
</td>
<td>
<table border="0" width="121" height="102" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC">
<tr>
<td align="center">
<table width="98%" height="100" border="0" cellspacing="2" cellpadding="0" bgcolor="#ffffff">
<tr>
<td align="center">
<a href="/school/school115.html" target="_blank">
<img src="/upimg/jiaxiaopic/2007112916345714642.jpg" width="104" onload="javascript:DrawImage110(this); "
border="0" /></a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td width="100">
</td>
<td>
<table border="0" width="121" height="102" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC">
<tr>
<td align="center">
<table width="98%" height="100" border="0" cellspacing="2" cellpadding="0" bgcolor="#ffffff">
<tr>
<td align="center">
<a href="/school/school115.html" target="_blank">
<img src="/upimg/jiaxiaopic/2007112916594548344.jpg" width="104" onload="javascript:DrawImage110(this); "
border="0" /></a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td width="100">
</td>
</tr>
</table>
</td>
<td id="demo2">
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<script type="text/javascript" language="JavaScript">
var speed=10; //速度数值越大速度越慢
demo2.innerHTML=demo1.innerHTML; //将demo1的HTML装入demo2
function Marquee()
{
if(demo2.offsetWidth-demo.scrollLeft<=0)
{
demo.scrollLeft-=demo1.offsetWidth;
}
else
{
demo.scrollLeft++;
}
}
var MyMar=setInterval(Marquee,speed); //加载定时器
demo.onmouseover=function() {clearInterval(MyMar)} //清除定时器
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)} //重新加载定时器
</script>
</td>
</tr>
</table>
</td>
</tr>
</table>
