开店乐

开店乐电子商务研究 KaiDianLe.Com

网站地图 :

  搜索:

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

作者:佚名    文章来源:不详    点击数:    更新时间:2006-8-7     一般,我们采用photoshop制作电视扫描线效果图片:首先做一个黑白相间的图案,然后用这个图案进行填充,再调整图层的模式或者透明度,效果就出来了。

【文章来源:开店乐KaiDianLe.Com

现在我们不用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>


【日期:2006-10-19】【作者:不祥】【转载自:开店乐】

相关文章:
 最好的网上开店系统:凡人网络购物系统免费下载
 定位你的网站CI形象
 网页布局理念
 主页的艺术处理
 怎样设计首页?(解答)
 新颜:经典品牌logo的web2.0版
 世界顶尖网页设计师作品
 韩国站点精选
 服装网站
 商业网站设计主要原则
 几千个3D及素材网址收集!
 网站欣赏0131
 网站欣赏0130
 网站欣赏013
 网站欣赏0219
 网站欣赏0218
 网站欣赏0216
 网站欣赏0215
 网站欣赏0214
 网站欣赏0213
 网站欣赏0211
 网站欣赏0212
 网站欣赏021
 网站欣赏0119
 网站欣赏0118
 网站欣赏0117
 网站欣赏0115
 网站欣赏011
 网站欣赏113
 网站欣赏112
 网站欣赏111
 网站欣赏110
 网站欣赏109
 网站欣赏108
 网站欣赏108
 网站欣赏107
 网站欣赏107
 网站欣赏106
 网站欣赏105
 网站欣赏104
 网站欣赏103
 网站欣赏102
 网站欣赏101
 网站欣赏10
 网站欣赏99
 网站欣赏98
 网站欣赏97
 网站欣赏96
 网站欣赏95
 网站欣赏94
 网站欣赏93
 网站欣赏92
 网站欣赏91
 网站欣赏90
 网站欣赏9
 网站欣赏89
 网站欣赏88
 网站欣赏87
 网站欣赏86
 网站欣赏85
 网站欣赏84
 网站欣赏83
 网站欣赏82
 网站欣赏81
 网站欣赏80
 网站欣赏8
 网站欣赏79
 网站欣赏78
 网站欣赏77
 网站欣赏76
 网站欣赏75
 网站欣赏74
 网站欣赏73
 网站欣赏72
 网站欣赏71
 网站欣赏70
 网站欣赏7
 网站欣赏69
 网站欣赏68
 网站欣赏67
 网站欣赏66
 网站欣赏65
 网站欣赏64
 网站欣赏63
 网站欣赏62
 网站欣赏61
 网站欣赏60
 网站欣赏6
 网站欣赏59
 网站欣赏58
 网站欣赏57
 网站欣赏56
 网站欣赏55
 网站欣赏54
 网站欣赏53
 网站欣赏52
 网站欣赏51
 网站欣赏50
 网站欣赏5
 网站欣赏49
 网站欣赏48

版权所有:Kaidianle.Com  联系方式:Shnxn@Yhaoo.Com.Cn 京ICP备06028743号 在线留言