用代碼“寫”出掃描線效果圖片

現在我們不用photoshop，而用“css”和“javascript”來做，方法也很簡單（下文代碼中“//”后的是注釋）！

一、準備一張圖片，名稱大小自定。

二、插入一個表格，表格長、寬設置為上面圖片的長、寬，把cellpadding（填充）、cellspacing（間距）、border（邊框）均設置為0，并把表格的背景設置為上面的圖片，即代碼為（“width=”后是圖片的高，“height=”后是圖片的寬，“background=”后是圖片的名稱）：

<table cellpadding="0" cellspacing="0" border="0" width="240" height="180" background="photo.jpg">
</table>

三、建立一個css樣式，把該樣式應用于上面的表格，樣式代碼如下。（“#000000”是細線的顏色，可以更換，后面的“filter:alpha(opacity=30)”是細線的透明度。

<style>
.tvline td{border-top:1 solid #000000;font:1px;filter:alpha(opacity=30)}
</style>

四、再在表格中插入一小段“javascript”代碼：

<script language="javascript">
for(n=1;n<=90;n++)//90為圖片高度的一半；
document.write('<tr><td>　</td></tr>')//注意“td”中間有一個全角空格
//document.write('<tr><td style=line-height:1px> </td></tr>')
//考慮到瀏覽器的兼容性，你也可以使用上面這一句替換第三行的代碼
</script>

整個頁面的代碼如下：