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 >