| 一般，我們采用photoshop制作電視掃描線效果圖片：首先做一個黑白相間的圖案，然后用這個圖案進行填充，再調整圖層的模式或者透明度，效果就出來了。 現在我們不用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> 整個頁面的代碼如下： <html>
<head>
<style>
.tvline td{border-top:1 solid #000000;font:1px;filter:alpha(opacity=30)}
</style>
</head>
<body>
<table class=tvline width=”240″ height=”180″ cellpadding=”0″ cellspacing=”0″ border=”0″ background=”photo1.jpg”>
<script language=”javascript”>
for(n=1;n<=90;n++)
document.write(‘<tr><td> </td></tr>’)
</script>
</table>
</body>
</html> |