用代碼“寫”出掃描線效果圖片
網(wǎng)頁特效
2010-11-08 09:42:31 文/邱翔
一般，我們采用photoshop制作電視掃描線效果圖片：首先做一個黑白相間的圖案，然后用這個圖案進(jìn)行填充，再調(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"> 三、建立一個css樣式，把該樣式應(yīng)用于上面的表格，樣式代碼如下。（“#000000”是細(xì)線的顏色，可以更換，后面的“filter:alpha(opacity=30)”是細(xì)線的透明度。 <style> 四、再在表格中插入一小段“javascript”代碼： <script language="javascript"> 整個頁面的代碼如下： <html>
</table>
.tvline td{border-top:1 solid #000000;font:1px;filter:alpha(opacity=30)}
</style>
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>
<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>
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
