中华网校

系列网站: 中华网校 | www.网校.com | 3D模型 | 中华网校教育

电脑网校 | 业界新闻 | 职业网校 | 网校宝典 | 软件下载 | 网校论坛 | 网校联盟

电脑入门 | 网页设计 | 网络编程 | 图形图象 | 三维空间 | 多媒体 | 程序语言 | 操作系统 | 系统专题 | 办公应用 | 软件宝典 | 硬件天下 | 

 

您的位置:首页 >> 网页设计 >> CSS >> 新闻正文

用代码“写”出扫描线效果图片  

作者:1stkiss  时间:2004-12-4 12:18:03  来自:天极设计在线  责任编辑:www.zhirui.com  阅读次数:

我们一般采用photoshop等做图工具制作电视扫描线效果图片:首先做一个黑白相间的图案,然后用这个图案进行填充,再调整图层的模式或者透明度,效果就出来了。

  现在我们不用photoshop,用css和Javascript来做,方法也很简单!

  一、准备一张图片,名为photo1.jpg,大小为:240x180;


  二、插入一个表格,表格长x宽设置为240x180,把cellpadding、cellspacing、border均设置为0,并把表格的背景设置为上面的图片,即代码为:

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


  三、建立一个css样式,把该样式应用于上面的表格,样式代码如下。#000000代表黑色,你也可以换成其他你喜欢的颜色。后面的filter:alpha(opacity=30)是用css滤镜调整细线的透明度。<BR><BR>

  <style>   .tvline td{border-top:1 solid #000000;font:1px;filter:alpha(opacity=30)}   </style>   <STRONG>四、</STRONG>在表格中插入一小段javascript代码:<BR>  <script language="JavaScript">   for(n=1;n<=90;n++)//循环次数为图片高度的一半;     document.write('<tr><td> </td></tr>')//注意td中间有一个全角空格;     //document.write('<tr><td style=line-height:1px>&nbsp;</td></tr>')     //考虑到浏览器的兼容性,你也可以使用上面这一句   </script> <BR>  整个页面的代码如下:<BR>  <html>   <head>   <style>   .tvline td{border-top:1 solid #000000;font:1px;filter:alpha(opacity=30)}   </style>   </head>   <body bgcolor="#FFFFFF" text="#000000">   <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>


  现在保存页面,预览一下效果吧:


相关文章 最新文章 推荐文章
如何在网页中制作虚线表格
用代码“写”出扫描线效果图片

  中华网校依法保护知识产权,如果我们的文章有涉及或侵犯您的有关权益,请即时与我们 联系, 注明网址及文章,我们会即时处理或删除,感谢您的合作!中华网校email
  中华网校由广州市中六电脑城智锐计算机专业培训学院及中华网校技术中心提供网络支持未经本站许可任何个人网站、书刊报社一律不得私自复制,转载本站内容!

关于中华网校 | 广告服务 | 版权声明 | 投稿指南 | 网站合作 | 友情链接 | 网站地图

 

版权所有 中华网校 & 智锐网校 1999-2004 COPYRIGHT (C) 1999-2004 www.ZhiRui.com ALL RIGHTS RESERVED

 
/**/