table 列表自動滾動顯示代碼

原創 hyholine 2020-06-19 19:52

 

<html>
<head>
<title>滾動信息 - 51windows.net</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style type="text/css">
body{font-size:12px;background-color:#FFF;overflow:hidden;}
td{font-size:12px;}
.titletd td{background-color:#EFEFEF;padding:2px;text-align:center;}
.datatd td{background-color:#FFFFFF;height:18px;padding-left:2px;}
.td1{width:80px;}
.td2{width:85px;}
.td3{width:100px;}
.td4{width:70px;}
.td5{width:60px;}
.td6{width:85px;}
.td7{width:62px;}
</style></head>
<body>
<table border="0" width="100%" cellspacing="0" cellpadding="0">
  <tr>
    <td width="100%">
<table width="550" border="0" cellpadding="0" cellspacing="1" bgcolor="#cccccc">
<tr class="titletd">
<td nowrap class="td1">產品名稱</td>
<td nowrap class="td2">規格</td>
<td nowrap class="td3">產地</td>
<td nowrap class="td4">價格</td>
<td nowrap class="td5">單位</td>
<td nowrap class="td6">企業名稱</td>
<td nowrap class="td7">日期</td>
</tr>
</table>
</td>
  </tr>
  <tr>
    <td width="100%">
<div id="A1">
<div id="A2">
<table width="550" border="0" cellpadding="0" cellspacing="1" bgcolor="#cccccc" style="margin-top:-1px;">
<tbody class="datatd">
<tr>
<td nowrap class="td1">白銀</td>
<td nowrap class="td2">1#</td>
<td nowrap class="td3">#</td>
<td nowrap class="td4" align="right">3,465</td>
<td nowrap class="td5">元/公斤</td>
<td nowrap class="td6">長江現貨</td>
<td nowrap class="td7">2006-8-25</td>
</tr>

<tr>
<td nowrap class="td1">銻</td>
<td nowrap class="td2">1#</td>
<td nowrap class="td3">#</td>
<td nowrap class="td4" align="right">47,000</td>
<td nowrap class="td5">元/公斤</td>
<td nowrap class="td6">長江現貨</td>
<td nowrap class="td7">2006-8-25</td>
</tr>

<tr>
<td nowrap class="td1">電解錳</td>
<td nowrap class="td2">1#</td>
<td nowrap class="td3">#</td>
<td nowrap class="td4" align="right">12,700</td>
<td nowrap class="td5">元/噸</td>
<td nowrap class="td6">長江現貨</td>
<td nowrap class="td7">2006-8-25</td>
</tr>


</tbody>
</table>

</div>
</div>
</td>
  </tr>
</table>

<br>
  
<table border="0" width="100%" cellspacing="0" cellpadding="0">
  <tr>
    <td width="100%">
<table width="160" border="0" cellpadding="0" cellspacing="1" bgcolor="#cccccc">
<tr class="titletd">
<td nowrap class="td1">名稱1</td>
<td nowrap class="td1">名稱2</td>
</tr>
</table>
</td>
  </tr>
  <tr>
    <td width="100%">
<div id="B1">
<div id="B2">
<table width="160" border="0" cellpadding="0" cellspacing="1" bgcolor="#cccccc" style="margin-top:-1px;">
<tbody class="datatd">
<tr>
<td nowrap class="td1">1234567890</td><td nowrap class="td1">1234567890</td>
</tr>
<tr>
<td nowrap class="td1">1234567890</td><td nowrap class="td1">1234567890</td>
</tr>
<tr>
<td nowrap class="td1">1234567890</td><td nowrap class="td1">1234567890</td>
</tr>
<tr>
<td nowrap class="td1">1234567890</td><td nowrap class="td1">1234567890</td>
</tr>
<tr>
<td nowrap class="td1">1234567890</td><td nowrap class="td1">1234567890</td>
</tr>
<tr>
<td nowrap class="td1">1234567890</td><td nowrap class="td1">1234567890</td>
</tr>
<tr>
<td nowrap class="td1">1234567890</td><td nowrap class="td1">1234567890</td>
</tr>
<tr>
<td nowrap class="td1">1234567890</td><td nowrap class="td1">1234567890</td>
</tr>
<tr>
<td nowrap class="td1">1234567890</td><td nowrap class="td1">1234567890</td>
</tr>
<tr>
<td nowrap class="td1">1234567890</td><td nowrap class="td1">1234567890</td>
</tr>
<tr>
<td nowrap class="td1">1234567890</td><td nowrap class="td1">1234567890</td>
</tr>
<tr>
<td nowrap class="td1">1234567890</td><td nowrap class="td1">1234567890</td>
</tr>
<tr>
<td nowrap class="td1">1234567890</td><td nowrap class="td1">1234567890</td>
</tr>
<tr>
<td nowrap class="td1">1234567890</td><td nowrap class="td1">1234567890</td>
</tr>
<tr>
<td nowrap class="td1">1234567890</td><td nowrap class="td1">1234567890</td>
</tr>
<tr>
<td nowrap class="td1">1234567890</td><td nowrap class="td1">1234567890</td>
</tr>
<tr>
<td nowrap class="td1">1234567890</td><td nowrap class="td1">1234567890</td>
</tr>
<tr>
<td nowrap class="td1">1234567890</td><td nowrap class="td1">1234567890</td>
</tr>
</tbody>
</table>

</div>
</div>
</td>
  </tr>
</table>
<SCRIPT language=JavaScript>
<!--
function _InitScroll(_S1,_S2,_W,_H,_T){
return "var marqueesHeight"+_S1+"="+_H+";var stopscroll"+_S1+"=false;var scrollElem"+_S1+"=document.getElementById('"+_S1+"');with(scrollElem"+_S1+"){style.width="+_W+";style.height=marqueesHeight"+_S1+";style.overflow='hidden';noWrap=true;}scrollElem"+_S1+".οnmοuseοver=new Function('stopscroll"+_S1+"=true');scrollElem"+_S1+".οnmοuseοut=new Function('stopscroll"+_S1+"=false');var preTop"+_S1+"=0; var currentTop"+_S1+"=0; var stoptime"+_S1+"=0;var leftElem"+_S2+"=document.getElementById('"+_S2+"');scrollElem"+_S1+".appendChild(leftElem"+_S2+".cloneNode(true));setTimeout('init_srolltext"+_S1+"()',"+_T+");function init_srolltext"+_S1+"(){scrollElem"+_S1+".scrollTop=0;setInterval('scrollUp"+_S1+"()',50);}function scrollUp"+_S1+"(){if(stopscroll"+_S1+"){return;}currentTop"+_S1+"+=1;if(currentTop"+_S1+"==(marqueesHeight"+_S1+"+1)) {stoptime"+_S1+"+=1;currentTop"+_S1+"-=1;if(stoptime"+_S1+"=="+_T/50+") {currentTop"+_S1+"=0;stoptime"+_S1+"=0;}}else{preTop"+_S1+"=scrollElem"+_S1+".scrollTop;scrollElem"+_S1+".scrollTop +=1;if(preTop"+_S1+"==scrollElem"+_S1+".scrollTop){scrollElem"+_S1+".scrollTop=0;scrollElem"+_S1+".scrollTop +=1;}}}";
}

eval(_InitScroll("A1","A2",550,19*6,4000));
eval(_InitScroll("B1","B2",164,19*4,2000));

/*
A1,A2或B1,B2是滾動內容區域外的兩個DIV的ID
如
<div id="B1">
<div id="B2">
_W爲滾動內容的寬度
_H爲滾動內容的高度,必須爲單元格高度的整數倍，這裏每個單元格是19px高
_T爲滾動後每次停留言時間
*/
//-->
</SCRIPT>
<pre style="color:green;">
/*
簡單要說明：

A1,A2或B1,B2是滾動內容區域外的兩個DIV的ID

_W爲滾動內容的寬度
_H爲滾動內容的高度,必須爲單元格高度的整數倍，這裏每個單元格是19px高
_T爲滾動後每次停留言時間

*/
</pre>
</body>
</html>
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

HTML 實現排行榜

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>排行榜</title> <style type="text/cs

Joker_PL 2020-07-08 09:11:56

Dom操作延遲問題

//這個循環會導致第一句dom操作延遲1s2s this.draws=false; //顯示一個div for(var i=0;i<9999;i++){ console.log("2") } //解決方法 this.

大表哥6 2020-07-08 09:09:01

1upx border在某些手機機型上某一邊框顯示不出來解決方案

今天在做uni-app項目進行測試時，發現當邊框爲1upx時，某些框的邊顯示不全（無效）。自己某前遇到問題的手機：iPhone XS Max。展示的bug效果如下：     以上區域中，發現邊框的下邊沒有顯示出來。又是兼容問題導致的bu

Syleapn 2020-07-08 07:53:02

ES6中數組複製與合併

ES6擴展符...在數組中的應用 擴展運算符:採用...，將一個數組轉爲用逗號分隔的參數序列。即更直觀的可以稱爲展開符，eg:對let a = [1,2,3],  ...a  結果 1,2,3 將數組裏面的東西直接展開放在此處   一、

Syleapn 2020-07-08 07:15:13

HTML(超鏈接，建立錨點，建立圖像，圖像地圖)

<html> <head>  <title>超鏈接標籤</title> </head> <body>  <a href="http://syt.coolpage.biz" target="_blank">syt的窩</a><br>  <a

sysydesign 2020-07-08 06:12:45

js 彈出層

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd

iteye_16047 2020-07-08 04:09:44

CSS實現button按鈕閃爍效果

最近有個奇葩需求，我們客戶要求按鈕要像星星一樣一閃一閃的！！！.......... <el-button type="success" class="flash animated infinite">按鈕</el-button> .

橘猫猫猫猫丶 2020-07-08 04:09:33

CSS＋JS實現瀏覽器不保存用戶名密碼

因爲信息安全問題，客戶要求在輸入密碼的時候，不讓瀏覽器彈出是否保存用戶名密碼的框框..... 調查發現只要將input的type指定爲password就會提示，所以想了這麼個辦法... 只試過IE11和Chrome，其他瀏覽器不知道好不好

橘猫猫猫猫丶 2020-07-08 04:09:33

時間控件資源分享

發現一個很好的網站MY97時間控件網，裏面有好多時間控件很方便開發人員根據自己的需求找到自己想要的實現，真是很感謝網站主任的貢獻！

永久前锋 2020-07-08 04:08:19

HTML超文本標記語言學習2.--層疊樣式表的使用

2018.03.27 author：wills 上一篇文章中對HTML中常見的標籤，進行了瞭解，但是僅僅只是瞭解哪些標籤是不夠的，我們如果需要對網頁進一步進行更高級的渲染，就需要用到層疊樣式表。下面是一些粗淺的層疊樣式表的用法

披星戴月观日 2020-07-08 03:15:51

dom.onclick 與 的區別

function test(){alert(this)}cc={}cc.aa=test;cc.bb=function (){test()}cc.aa(

iteye_4926 2020-07-08 03:15:00

[轉載]慎用標籤 提交表單 [IE6無法提交表單][事件衝突]

我們都知道可以使用 [form].submit(); 來動態提交表單,但使用點擊<a/>標籤來提交表單, 會出現什麼情況呢?我們都知道, <a/>有個

iteye_3912 2020-07-08 01:01:43

自用省市級聯及定位

省市二級級聯===========================***///初始化省級聯==============================

iteye_3912 2020-07-08 01:01:43

簡單瞭解HTML編程語言

描述性語言，描述一個頁面長啥樣。他不需要編譯，直接由瀏覽器來解析。 在idea中創建一個HTML文件，裏面有許多標籤 比如 HTML中的標籤有很多，不同標籤表示的意義也不相同。HTML最初設計出來是爲了表現一個以文本爲主的

渴望成功！ 2020-07-08 00:37:26

前端小白快速入門 之（一）HTML5 詳解

作者：浪子花夢 , 個人簡介：一個有趣的程序員 ~ 從今天開始，我將開始學習前端、ASP.NET 的一些知識，莫把假期浪費，大家一起衝！ 衝！ 衝！ 此文只針對向我一樣初學的小白，將詳細講解一些基礎且重要的HTML5 的知識

浪子花梦 2020-07-08 00:22:12