今天在
www.51windows.net上发现一个简单的图片滚动的脚本,写的很不错,我修改了一下,可随意上下左右滚动了
<
html
>
< head >
< title > 左右滚动的图片效果 - 51windows.Net </ title >
< meta http-equiv ="Content-Type" content ="text/html; charset=gb2312" >
< script language ="javascript" src ="js/js.js" type ="text/javascript" ></ script >
</ head >
< body bgcolor ="#999999" >
< table border ="1" width ="760" align ="center" >
< tr >
< td width ="215" >
Scroll Width: < input type ="text" size ="5" name ="scrollWidth" >< BR >
Offset Width: < input type ="text" size ="5" name ="offsetWidth" >
</ td >
< td width ="545" >
< div id ="demo" style ="overflow:hidden;height:120px;width:543px;" >
< table width ="100%" cellspacing ="0" >
< tr >
< td id ="demo1" >
< table cellspacing ="2" >
< tr >
< td >< a href ="http://www.51windows.net/mypic/sight/page_01.htm" target ="_blank" >< img src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng016.JPG" border ="0" /></ a ></ td >
< td >< a href ="http://www.51windows.net/mypic/sight/page_01.htm" target ="_blank" >< img src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng017.JPG" border ="0" /></ a ></ td >
< td >< a href ="http://www.51windows.net/mypic/sight/page_01.htm" target ="_blank" >< img src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng018.JPG" border ="0" /></ a ></ td >
< td >< a href ="http://www.51windows.net/mypic/sight/page_01.htm" target ="_blank" >< img src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng019.JPG" border ="0" /></ a ></ td >
< td >< a href ="http://www.51windows.net/mypic/sight/page_01.htm" target ="_blank" >< img src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng020.JPG" border ="0" /></ a ></ td >
< td >< a href ="http://www.51windows.net/mypic/sight/page_01.htm" target ="_blank" >< img src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng021.JPG" border ="0" /></ a ></ td >
</ tr >
</ table > </ td >
< td id ="demo2" ></ td >
</ tr >
</ table >
</ div >
</ td >
</ tr >
< tr >
< td width ="215" > </ td >
< td width ="545" >
< div id ="v1demo" style ="overflow:hidden;height:120px;width:543px;" >
< table width ="100%" cellspacing ="0" >
< tr >
< td id ="v1demo1" >
< table cellspacing ="2" >
< tr >
< td >< a href ="http://www.51windows.net/mypic/sight/page_01.htm" target ="_blank" >< img src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng016.JPG" border ="0" /></ a ></ td >
< td >< a href ="http://www.51windows.net/mypic/sight/page_01.htm" target ="_blank" >< img src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng017.JPG" border ="0" /></ a ></ td >
</ tr >
</ table ></ td >
< td id ="v1demo2" bgcolor ="#000000" >
< table cellspacing ="2" >
< tr >
< td >< a href ="http://www.51windows.net/mypic/sight/page_01.htm" target ="_blank" >< img src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng016.JPG" border ="0" /></ a ></ td >
< td >< a href ="http://www.51windows.net/mypic/sight/page_01.htm" target ="_blank" >< img src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng017.JPG" border ="0" /></ a ></ td >
</ tr >
</ table >
</ td >
</ tr >
</ table >
</ div >
</ td >
</ tr >
< tr >
< td width ="215" > </ td >
< td width ="545" >
< div id ="v2demo" style ="overflow:hidden;height:120px;width:543px;" >
< table width ="100%" cellspacing ="0" >
< tr >
< td id ="v2demo1" >
< table cellspacing ="2" >
< tr >
< td >< a href ="http://www.51windows.net/mypic/sight/page_01.htm" target ="_blank" >< img src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng016.JPG" border ="0" /></ a ></ td >
< td >< a href ="http://www.51windows.net/mypic/sight/page_01.htm" target ="_blank" >< img src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng017.JPG" border ="0" /></ a ></ td >
< td >< a href ="http://www.51windows.net/mypic/sight/page_01.htm" target ="_blank" >< img src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng018.JPG" border ="0" /></ a ></ td >
< td >< a href ="http://www.51windows.net/mypic/sight/page_01.htm" target ="_blank" >< img src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng019.JPG" border ="0" /></ a ></ td >
< td >< a href ="http://www.51windows.net/mypic/sight/page_01.htm" target ="_blank" >< img src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng020.JPG" border ="0" /></ a ></ td >
< td >< a href ="http://www.51windows.net/mypic/sight/page_01.htm" target ="_blank" >< img src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng021.JPG" border ="0" /></ a ></ td >
</ tr >
</ table ></ td >
< td id ="v2demo2" bgcolor ="#FF0000" >
< table cellspacing ="2" >
< tr >
< td >< a href ="http://www.51windows.net/mypic/sight/page_01.htm" target ="_blank" >< img src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng016.JPG" border ="0" /></ a ></ td >
< td >< a href ="http://www.51windows.net/mypic/sight/page_01.htm" target ="_blank" >< img src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng017.JPG" border ="0" /></ a ></ td >
< td >< a href ="http://www.51windows.net/mypic/sight/page_01.htm" target ="_blank" >< img src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng018.JPG" border ="0" /></ a ></ td >
< td >< a href ="http://www.51windows.net/mypic/sight/page_01.htm" target ="_blank" >< img src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng019.JPG" border ="0" /></ a ></ td >
< td >< a href ="http://www.51windows.net/mypic/sight/page_01.htm" target ="_blank" >< img src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng020.JPG" border ="0" /></ a ></ td >
< td >< a href ="http://www.51windows.net/mypic/sight/page_01.htm" target ="_blank" >< img src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng021.JPG" border ="0" /></ a ></ td >
</ tr >
</ table >
</ td >
</ tr >
</ table >
</ div >
</ td >
</ tr >
< tr >
< td ></ td >
< td > </ td >
</ tr >
< tr >
< td ></ td >
< td >
< table width ="100%" border ="0" cellspacing ="0" cellpadding ="5" >
< tr >
< td >
< div id ="hdemo" style ="overflow:hidden;height:550px;width:190px;" >
< table width ="100%" cellspacing ="0" >
< tr >
< td id ="hdemo1" >
< table cellspacing ="2" >
< tr >
< td >< a href ="http://www.51windows.net/mypic/sight/page_01.htm" target ="_blank" >< img src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng016.JPG" border ="0" /></ a ></ td >
</ tr >
< tr >
< td >< a href ="http://www.51windows.net/mypic/sight/page_01.htm" target ="_blank" >< img src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng017.JPG" border ="0" /></ a ></ td >
</ tr >
< tr >
< td >< a href ="http://www.51windows.net/mypic/sight/page_01.htm" target ="_blank" >< img src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng018.JPG" border ="0" /></ a ></ td >
</ tr >
< tr >
< td >< a href ="http://www.51windows.net/mypic/sight/page_01.htm" target ="_blank" >< img src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng019.JPG" border ="0" /></ a ></ td >
</ tr >
< tr >
< td >< a href ="http://www.51windows.net/mypic/sight/page_01.htm" target ="_blank" >< img src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng020.JPG" border ="0" /></ a ></ td >
</ tr >
< tr >
< td >< a href ="http://www.51windows.net/mypic/sight/page_01.htm" target ="_blank" >< img src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng021.JPG" border ="0" /></ a ></ td >
</ tr >
</ table >
</ td >
</ tr >
< tr >
< td id ="hdemo2" >
< table cellspacing ="2" >
< tr >
< td >< a href ="http://www.51windows.net/mypic/sight/page_01.htm" target ="_blank" >< img src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng016.JPG" border ="0" /></ a ></ td >
</ tr >
< tr >
< td >< a href ="http://www.51windows.net/mypic/sight/page_01.htm" target ="_blank" >< img src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng017.JPG" border ="0" /></ a ></ td >
</ tr >
< tr >
< td >< a href ="http://www.51windows.net/mypic/sight/page_01.htm" target ="_blank" >< img src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng018.JPG" border ="0" /></ a ></ td >
</ tr >
< tr >
< td >< a href ="http://www.51windows.net/mypic/sight/page_01.htm" target ="_blank" >< img src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng019.JPG" border ="0" /></ a ></ td >
</ tr >
< tr >
< td >< a href ="http://www.51windows.net/mypic/sight/page_01.htm" target ="_blank" >< img src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng020.JPG" border ="0" /></ a ></ td >
</ tr >
< tr >
< td >< a href ="http://www.51windows.net/mypic/sight/page_01.htm" target ="_blank" >< img src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng021.JPG" border ="0" /></ a ></ td >
</ tr >
</ table >
</ td >
</ tr >
</ table >
</ div >
</ td >
< td >
< div id ="h2demo" style ="overflow:hidden;height:550px;width:190px;" >
< table width ="100%" cellspacing ="0" >
< tr >
< td id ="h2demo1" >
< table cellspacing ="2" >
< tr >
< td >< a href ="http://www.51windows.net/mypic/sight/page_01.htm" target ="_blank" >< img src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng016.JPG" border ="0" /></ a ></ td >
</ tr >
< tr >
< td >< a href ="http://www.51windows.net/mypic/sight/page_01.htm" target ="_blank" >< img src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng017.JPG" border ="0" /></ a ></ td >
</ tr >
< tr >
< td >< a href ="http://www.51windows.net/mypic/sight/page_01.htm" target ="_blank" >< img src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng018.JPG" border ="0" /></ a ></ td >
</ tr >
< tr >
< td >< a href ="http://www.51windows.net/mypic/sight/page_01.htm" target ="_blank" >< img src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng019.JPG" border ="0" /></ a ></ td >
</ tr >
< tr >
< td >< a href ="http://www.51windows.net/mypic/sight/page_01.htm" target ="_blank" >< img src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng020.JPG" border ="0" /></ a ></ td >
</ tr >
< tr >
< td >< a href ="http://www.51windows.net/mypic/sight/page_01.htm" target ="_blank" >< img src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng021.JPG" border ="0" /></ a ></ td >
</ tr >
</ table >
</ td >
</ tr >
< tr >
< td id ="h2demo2" >
< table cellspacing ="2" >
< tr >
< td >< a href ="http://www.51windows.net/mypic/sight/page_01.htm" target ="_blank" >< img src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng016.JPG" border ="0" /></ a ></ td >
</ tr >
< tr >
< td >< a href ="http://www.51windows.net/mypic/sight/page_01.htm" target ="_blank" >< img src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng017.JPG" border ="0" /></ a ></ td >
</ tr >
< tr >
< td >< a href ="http://www.51windows.net/mypic/sight/page_01.htm" target ="_blank" >< img src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng018.JPG" border ="0" /></ a ></ td >
</ tr >
< tr >
< td >< a href ="http://www.51windows.net/mypic/sight/page_01.htm" target ="_blank" >< img src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng019.JPG" border ="0" /></ a ></ td >
</ tr >
< tr >
< td >< a href ="http://www.51windows.net/mypic/sight/page_01.htm" target ="_blank" >< img src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng020.JPG" border ="0" /></ a ></ td >
</ tr >
< tr >
< td >< a href ="http://www.51windows.net/mypic/sight/page_01.htm" target ="_blank" >< img src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng021.JPG" border ="0" /></ a ></ td >
</ tr >
</ table >
</ td >
</ tr >
</ table >
</ div >
</ td >
</ tr >
</ table ></ td >
</ tr >
</ table >
< script > ...
var speed=50
demo2.innerHTML=demo1.innerHTML
function Marquee()...{if(demo2.offsetWidth-demo.scrollLeft<=0)...{demo.scrollLeft-=demo1.offsetWidth;}else...{demo.scrollLeft+=2}}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() ...{clearInterval(MyMar)}
demo.onmouseout=function() ...{MyMar=setInterval(Marquee,speed)}
//通用上下,左右连续滚动,跑马灯
function MarqueeTest(direct,MainId,contentId,copyId)...{
var objMain = document.getElementById(MainId);
var objContent = document.getElementById(contentId);
var objCopy = document.getElementById(copyId);
var mainWidth = objMain.offsetWidth
var contentWidth = objContent.offsetWidth
var copyWidth = objCopy.offsetWidth;
var mainHeight = objMain.offsetHeight;
var contentHeight = objContent.offsetHeight;
var copyHeight = objCopy.offsetHeight;
if (direct=="LEFT")...{
if (copyWidth-objMain.scrollLeft<=0)...{
objMain.scrollLeft-=contentWidth;
}else...{
objMain.scrollLeft+=2;
}
}else if (direct=="RIGHT")...{
if (copyWidth-mainWidth-objMain.scrollLeft>=0)...{
objMain.scrollLeft=contentWidth + copyWidth - mainWidth;
}else...{
objMain.scrollLeft-=2;
}
}else if (direct=="UP")...{
if (copyHeight-objMain.scrollTop<=0)...{
objMain.scrollTop-=contentHeight;
}else...{
objMain.scrollTop+=2;
}
}else if (direct=="DOWN")...{
if (copyHeight-mainHeight-objMain.scrollTop>=0)...{
objMain.scrollTop=contentHeight + copyHeight - mainHeight;
}else...{
objMain.scrollTop-=2;
}
}
}
var v1Scroll = setInterval("MarqueeTest('LEFT','v1demo','v1demo1','v1demo2')",speed);
v1demo.onmouseover=function() ...{clearInterval(v1Scroll)}
v1demo.onmouseout=function() ...{v1Scroll=setInterval("MarqueeTest('LEFT','v1demo','v1demo1','v1demo2')",speed)}
var v2Scroll = setInterval("MarqueeTest('RIGHT','v2demo','v2demo1','v2demo2')",speed);
v2demo.onmouseover=function() ...{clearInterval(v2Scroll)}
v2demo.onmouseout=function() ...{v2Scroll=setInterval("MarqueeTest('RIGHT','v2demo','v2demo1','v2demo2')",speed)}
var h1Scroll = setInterval("MarqueeTest('UP','hdemo','hdemo1','hdemo2')",speed);
hdemo.onmouseover=function() ...{clearInterval(h1Scroll)}
hdemo.onmouseout=function() ...{h1Scroll=setInterval("MarqueeTest('UP','hdemo','hdemo1','hdemo2')",speed)}
var h2Scroll = setInterval("MarqueeTest('DOWN','h2demo','h2demo1','h2demo2')",speed);
h2demo.onmouseover=function() ...{clearInterval(h2Scroll)}
h2demo.onmouseout=function() ...{h2Scroll=setInterval("MarqueeTest('DOWN','h2demo','h2demo1','h2demo2')",speed)}
</ script >
</ body >
</ html >
< head >
< title > 左右滚动的图片效果 - 51windows.Net </ title >
< meta http-equiv ="Content-Type" content ="text/html; charset=gb2312" >
< script language ="javascript" src ="js/js.js" type ="text/javascript" ></ script >
</ head >
< body bgcolor ="#999999" >
< table border ="1" width ="760" align ="center" >
< tr >
< td width ="215" >
Scroll Width: < input type ="text" size ="5" name ="scrollWidth" >< BR >
Offset Width: < input type ="text" size ="5" name ="offsetWidth" >
</ td >
< td width ="545" >
< div id ="demo" style ="overflow:hidden;height:120px;width:543px;" >
< table width ="100%" cellspacing ="0" >
< tr >
< td id ="demo1" >
< table cellspacing ="2" >
< tr >
< td >< a href ="http://www.51windows.net/mypic/sight/page_01.htm" target ="_blank" >< img src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng016.JPG" border ="0" /></ a ></ td >
< td >< a href ="http://www.51windows.net/mypic/sight/page_01.htm" target ="_blank" >< img src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng017.JPG" border ="0" /></ a ></ td >
< td >< a href ="http://www.51windows.net/mypic/sight/page_01.htm" target ="_blank" >< img src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng018.JPG" border ="0" /></ a ></ td >
< td >< a href ="http://www.51windows.net/mypic/sight/page_01.htm" target ="_blank" >< img src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng019.JPG" border ="0" /></ a ></ td >
< td >< a href ="http://www.51windows.net/mypic/sight/page_01.htm" target ="_blank" >< img src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng020.JPG" border ="0" /></ a ></ td >
< td >< a href ="http://www.51windows.net/mypic/sight/page_01.htm" target ="_blank" >< img src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng021.JPG" border ="0" /></ a ></ td >
</ tr >
</ table > </ td >
< td id ="demo2" ></ td >
</ tr >
</ table >
</ div >
</ td >
</ tr >
< tr >
< td width ="215" > </ td >
< td width ="545" >
< div id ="v1demo" style ="overflow:hidden;height:120px;width:543px;" >
< table width ="100%" cellspacing ="0" >
< tr >
< td id ="v1demo1" >
< table cellspacing ="2" >
< tr >
< td >< a href ="http://www.51windows.net/mypic/sight/page_01.htm" target ="_blank" >< img src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng016.JPG" border ="0" /></ a ></ td >
< td >< a href ="http://www.51windows.net/mypic/sight/page_01.htm" target ="_blank" >< img src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng017.JPG" border ="0" /></ a ></ td >
</ tr >
</ table ></ td >
< td id ="v1demo2" bgcolor ="#000000" >
< table cellspacing ="2" >
< tr >
< td >< a href ="http://www.51windows.net/mypic/sight/page_01.htm" target ="_blank" >< img src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng016.JPG" border ="0" /></ a ></ td >
< td >< a href ="http://www.51windows.net/mypic/sight/page_01.htm" target ="_blank" >< img src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng017.JPG" border ="0" /></ a ></ td >
</ tr >
</ table >
</ td >
</ tr >
</ table >
</ div >
</ td >
</ tr >
< tr >
< td width ="215" > </ td >
< td width ="545" >
< div id ="v2demo" style ="overflow:hidden;height:120px;width:543px;" >
< table width ="100%" cellspacing ="0" >
< tr >
< td id ="v2demo1" >
< table cellspacing ="2" >
< tr >
< td >< a href ="http://www.51windows.net/mypic/sight/page_01.htm" target ="_blank" >< img src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng016.JPG" border ="0" /></ a ></ td >
< td >< a href ="http://www.51windows.net/mypic/sight/page_01.htm" target ="_blank" >< img src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng017.JPG" border ="0" /></ a ></ td >
< td >< a href ="http://www.51windows.net/mypic/sight/page_01.htm" target ="_blank" >< img src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng018.JPG" border ="0" /></ a ></ td >
< td >< a href ="http://www.51windows.net/mypic/sight/page_01.htm" target ="_blank" >< img src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng019.JPG" border ="0" /></ a ></ td >
< td >< a href ="http://www.51windows.net/mypic/sight/page_01.htm" target ="_blank" >< img src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng020.JPG" border ="0" /></ a ></ td >
< td >< a href ="http://www.51windows.net/mypic/sight/page_01.htm" target ="_blank" >< img src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng021.JPG" border ="0" /></ a ></ td >
</ tr >
</ table ></ td >
< td id ="v2demo2" bgcolor ="#FF0000" >
< table cellspacing ="2" >
< tr >
< td >< a href ="http://www.51windows.net/mypic/sight/page_01.htm" target ="_blank" >< img src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng016.JPG" border ="0" /></ a ></ td >
< td >< a href ="http://www.51windows.net/mypic/sight/page_01.htm" target ="_blank" >< img src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng017.JPG" border ="0" /></ a ></ td >
< td >< a href ="http://www.51windows.net/mypic/sight/page_01.htm" target ="_blank" >< img src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng018.JPG" border ="0" /></ a ></ td >
< td >< a href ="http://www.51windows.net/mypic/sight/page_01.htm" target ="_blank" >< img src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng019.JPG" border ="0" /></ a ></ td >
< td >< a href ="http://www.51windows.net/mypic/sight/page_01.htm" target ="_blank" >< img src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng020.JPG" border ="0" /></ a ></ td >
< td >< a href ="http://www.51windows.net/mypic/sight/page_01.htm" target ="_blank" >< img src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng021.JPG" border ="0" /></ a ></ td >
</ tr >
</ table >
</ td >
</ tr >
</ table >
</ div >
</ td >
</ tr >
< tr >
< td ></ td >
< td > </ td >
</ tr >
< tr >
< td ></ td >
< td >
< table width ="100%" border ="0" cellspacing ="0" cellpadding ="5" >
< tr >
< td >
< div id ="hdemo" style ="overflow:hidden;height:550px;width:190px;" >
< table width ="100%" cellspacing ="0" >
< tr >
< td id ="hdemo1" >
< table cellspacing ="2" >
< tr >
< td >< a href ="http://www.51windows.net/mypic/sight/page_01.htm" target ="_blank" >< img src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng016.JPG" border ="0" /></ a ></ td >
</ tr >
< tr >
< td >< a href ="http://www.51windows.net/mypic/sight/page_01.htm" target ="_blank" >< img src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng017.JPG" border ="0" /></ a ></ td >
</ tr >
< tr >
< td >< a href ="http://www.51windows.net/mypic/sight/page_01.htm" target ="_blank" >< img src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng018.JPG" border ="0" /></ a ></ td >
</ tr >
< tr >
< td >< a href ="http://www.51windows.net/mypic/sight/page_01.htm" target ="_blank" >< img src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng019.JPG" border ="0" /></ a ></ td >
</ tr >
< tr >
< td >< a href ="http://www.51windows.net/mypic/sight/page_01.htm" target ="_blank" >< img src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng020.JPG" border ="0" /></ a ></ td >
</ tr >
< tr >
< td >< a href ="http://www.51windows.net/mypic/sight/page_01.htm" target ="_blank" >< img src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng021.JPG" border ="0" /></ a ></ td >
</ tr >
</ table >
</ td >
</ tr >
< tr >
< td id ="hdemo2" >
< table cellspacing ="2" >
< tr >
< td >< a href ="http://www.51windows.net/mypic/sight/page_01.htm" target ="_blank" >< img src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng016.JPG" border ="0" /></ a ></ td >
</ tr >
< tr >
< td >< a href ="http://www.51windows.net/mypic/sight/page_01.htm" target ="_blank" >< img src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng017.JPG" border ="0" /></ a ></ td >
</ tr >
< tr >
< td >< a href ="http://www.51windows.net/mypic/sight/page_01.htm" target ="_blank" >< img src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng018.JPG" border ="0" /></ a ></ td >
</ tr >
< tr >
< td >< a href ="http://www.51windows.net/mypic/sight/page_01.htm" target ="_blank" >< img src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng019.JPG" border ="0" /></ a ></ td >
</ tr >
< tr >
< td >< a href ="http://www.51windows.net/mypic/sight/page_01.htm" target ="_blank" >< img src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng020.JPG" border ="0" /></ a ></ td >
</ tr >
< tr >
< td >< a href ="http://www.51windows.net/mypic/sight/page_01.htm" target ="_blank" >< img src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng021.JPG" border ="0" /></ a ></ td >
</ tr >
</ table >
</ td >
</ tr >
</ table >
</ div >
</ td >
< td >
< div id ="h2demo" style ="overflow:hidden;height:550px;width:190px;" >
< table width ="100%" cellspacing ="0" >
< tr >
< td id ="h2demo1" >
< table cellspacing ="2" >
< tr >
< td >< a href ="http://www.51windows.net/mypic/sight/page_01.htm" target ="_blank" >< img src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng016.JPG" border ="0" /></ a ></ td >
</ tr >
< tr >
< td >< a href ="http://www.51windows.net/mypic/sight/page_01.htm" target ="_blank" >< img src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng017.JPG" border ="0" /></ a ></ td >
</ tr >
< tr >
< td >< a href ="http://www.51windows.net/mypic/sight/page_01.htm" target ="_blank" >< img src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng018.JPG" border ="0" /></ a ></ td >
</ tr >
< tr >
< td >< a href ="http://www.51windows.net/mypic/sight/page_01.htm" target ="_blank" >< img src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng019.JPG" border ="0" /></ a ></ td >
</ tr >
< tr >
< td >< a href ="http://www.51windows.net/mypic/sight/page_01.htm" target ="_blank" >< img src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng020.JPG" border ="0" /></ a ></ td >
</ tr >
< tr >
< td >< a href ="http://www.51windows.net/mypic/sight/page_01.htm" target ="_blank" >< img src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng021.JPG" border ="0" /></ a ></ td >
</ tr >
</ table >
</ td >
</ tr >
< tr >
< td id ="h2demo2" >
< table cellspacing ="2" >
< tr >
< td >< a href ="http://www.51windows.net/mypic/sight/page_01.htm" target ="_blank" >< img src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng016.JPG" border ="0" /></ a ></ td >
</ tr >
< tr >
< td >< a href ="http://www.51windows.net/mypic/sight/page_01.htm" target ="_blank" >< img src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng017.JPG" border ="0" /></ a ></ td >
</ tr >
< tr >
< td >< a href ="http://www.51windows.net/mypic/sight/page_01.htm" target ="_blank" >< img src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng018.JPG" border ="0" /></ a ></ td >
</ tr >
< tr >
< td >< a href ="http://www.51windows.net/mypic/sight/page_01.htm" target ="_blank" >< img src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng019.JPG" border ="0" /></ a ></ td >
</ tr >
< tr >
< td >< a href ="http://www.51windows.net/mypic/sight/page_01.htm" target ="_blank" >< img src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng020.JPG" border ="0" /></ a ></ td >
</ tr >
< tr >
< td >< a href ="http://www.51windows.net/mypic/sight/page_01.htm" target ="_blank" >< img src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng021.JPG" border ="0" /></ a ></ td >
</ tr >
</ table >
</ td >
</ tr >
</ table >
</ div >
</ td >
</ tr >
</ table ></ td >
</ tr >
</ table >
< script > ...
var speed=50
demo2.innerHTML=demo1.innerHTML
function Marquee()...{if(demo2.offsetWidth-demo.scrollLeft<=0)...{demo.scrollLeft-=demo1.offsetWidth;}else...{demo.scrollLeft+=2}}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() ...{clearInterval(MyMar)}
demo.onmouseout=function() ...{MyMar=setInterval(Marquee,speed)}
//通用上下,左右连续滚动,跑马灯
function MarqueeTest(direct,MainId,contentId,copyId)...{
var objMain = document.getElementById(MainId);
var objContent = document.getElementById(contentId);
var objCopy = document.getElementById(copyId);
var mainWidth = objMain.offsetWidth
var contentWidth = objContent.offsetWidth
var copyWidth = objCopy.offsetWidth;
var mainHeight = objMain.offsetHeight;
var contentHeight = objContent.offsetHeight;
var copyHeight = objCopy.offsetHeight;
if (direct=="LEFT")...{
if (copyWidth-objMain.scrollLeft<=0)...{
objMain.scrollLeft-=contentWidth;
}else...{
objMain.scrollLeft+=2;
}
}else if (direct=="RIGHT")...{
if (copyWidth-mainWidth-objMain.scrollLeft>=0)...{
objMain.scrollLeft=contentWidth + copyWidth - mainWidth;
}else...{
objMain.scrollLeft-=2;
}
}else if (direct=="UP")...{
if (copyHeight-objMain.scrollTop<=0)...{
objMain.scrollTop-=contentHeight;
}else...{
objMain.scrollTop+=2;
}
}else if (direct=="DOWN")...{
if (copyHeight-mainHeight-objMain.scrollTop>=0)...{
objMain.scrollTop=contentHeight + copyHeight - mainHeight;
}else...{
objMain.scrollTop-=2;
}
}
}
var v1Scroll = setInterval("MarqueeTest('LEFT','v1demo','v1demo1','v1demo2')",speed);
v1demo.onmouseover=function() ...{clearInterval(v1Scroll)}
v1demo.onmouseout=function() ...{v1Scroll=setInterval("MarqueeTest('LEFT','v1demo','v1demo1','v1demo2')",speed)}
var v2Scroll = setInterval("MarqueeTest('RIGHT','v2demo','v2demo1','v2demo2')",speed);
v2demo.onmouseover=function() ...{clearInterval(v2Scroll)}
v2demo.onmouseout=function() ...{v2Scroll=setInterval("MarqueeTest('RIGHT','v2demo','v2demo1','v2demo2')",speed)}
var h1Scroll = setInterval("MarqueeTest('UP','hdemo','hdemo1','hdemo2')",speed);
hdemo.onmouseover=function() ...{clearInterval(h1Scroll)}
hdemo.onmouseout=function() ...{h1Scroll=setInterval("MarqueeTest('UP','hdemo','hdemo1','hdemo2')",speed)}
var h2Scroll = setInterval("MarqueeTest('DOWN','h2demo','h2demo1','h2demo2')",speed);
h2demo.onmouseover=function() ...{clearInterval(h2Scroll)}
h2demo.onmouseout=function() ...{h2Scroll=setInterval("MarqueeTest('DOWN','h2demo','h2demo1','h2demo2')",speed)}
</ script >
</ body >
</ html >