位置：艺考-设计-网页素材-网页特效-用代码“写”出扫描线效果图片

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

网页特效

网页特效

2010-11-08 09:42:31 文/邱翔

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

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

阅读原文内容投诉

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

下载Word文档到电脑，方便收藏和打印～

下载Word文档

艺考相关文章
发现更多艺考内容

带你看艺考
艺考信息时光机

2025年景德镇陶瓷大学书法学专业不组织校考

2025年景德镇陶瓷大学书法学专业不组织校考
2025年景德镇陶瓷大学书法学专业不组织校考
2025艺考2025年景德镇陶瓷大学书法学专业不组织校考2024/11/30

2025年上海戏剧学院美术类校考专业名单

2025年上海戏剧学院美术类校考专业名单
2025年上海戏剧学院美术类校考专业名单
2025艺考2025年上海戏剧学院美术类校考专业名单2024/11/30

2025年新疆艺考录取规则

2025年新疆艺考录取规则
2025年新疆艺考录取规则2025年新疆艺考录取规则2025年新疆艺考录取规则2025年新疆艺考录取规则
2025艺考2025年新疆艺考录取规则2024/11/30

2025年广西艺术学院校考专业名单

2025年广西艺术学院校考专业名单
2025年广西艺术学院校考专业名单2025年广西艺术学院校考专业名单2025年广西艺术学院校考专业名单2025年广西艺术学院校考专业名单
2025艺考2025年广西艺术学院校考专业名单2024/11/30

2025年山东艺术学院9个本科专业按普通类招生

2025年山东艺术学院9个本科专业按普通类招生
2025年山东艺术学院9个本科专业按普通类招生2025年山东艺术学院9个本科专业按普通类招生2025年山东艺术学院9个本科专业按普通类招生2025年山东艺术学院9个本科专业按普通类招生
2025艺考2025年山东艺术学院9个本科专业按普通类招生2024/11/30

2025年河北美术学院校考专业名单

2025年河北美术学院校考专业名单
2025年河北美术学院校考专业名单
2025艺考2025年河北美术学院校考专业名单2024/11/29

2025年上海视觉艺术学院取消所有专业校考

2025年上海视觉艺术学院取消所有专业校考
2025年上海视觉艺术学院取消所有专业校考
2025艺考2025年上海视觉艺术学院取消所有专业校考2024/11/29

辽宁科技大学2025年承认各省美术统考成绩

辽宁科技大学2025年承认各省美术统考成绩
辽宁科技大学2025年承认各省美术统考成绩辽宁科技大学2025年承认各省美术统考成绩辽宁科技大学2025年承认各省美术统考成绩辽宁科技大学2025年承认各省美术统考成绩
2025艺考辽宁科技大学2025年承认各省美术统考成绩2024/11/29

2025年安徽书法统考人数大幅上涨20%

2025年安徽书法统考人数大幅上涨20%
2025年安徽书法统考人数大幅上涨20%2025年安徽书法统考人数大幅上涨20%2025年安徽书法统考人数大幅上涨20%2025年安徽书法统考人数大幅上涨20%
2025艺考2025年安徽书法统考人数大幅上涨20%2024/11/29

2025年西藏艺术类录取综合分计算公式

2025年西藏艺术类录取综合分计算公式
2025年西藏艺术类录取综合分计算公式2025年西藏艺术类录取综合分计算公式2025年西藏艺术类录取综合分计算公式2025年西藏艺术类录取综合分计算公式
2025艺考2025年西藏艺术类录取综合分计算公式2024/11/29

2025年辽宁省艺术类综合分计算公式

2025年辽宁省艺术类综合分计算公式
2025年辽宁省艺术类综合分计算公式2025年辽宁省艺术类综合分计算公式2025年辽宁省艺术类综合分计算公式2025年辽宁省艺术类综合分计算公式
2025艺考2025年辽宁省艺术类综合分计算公式2024/11/29

2025年贵州省艺术类录取综合分计算公式

2025年贵州省艺术类录取综合分计算公式
2025年贵州省艺术类录取综合分计算公式
2025艺考2025年贵州省艺术类录取综合分计算公式2024/11/29

山东艺术学院2025年取消所有美术与设计类专业校考

山东艺术学院2025年取消所有美术与设计类专业校考
山东艺术学院2025年取消所有美术与设计类专业校考山东艺术学院2025年取消所有美术与设计类专业校考山东艺术学院2025年取消所有美术与设计类专业校考山东艺术学院2025年取消所有美术与设计类专业校考
2025艺考山东艺术学院2025年取消所有美术与设计类专业校考2024/11/29

2025年鲁迅美术学院12个美术类专业不组织校考

2025年鲁迅美术学院12个美术类专业不组织校考
2025年鲁迅美术学院12个美术类专业不组织校考2025年鲁迅美术学院12个美术类专业不组织校考2025年鲁迅美术学院12个美术类专业不组织校考2025年鲁迅美术学院12个美术类专业不组织校考
2025艺考2025年鲁迅美术学院12个美术类专业不组织校考2024/11/29

2025年沈阳音乐学院校考专业名单

2025年沈阳音乐学院校考专业名单
2025年沈阳音乐学院校考专业名单
2025艺考2025年沈阳音乐学院校考专业名单2024/11/29

2025年广东省艺术类平行志愿综合分计算公式

2025年广东省艺术类平行志愿综合分计算公式
2025年广东省艺术类平行志愿综合分计算公式2025年广东省艺术类平行志愿综合分计算公式2025年广东省艺术类平行志愿综合分计算公式2025年广东省艺术类平行志愿综合分计算公式
2025艺考2025年广东省艺术类平行志愿综合分计算公式2024/11/29

教育部对做好2025年普通高校部分特殊类型（含艺术类专业）招生工作作出部署

教育部对做好2025年普通高校部分特殊类型（含艺术类专业）招生工作作出部署
教育部对做好2025年普通高校部分特殊类型（含艺术类专业）招生工作作出部署
2025艺考教育部对做好2025年普通高校部分特殊类型（含艺术类专业）招生工作作出部署2024/11/29

天津美术学院2025年取消数字媒体艺术（中外合作办学）专业校考

天津美术学院2025年取消数字媒体艺术（中外合作办学）专业校考
天津美术学院2025年取消数字媒体艺术（中外合作办学）专业校考
2025艺考天津美术学院2025年取消数字媒体艺术（中外合作办学）专业校考2024/11/29

2025年中央民族大学艺术类校考专业名单

2025年中央民族大学艺术类校考专业名单
2025年中央民族大学艺术类校考专业名单2025年中央民族大学艺术类校考专业名单2025年中央民族大学艺术类校考专业名单2025年中央民族大学艺术类校考专业名单
2025艺考2025年中央民族大学艺术类校考专业名单2024/11/29

2025年南京艺术学院校考专业名单

2025年南京艺术学院校考专业名单
2025年南京艺术学院校考专业名单2025年南京艺术学院校考专业名单2025年南京艺术学院校考专业名单2025年南京艺术学院校考专业名单
2025艺考2025年南京艺术学院校考专业名单2024/11/29

艺考热门标签

艺考许愿院校库艺考招生简章招生章程艺术类招生章程高考招生计划艺术类招生计划艺术类统考时间艺术类统考大纲艺考人数美术联考模拟卷美术高考高分卷艺考文化课各院校高考录取分数线艺术类录取分数线艺术类专业分数线艺术类统考合格线艺术类统考查分艺术类校考专业成绩查询美术统考考题美术校考考题画室排名大全录取查询录取通知书新生入学须知在线许愿开学时间新生大数据
没有更多了？去看看其它艺考内容吧

艺考热搜

查看更多

艺考数据
艺考资源站

  • 艺考分数线
  • 艺考简章
西安音乐学院2024年本科招生非校考专业分省录取最低分数线艺术类录取分数线
浙江工业大学之江学院2024年河南省艺术类录取分数线艺术类录取分数线
2024年东华理工大学艺术录取分数线艺术类录取分数线
许昌电气职业学院2024年艺术专科批各专业录取分数线艺术类录取分数线
河南应用技术职业学院2024年普招艺术类、对口类录取分数统计表艺术类录取分数线
信阳学院2022-2024年普通类、艺术类专业在豫招生录取分数线统计表(本科）艺术类录取分数线
长春科技学院2024年各层次分省分专业录取分数线（艺术本科）艺术类录取分数线
中国地质大学（北京）2024年艺术类分省录取分数情况表艺术类录取分数线
天津天狮学院2023-2024年各省录取分数线（艺术类）艺术类录取分数线
常州工学院2024年江苏省普通文理类、艺术类各专业录取分数线艺术类录取分数线
查看更多
2025年中国传媒大学艺术类校考专业名单一览表艺术类招生简章
2025年北京电影学院艺术类校考专业名单一览表艺术类招生简章
2025年中央戏剧学院艺术类校考专业名单一览表艺术类招生简章
2025年南京艺术学院艺术类校考专业名单一览表艺术类招生简章
2025年广西艺术学院艺术类校考专业名单一览表艺术类招生简章
2025年上海戏剧学院艺术类校考专业名单一览表艺术类招生简章
2025年浙江传媒学院艺术类校考专业名单一览表艺术类招生简章
2025年中国音乐学院艺术类校考专业名单一览表艺术类招生简章
2025年哈尔滨音乐学院艺术类校考专业名单一览表艺术类招生简章
2025年上海音乐学院艺术类校考专业名单一览表艺术类招生简章
查看更多
本网页已闲置超过3分钟，按键盘任意键或点击空白处，即可回到网页
最新资讯更多