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

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

现在我们不用photoshop,用css和javascript来做,方法也很简单!

步骤一、

我们先准备一张图片,以我的图片为例,命名为”青山绿水.jpg”,图片大小为1000X543。

 

 

步骤二、

在body内插入一个table表格,为表格设置class属性,值为”tvline”,设置表格的背景图片为事先准备的图片。

步骤三、

建立一个css样式,设置样式,代码为.tvline td{border-top:1px solid #fff;opacity:0.3;filer:alpha(opacity:60);}   注:浅色背景的图片建议用黑色的线#000,深色背景图片建议用白色的线#fff。IE不支持透明度,所以想要IE支持透明度的话用filter:alpha(opacity:60)设置即可。

步骤四、

在表格中插入一段javascript代码,切记是在表格内部插入代码,外部插入无效

 

代码如下:

<script>

         for(n=1;n<=100;n++){//循环的次数为图片高度的一半,或小于图片高度的一半

                   document.write("<tr><td> </td></tr>");   //td标签内部有一个半角空格

}

 </script>

 

保存,完成,预览页面中的图片,效果如图:

 

 

 

完整的代码如下:

 

<!doctype html>

 

<html lang="en">

 

 <head>

 

  <meta charset="UTF-8">

 

  <title>用代码"写"出扫描线效果图片</title>

 

  <style>

 

         table{

 

                   width:1000px;

 

                   height:543px;

 

                   background:url(青山绿水.jpg) no-repeat;

 

                  

 

         }

 

         .tvline td{border-top:1px solid #fff;filter:alpha(opacity:40);opacity:.4;}

 

  </style>

 

 </head>

 

 <body>

 

  <table class="tvline">

 

  <script>

 

         for(n=1;n<=100;n++){

 

                   document.write("<tr><td> </td></tr>");

 

}

 

 </script>

 

 </table>

 

 </body>

 

</html>

 

posted @ 2016-03-07 17:21  回眸-掩饰我的温柔  Views(979)  Comments(0Edit  收藏  举报