| 一般,我們采用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> |