WORKS作品

• 规定时间内显示*隐藏浮动层效果代码

  2008-06-29

  版权声明：转载时请以超链接形式标明文章原始出处和作者信息及本声明
  http://shipin.blogbus.com/logs/23803941.html
  
  

  我们将通过今天介绍的规定时间内显示*隐藏浮动层效果代码给你的博客上添加一个定时的浮动层用于安放一个欢迎动画或者flash广告,使博客变得灵活醒目.

  规定时间内显示*隐藏浮动层效果代码基于jquery技术，兼容各大浏览器。
  就拿现在比较热门的电影<功夫熊猫>里面的角色PO做范例(素材取自<功夫熊猫>官方网站http://www.kungfupanda.com/),此效果为：页面加载完毕后再过1秒钟熊猫显示，5秒后熊猫隐藏。先来看下范例：规定时间内显示*隐藏浮动层效果代码

  使用到大巴上的步骤如下:
  1.header中的代码：

  <script src="http://www.google.com/jsapi"></script> <script>google.load("jquery", "1");</script>
  <script type="text/javascript">
  function flaout(){
  $("#fla").css({ display:"none" });
  };
  function flain(){
  $("#fla").css({ display:"block",bottom:"0px" }).each(function(){setTimeout('flaout()',5000);});
  };
  $(document).ready(function(){
  $("#fla").each(function(){setTimeout('flain()',1000);});
  });
  </script>

  2.css中的代码：

  #fla {border:0; width:624px; height:550px; position:absolute; right:0; z-index:100; display:none;}
  

  3.index中的连接示范代码：

  <div id="fla"><embed src="http://shipin.blogbus.com/files/12145201371.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="0" height="0" wmode="Transparent" loop="false"></embed>
  <embed src="http://shipin.blogbus.com/files/12145201370.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="624" height="550" wmode="Transparent" loop="false"></embed></div>

  这里规定浮动层的ID为fla,将要显示的内容放在这个块中,这个例子中放的是两个flash文件,一个是"熊猫",一个是"配音".

  
  

  随机文章：

  超链接按类型加样式效果代码 2008-06-22

  鼠标点击(click)选项卡(TAB)效果代码 2008-06-15

  鼠标滑过(hover)选项卡(TAB)效果代码 2008-06-15

  发布日期纵向效果代码 2008-05-08

  评论双样式效果代码 2008-05-03

  
  收藏到：Del.icio.us

  
  
  
  
  

  Tags: Javascript CSS

  引用: