日期:2014-05-16  浏览次数:20494 次

码农的浪漫(js写的'老婆生日快乐'特效)
一直被老婆抱怨不懂浪漫,老婆的生日又来了,老婆指着闺蜜空间上贴的老公做的胡萝卜心形浪漫晚餐告诉我:必须送她一份用心的礼物。我绞尽脑汁想出这么一法子,还是得用我们码农的独特方式,经过一天多的努力,终于做完了,来给大家晒一下,一共三个特效 1,六个字单列从右侧飞入;2,六个字闪烁;3,六个字连续从右侧飞入(类似电子字幕的滚动特效)下面有附件,大家轻拍。基本原理,生成一个20行20列的table,400个小格子当屏幕,按照每个字的形状生成0,1数组,如果单元格需要显示,填入心形图片,否则填充透明图片,动画的时候一帧即为1个长度为400的数据,一共5*6+120*20+210*6帧*400个0和1,:










目前只在ie8下测试通过,



  <title> 老婆,生日快乐! </title>&lt;meta name="Generator" content="EditPlus"&gt;
&lt;meta name="Author" content=""&gt;
&lt;meta name="Keywords" content=""&gt;
&lt;meta name="Description" content=""&gt;
&lt;!-- &lt;bgsound src="生日快乐歌.mp3" loop="-1"&gt;--&gt;<table id="t">
<tr>
<td class="td" width="20px" height="20px"> <img width="20px" height="20px" src="b.jpg">
</td>
  <td width="20px" height="20px"> <img width="20px" height="20px" src="b.jpg">
</td>
    <td width="20px" height="20px"> <img width="20px" height="20px" src="b.jpg">
</td>
  <td width="20px" height="20px"> <img width="20px" height="20px" src="b.jpg">
</td>
    <td width="20px" height="20px"> <img width="20px" height="20px" src="b.jpg">
</td>
    <td width="20px" height="20px"> <img width="20px" height="20px" src="b.jpg">
</td>
  <td width="20px" height="20px"> <img width="20px" height="20px" src="b.jpg">
</td>
    <td width="20px" height="20px"> <img width="20px" height="20px" src="b.jpg">
</td>
  <td width="20px" height="20px"> <img width="20px" height="20px" src="b.jpg">
</td>
    <td width="20px" height="20px"> <img width="20px" height="20px" src="b.jpg">
</td>
    <td width="20px" height="20px"> <img width="20px" height="20px" src="b.jpg">
</td>
  <td width="20px" height="20px"> <img width="20px" height="20px" src="b.jpg">
</td>
    <td width="20px" height="20px"> <img width="20px" height="20px" src="b.jpg">
</td>
  <td width="20px" height="20px"> <img width="20px" height="20px" src="b.jpg">
</td>
    <td width="20px" height="20px"> <img width="20px" height="20px" src="b.jpg">
</td>
    <td width="20px" height="20px"> <img width="20px" height="20px" src="b.jpg">
</td>
  <td width="20px" height="20px"> <img width="20px" height="20px" src="b.jpg">
</td>
    <td width="20px" height="20px"> <img width="20px" height="20px" src="b.jpg">
</td>
  <td width="20px" height="20px"> <img width="20px" height="20px" src="b.jpg">
</td>
    <td width="20px" height="20px"> <img width="20px" height="20px" src="b.jpg">
</td>
</tr>
<tr>
<td width="20px" height="20px"> <img width="20px" height="20px" src="b.jpg">
</td>
  <td width="20px" height="20px"> <img width="20px" height="20px" src="b.jpg">
</td>
    <td width="20px" height="20px"> <img width="2