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

悍卫者8

悍卫者8

2016-01-29 12:08

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

现在我们不用photoshop,而用“css”和“Javascript”来做,方法也很简单(下文代码中“//”后的是注释)!

一、准备一张图片,名称大小自定。

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/html/)

二、插入一个表格,表格长、宽设置为上面图片的长、宽,把cellpadding(填充)、cellspacing(间距)、border(边框)均设置为0,并把表格的背景设置为上面的图片,即代码为(“width=”后是图片的高,“height=”后是图片的宽,“background=”后是图片的名称):

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

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/html/)

三、建立一个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

展开更多 50%)
分享

猜你喜欢

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

Html CSS布局 Div+CSS XHTML
用代码“写”出扫描线效果图片

用PS打造堆叠效果图片

PS PS基础 ps平面设计教程 ps去水印教程
用PS打造堆叠效果图片

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

用按钮调用jsp代码怎么写?

Web开发
用按钮调用jsp代码怎么写?

怎么用PS做欧美清新效果图片

PS教程
怎么用PS做欧美清新效果图片

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

一个效果写的HashTable代码

Web开发
一个效果写的HashTable代码

pvc地板效果图片

地板 木地板 装修
pvc地板效果图片

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

轻松使用JSP生成饼图

轻松使用JSP生成饼图

HTML组件之:编写日历(1)

HTML组件之:编写日历(1)
下拉加载更多内容 ↓