JS 橫向圖片跑馬燈效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>無標題文檔</title>
</head>

<body>

<DIV id=demo style="OVERFLOW: hidden; WIDTH: 100%; COLOR: #ffffff">
            <TABLE cellSpacing=0 cellPadding=0 align=left border=0 
cellspace="0">
              <TBODY>
              <TR>
                <TD id=demo1 vAlign=top>
                  <TABLE height=105 cellSpacing=0 cellPadding=0 width=130 
                  border=0>
                    <TBODY>
                    <TR>
                      <TD vAlign=top align=middle width=130>
                        <TABLE cellSpacing=0 cellPadding=0 width=130 border=0>
                          <TBODY>
                          <TR>
                            <TD align=middle><A style="CURSOR: hand" mce_style="CURSOR: hand" 
                              onclick="javascript:showResInfo('1','1b844666f83f3838e749e220580a310e')" 
                              href="http://xueke.fjedu.gov.cn/xueKeIndex.do#" mce_href="http://xueke.fjedu.gov.cn/xueKeIndex.do"><IMG 
                              class=bian title=圓,中考考點例析 height=85 
                              src="歡迎訪問福建教育分佈式學科教研資源網羣省級中心站點.files/1b844666f83f3838e749e220580a310e_s.gif" mce_src="歡迎訪問福建教育分佈式學科教研資源網羣省級中心站點.files/1b844666f83f3838e749e220580a310e_s.gif" 
                              width=115></A></TD></TR>
                          <TR>
                            <TD vAlign=center align=middle 
                            height=30>圓,中考考點例...</TD></TR></TBODY></TABLE></TD>
                      <TD vAlign=top align=middle width=130>
                        <TABLE cellSpacing=0 cellPadding=0 width=130 border=0>
                          <TBODY>
                          <TR>
                            <TD align=middle><A style="CURSOR: hand" mce_style="CURSOR: hand" 
                              onclick="javascript:showResInfo('1','781fdb5022a684e594a916a9a319f7c0')" 
                              href="http://xueke.fjedu.gov.cn/xueKeIndex.do#" mce_href="http://xueke.fjedu.gov.cn/xueKeIndex.do"><IMG 
                              class=bian title=巧連半徑妙解圓 height=85 
                              src="歡迎訪問福建教育分佈式學科教研資源網羣省級中心站點.files/781fdb5022a684e594a916a9a319f7c0_s.gif" mce_src="歡迎訪問福建教育分佈式學科教研資源網羣省級中心站點.files/781fdb5022a684e594a916a9a319f7c0_s.gif" 
                              width=115></A></TD></TR>
                          <TR>
                            <TD vAlign=center align=middle 
                          height=30>巧連半徑妙解圓</TD></TR></TBODY></TABLE></TD>
                      <TD vAlign=top align=middle width=130>
                        <TABLE cellSpacing=0 cellPadding=0 width=130 border=0>
                          <TBODY>
                          <TR>
                            <TD align=middle><A style="CURSOR: hand" mce_style="CURSOR: hand" 
                              onclick="javascript:showResInfo('1','9827ef2f233cc1c13b5166dade3b1976')" 
                              href="http://xueke.fjedu.gov.cn/xueKeIndex.do#" mce_href="http://xueke.fjedu.gov.cn/xueKeIndex.do"><IMG 
                              class=bian title=WordList height=85 
                              src="歡迎訪問福建教育分佈式學科教研資源網羣省級中心站點.files/9827ef2f233cc1c13b5166dade3b1976_s.gif" mce_src="歡迎訪問福建教育分佈式學科教研資源網羣省級中心站點.files/9827ef2f233cc1c13b5166dade3b1976_s.gif" 
                              width=115></A></TD></TR>
                          <TR>
                            <TD vAlign=center align=middle 
                            height=30>WordLis...</TD></TR></TBODY></TABLE></TD>
                      <TD vAlign=top align=middle width=130>
                        <TABLE cellSpacing=0 cellPadding=0 width=130 border=0>
                          <TBODY>
                          <TR>
                            <TD align=middle><A style="CURSOR: hand" mce_style="CURSOR: hand" 
                              onclick="javascript:showResInfo('1','072c9d1b4547b0d123eda7d07031b68a')" 
                              href="http://xueke.fjedu.gov.cn/xueKeIndex.do#" mce_href="http://xueke.fjedu.gov.cn/xueKeIndex.do"><IMG 
                              class=bian title="帶電粒子在電場中的運動 " height=85 
                              src="歡迎訪問福建教育分佈式學科教研資源網羣省級中心站點.files/072c9d1b4547b0d123eda7d07031b68a_s.gif" mce_src="歡迎訪問福建教育分佈式學科教研資源網羣省級中心站點.files/072c9d1b4547b0d123eda7d07031b68a_s.gif" 
                              width=115></A></TD></TR>
                          <TR>
                            <TD vAlign=center align=middle 
                            height=30>帶電粒子在電場...</TD></TR></TBODY></TABLE></TD>
                      <TD vAlign=top align=middle width=130>
                        <TABLE cellSpacing=0 cellPadding=0 width=130 border=0>
                          <TBODY>
                          <TR>
                            <TD align=middle><A style="CURSOR: hand" mce_style="CURSOR: hand" 
                              onclick="javascript:showResInfo('1','7ec3a6013f38fb0c19ca1b2a9a853a29')" 
                              href="http://xueke.fjedu.gov.cn/xueKeIndex.do#" mce_href="http://xueke.fjedu.gov.cn/xueKeIndex.do"><IMG 
                              class=bian title=楞次定律演示圖 height=85 
                              src="歡迎訪問福建教育分佈式學科教研資源網羣省級中心站點.files/7ec3a6013f38fb0c19ca1b2a9a853a29_s.gif" mce_src="歡迎訪問福建教育分佈式學科教研資源網羣省級中心站點.files/7ec3a6013f38fb0c19ca1b2a9a853a29_s.gif" 
                              width=115></A></TD></TR>
                          <TR>
                            <TD vAlign=center align=middle 
                          height=30>楞次定律演示圖</TD></TR></TBODY></TABLE></TD>
                      <TD vAlign=top align=middle width=130>
                        <TABLE cellSpacing=0 cellPadding=0 width=130 border=0>
                          <TBODY>
                          <TR>
                            <TD align=middle><A style="CURSOR: hand" mce_style="CURSOR: hand" 
                              onclick="javascript:showResInfo('1','9be626aa408a3035cbc2a3a1890b1832')" 
                              href="http://xueke.fjedu.gov.cn/xueKeIndex.do#" mce_href="http://xueke.fjedu.gov.cn/xueKeIndex.do"><IMG 
                              class=bian title=機翼模型 height=85 
                              src="歡迎訪問福建教育分佈式學科教研資源網羣省級中心站點.files/9be626aa408a3035cbc2a3a1890b1832_s.jpg" mce_src="歡迎訪問福建教育分佈式學科教研資源網羣省級中心站點.files/9be626aa408a3035cbc2a3a1890b1832_s.jpg" 
                              width=115></A></TD></TR>
                          <TR>
                            <TD vAlign=center align=middle 
                          height=30>機翼模型</TD></TR></TBODY></TABLE></TD>
                      <TD vAlign=top align=middle width=130>
                        <TABLE cellSpacing=0 cellPadding=0 width=130 border=0>
                          <TBODY>
                          <TR>
                            <TD align=middle><A style="CURSOR: hand" mce_style="CURSOR: hand" 
                              onclick="javascript:showResInfo('1','6a2af2600cccb5db4e5f709db86559d3')" 
                              href="http://xueke.fjedu.gov.cn/xueKeIndex.do#" mce_href="http://xueke.fjedu.gov.cn/xueKeIndex.do"><IMG 
                              class=bian title=馬德堡半球實驗 height=85 
                              src="歡迎訪問福建教育分佈式學科教研資源網羣省級中心站點.files/6a2af2600cccb5db4e5f709db86559d3_s.jpg" mce_src="歡迎訪問福建教育分佈式學科教研資源網羣省級中心站點.files/6a2af2600cccb5db4e5f709db86559d3_s.jpg" 
                              width=115></A></TD></TR>
                          <TR>
                            <TD vAlign=center align=middle 
                          height=30>馬德堡半球實驗</TD></TR></TBODY></TABLE></TD>
                      <TD vAlign=top align=middle width=130>
                        <TABLE cellSpacing=0 cellPadding=0 width=130 border=0>
                          <TBODY>
                          <TR>
                            <TD align=middle><A style="CURSOR: hand" mce_style="CURSOR: hand" 
                              onclick="javascript:showResInfo('1','d9991038de24ab696839b1a455fc2a21')" 
                              href="http://xueke.fjedu.gov.cn/xueKeIndex.do#" mce_href="http://xueke.fjedu.gov.cn/xueKeIndex.do"><IMG 
                              class=bian title=幾種槓桿 height=85 
                              src="歡迎訪問福建教育分佈式學科教研資源網羣省級中心站點.files/d9991038de24ab696839b1a455fc2a21_s.jpg" mce_src="歡迎訪問福建教育分佈式學科教研資源網羣省級中心站點.files/d9991038de24ab696839b1a455fc2a21_s.jpg" 
                              width=115></A></TD></TR>
                          <TR>
                            <TD vAlign=center align=middle 
                          height=30>幾種槓桿</TD></TR></TBODY></TABLE></TD>
                      <TD vAlign=top align=middle width=130>
                        <TABLE cellSpacing=0 cellPadding=0 width=130 border=0>
                          <TBODY>
                          <TR>
                            <TD align=middle><A style="CURSOR: hand" mce_style="CURSOR: hand" 
                              onclick="javascript:showResInfo('1','7f2bd92462a80f9c376e2c4403c1b977')" 
                              href="http://xueke.fjedu.gov.cn/xueKeIndex.do#" mce_href="http://xueke.fjedu.gov.cn/xueKeIndex.do"><IMG 
                              class=bian title=利用摩擦 height=85 
                              src="歡迎訪問福建教育分佈式學科教研資源網羣省級中心站點.files/7f2bd92462a80f9c376e2c4403c1b977_s.jpg" mce_src="歡迎訪問福建教育分佈式學科教研資源網羣省級中心站點.files/7f2bd92462a80f9c376e2c4403c1b977_s.jpg" 
                              width=115></A></TD></TR>
                          <TR>
                            <TD vAlign=center align=middle 
                          height=30>利用摩擦</TD></TR></TBODY></TABLE></TD>
                      <TD vAlign=top align=middle width=130>
                        <TABLE cellSpacing=0 cellPadding=0 width=130 border=0>
                          <TBODY>
                          <TR>
                            <TD align=middle><A style="CURSOR: hand" mce_style="CURSOR: hand" 
                              onclick="javascript:showResInfo('1','dc619dabadbbe7f73291e4a7f727d406')" 
                              href="http://xueke.fjedu.gov.cn/xueKeIndex.do#" mce_href="http://xueke.fjedu.gov.cn/xueKeIndex.do"><IMG 
                              class=bian title=淋巴的造成過程示意圖 height=85 
                              src="歡迎訪問福建教育分佈式學科教研資源網羣省級中心站點.files/dc619dabadbbe7f73291e4a7f727d406_s.jpg" mce_src="歡迎訪問福建教育分佈式學科教研資源網羣省級中心站點.files/dc619dabadbbe7f73291e4a7f727d406_s.jpg" 
                              width=115></A></TD></TR>
                          <TR>
                            <TD vAlign=center align=middle 
                            height=30>淋巴的造成過程...</TD></TR></TBODY></TABLE></TD>
                      <TD vAlign=top align=middle width=130>
                        <TABLE cellSpacing=0 cellPadding=0 width=130 border=0>
                          <TBODY>
                          <TR>
                            <TD align=middle><A style="CURSOR: hand" mce_style="CURSOR: hand" 
                              onclick="javascript:showResInfo('1','24598412e9faa6e4b43e8936702e049f')" 
                              href="http://xueke.fjedu.gov.cn/xueKeIndex.do#" mce_href="http://xueke.fjedu.gov.cn/xueKeIndex.do"><IMG 
                              class=bian title=花的基本結構 height=85 
                              src="歡迎訪問福建教育分佈式學科教研資源網羣省級中心站點.files/24598412e9faa6e4b43e8936702e049f_s.jpg" mce_src="歡迎訪問福建教育分佈式學科教研資源網羣省級中心站點.files/24598412e9faa6e4b43e8936702e049f_s.jpg" 
                              width=115></A></TD></TR>
                          <TR>
                            <TD vAlign=center align=middle 
                          height=30>花的基本結構</TD></TR></TBODY></TABLE></TD>
                      <TD vAlign=top align=middle width=130>
                        <TABLE cellSpacing=0 cellPadding=0 width=130 border=0>
                          <TBODY>
                          <TR>
                            <TD align=middle><A style="CURSOR: hand" mce_style="CURSOR: hand" 
                              onclick="javascript:showResInfo('1','7b630cec32592aa97d296ecdcae94bf9')" 
                              href="http://xueke.fjedu.gov.cn/xueKeIndex.do#" mce_href="http://xueke.fjedu.gov.cn/xueKeIndex.do"><IMG 
                              class=bian title=關節模式圖 height=85 
                              src="歡迎訪問福建教育分佈式學科教研資源網羣省級中心站點.files/7b630cec32592aa97d296ecdcae94bf9_s.jpg" mce_src="歡迎訪問福建教育分佈式學科教研資源網羣省級中心站點.files/7b630cec32592aa97d296ecdcae94bf9_s.jpg" 
                              width=115></A></TD></TR>
                          <TR>
                            <TD vAlign=center align=middle 
                          height=30>關節模式圖</TD></TR></TBODY></TABLE></TD>
                      <TD vAlign=top align=middle width=130>
                        <TABLE cellSpacing=0 cellPadding=0 width=130 border=0>
                          <TBODY>
                          <TR>
                            <TD align=middle><A style="CURSOR: hand" mce_style="CURSOR: hand" 
                              onclick="javascript:showResInfo('1','5d2706e7dea385fa9ee54866eda931cf')" 
                              href="http://xueke.fjedu.gov.cn/xueKeIndex.do#" mce_href="http://xueke.fjedu.gov.cn/xueKeIndex.do"><IMG 
                              class=bian title=草履蟲的形態結構 height=85 
                              src="歡迎訪問福建教育分佈式學科教研資源網羣省級中心站點.files/5d2706e7dea385fa9ee54866eda931cf_s.jpg" mce_src="歡迎訪問福建教育分佈式學科教研資源網羣省級中心站點.files/5d2706e7dea385fa9ee54866eda931cf_s.jpg" 
                              width=115></A></TD></TR>
                          <TR>
                            <TD vAlign=center align=middle 
                            height=30>草履蟲的形態結...</TD></TR></TBODY></TABLE></TD>
                      <TD vAlign=top align=middle width=130>
                        <TABLE cellSpacing=0 cellPadding=0 width=130 border=0>
                          <TBODY>
                          <TR>
                            <TD align=middle><A style="CURSOR: hand" mce_style="CURSOR: hand" 
                              onclick="javascript:showResInfo('1','b7074e5ac23459ce6104557e54f1b219')" 
                              href="http://xueke.fjedu.gov.cn/xueKeIndex.do#" mce_href="http://xueke.fjedu.gov.cn/xueKeIndex.do"><IMG 
                              class=bian title=北京地鐵線路圖 height=85 
                              src="歡迎訪問福建教育分佈式學科教研資源網羣省級中心站點.files/b7074e5ac23459ce6104557e54f1b219_s.gif" mce_src="歡迎訪問福建教育分佈式學科教研資源網羣省級中心站點.files/b7074e5ac23459ce6104557e54f1b219_s.gif" 
                              width=115></A></TD></TR>
                          <TR>
                            <TD vAlign=center align=middle 
                          height=30>北京地鐵線路圖</TD></TR></TBODY></TABLE></TD>
                      <TD vAlign=top align=middle width=130>
                        <TABLE cellSpacing=0 cellPadding=0 width=130 border=0>
                          <TBODY>
                          <TR>
                            <TD align=middle><A style="CURSOR: hand" mce_style="CURSOR: hand" 
                              onclick="javascript:showResInfo('1','50b1aa5704b61b80c248a7b1f8b9ba1f')" 
                              href="http://xueke.fjedu.gov.cn/xueKeIndex.do#" mce_href="http://xueke.fjedu.gov.cn/xueKeIndex.do"><IMG 
                              class=bian title=不朽的故宮 height=85 
                              src="歡迎訪問福建教育分佈式學科教研資源網羣省級中心站點.files/50b1aa5704b61b80c248a7b1f8b9ba1f_s.jpg" mce_src="歡迎訪問福建教育分佈式學科教研資源網羣省級中心站點.files/50b1aa5704b61b80c248a7b1f8b9ba1f_s.jpg" 
                              width=115></A></TD></TR>
                          <TR>
                            <TD vAlign=center align=middle 
                          height=30>不朽的故宮</TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD>
                <TD id=demo2 vAlign=top> </TD></TR></TBODY></TABLE></DIV>
            <SCRIPT>
var speed3=25//速度數值越大速度越慢
demo2.innerHTML=demo1.innerHTML
function Marquee(){
if(demo2.offsetWidth-demo.scrollLeft<=0)
demo.scrollLeft-=demo1.offsetWidth
else{
demo.scrollLeft++
}
}
var MyMar=setInterval(Marquee,speed3)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed3)}
</SCRIPT>
</body>
</html>
相關文章
相關標籤/搜索