用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>
现在保存页面,预览一下效果吧:
猜你喜欢
- DB2 存储过程:基础知识您在客户端工作站上对远程服务器和位于该服务器上的数据库进行分类的任何时候,都存在一个简单的 DB2 客户端/服务器
- 在开始安装SQL Server 2005数据库过程中,出现了下面的错误,安装不能继续进行:The SQL Server System Con
- Hello, 大家好,又是我~ 大家有看过font set和一些要注意的基本问题以及通用字体族两篇文章后,应该对字体的基本有了一些了解。现
- 在Oracle数据库中,DBA可以通过观测一定的表或视图来了解当前空间的使用状况,进而作出可能的调整决定。 一.表空间的自由空间 通过对表空
- 《用户研究角度看设计》系列是淘宝的用户研究团队在可用性测试之后的点滴思考。在每次与淘宝用户的直接接触、观察用户的操作之后,作为体验分析师的我
- 什么是.netMicrosoft® .NET 是 Microsoft XML Web services 平台。XML Web
- IE8 的测试版发布,ACID 3 测试正式推出,听上去是让人兴奋的技术进步,而对中文互联网站却是极大的威胁:这意味着,超过半数的中文网页在
- 注:本文所说的视觉设计师专指网页视觉设计师。网页设计师与平面设计师都归类为设计师,其实这两个职业是跨行业的,虽然有很多设计师一直在跨行业工作
- 由于Oracle自身比较复杂,在Linux环境下安装要涉及很多方面的因素。本文分两个方面介绍在Linux RedHat 6.0环境下Orac
- 今天的问题是请问以下 alert 弹出值分别是什么?var f = function f2()&nb
- 总的来说,提高应用程序性能的最好的方法是发现应用的瓶径之所在,和数据库进行交互的性能无疑是决定应用程序性能的重要环节之一。因为ADO是当前最
- 1:在终端下:mysql -V。 以下是代码片段:[shengting@login ~]$ mysql -Vmysql Ver 14.7 D
- 错误15105,从网上找了一些解决方案,一般都是说文件的权限不足的问题,当然附加的时候必须是有数据库附加权限才可以操作的。解决办法1:给相应
- 在进行ASP网站开发时,有时需在客户端调用MSSQL数据库的数据进行打印,若调用数据量小,可以通过在客户端运用FileSystemObjec
- SQL Server 2000 清理日志精品教程SQL Server 2000 数据库日志太大!如何清理SQL Server 2000的日志
- CSS布局中可以用javascript判断浏览器版本看如下的javascript脚本: if (window.XMLHt
- HTML是万维网上发布超文本的通用语言[1]。从1982年Tim Berners-Lee简化SGML建立HTML的原始定义到2001年发布X
- 阅读上一篇:你是真正的用户体验设计者吗? Ⅵ很可怕,是吧!图中翻译:(从内到外)第一层:用户体验第二层:内容管理界面设计顾客关系管理交互设计
- 函数很简单, 主要是针对字符串和数字两种类型的传入数据分别进行了处理,具体用法:字符类型的strUsername = C
- 阅读上一篇:垂直栅格与渐进式行距(上) 新问题来也匆匆,去也“冲冲”。距上次发布垂直栅格与渐进式行距(上)发布,已经不知不觉过去了