一般,我們采用photoshop制作電視掃描線效果圖片:首先做一個黑白相間的圖案,然后用這個圖案進行填充,再調(diào)整圖層的模式或者透明度,效果就出來了。

現(xiàn)在我們不用photoshop,而用“css”和“javascript”來做,方法也很簡單(下文代碼中“//”后的是注釋)!

一、準(zhǔn)備一張圖片,名稱大小自定。

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

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

三、建立一個css樣式,把該樣式應(yīng)用于上面的表格,樣式代碼如下。(“#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>

標(biāo)簽:

相關(guān)文章

隨機推薦