用css+Javascript实现扫描线效果图片
作者：1stkiss 来源：天极设计在线 时间：2007-11-08 19:12:00
我们一般采用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滤镜调整细线的透明度。
<style>
.tvline td{border-top:1 solid #000000;font:1px;filter:alpha(opacity=30)}
</style>
四、</STRONG>在表格中插入一小段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>
现在保存页面，预览一下效果吧:
0
投稿猜你喜欢
基于Python实现五子棋-(人机对战)
Swoole webSocket消息服务系统压力测试解析
try finally 妙用,防止内存泄漏
在Windows的Apache服务器上配置对PHP和CGI的支持
Python命令行参数解析模块optparse使用实例
JS判断元素是否在可视区域技巧详解
Python iter()函数用法实例分析
Golang中 Slice的分析与使用源码解析
php引用返回与取消引用的详解
利用Python+eval函数构建数学表达式计算器
keras模型保存为tensorflow的二进制模型方式
asp获取软件下载的真实地址！再谈获取Response.redirect重定向的URL！
最新整理Python中的type和object的示例详解
python中plot实现即时数据动态显示方法
Scrapy爬虫Response子类在应用中的问题解析
在MySQL中用正则表达式替换数据库中的内容的方法
Python3中的真除和Floor除法用法分析
JavaScript+Node.js写一款markdown解析器
隐蔽的ASP后门 大家可以查看下
Pygame游戏开发之太空射击实战子弹与碰撞处理篇
