[博客技巧]走马灯特效及其应用。

技巧帮助大全   2006-09-25 19:14   阅读56091   评论157  
字号:    

  最近在博客上发现有人用走马灯的方法来装饰博客,如友情连接和文章标题等,有好多人问我怎么弄,这里简单的就不介绍了,现在介绍一些嵌套的走马灯代码Marquee的用法。

Marquee基本知识:

1.最简单的走马灯

<marquee>小强博客</marquee>

2.Marquee标签的基本属性

width(参数>0的整数), height(参数>0的整数), direction(参数left, right, up, down), bgcolor(参数RGB,或者颜色单词,或者6位颜色字母),还支持其他复杂的CSS。

  屏幕保护效果:

<marquee height="400" direction="up" width="500" bgcolor="#FFFFFF"> <marquee height="50" direction="left" width="100%"> <font style="font-size: 20px; color:#fff000">小强博客</font> </marquee> </marquee>

  效果演示:

小强博客

 

滚动文字特效


  加个参数behavior="alternate" 再看看效果

scroll:Marquee 根据 direction 设置的方向滚动,文本滚到头以后再重头开始,这是默认值。
alternate:Marquee 的内容到达容器的边缘后又按照相反的方向滚动回来,周而复始,形成周期
slid:Marquee 根据 direction 设置的方向滚动,到边缘就停止滚动,不再重复

  就变成下面的:

<table> <tr> <td bgcolor=#FFFFFF width=468> <marquee direction="down" behavior="alternate" scrollamount=1 height="60"> <marquee direction="right" behavior="alternate" scrollamount=4 width="468"> 小强博客</marquee> </marquee> </td> </tr> </table>

  效果演示:

小强博客

 

多嵌套

<table bgcolor="#FFFFFF"> <tr><td width="1" valign="top" > <marquee direction="down" behavior="alternate" scrollamount=1 height="60"> <marquee direction="right" scrollamount=4 behavior="alternate" width="468"> 小强博客 </marquee> </marquee> </td> <td width="468"> <marquee direction="up" behavior="alternate" scrollamount=1 height="60"> <marquee direction="left" scrollamount=4 behavior="alternate" width="468"> 博客秘籍 </marquee> </marquee> </td></tr></table>

  效果演示

小强博客 博客秘籍

为走马灯添加背景图片:

方法请参考:http://lzq.mail.blog.163.com/blog/static/389555200692392423937

 

评论(?)
阅读(?)
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
网易公司版权所有 ©1997-2009