Jquery，css如何创建一个悬浮的广告页面?

需要在公司的产品首页添加一个悬浮的广告框，做了一个链接，链到了土豆网。（关于我们公司的一个产品的电视报道）

如下是我所做的代码记录

实例参考：
http://yunshivideo.com

具体代码如下

<div id="flow-image">
  <div class="flow-main">
  <div class="flow-image-pane">
    <a id="link_to_video" href="http://www.tudou.com/programs/view/6GPqMe30ENM/?fr=rec1" target="_blank">
      <img src="/images/flow-image-main.jpg" alt="手机监控抗洪直播" />
    </a>
  </div>
  <div class="flow-image-close">
    <a href="#" id="flow-close">  <img src="/images/flow-close.png" alt="关闭" /> </a>
  </div>
  </div>
</div>
<style type="text/css">
  #flow-image {
    display: none;
    position: absolute;
    top: 130px;
    left: 50%;
    margin-left: -280px;
    width: 565px;
    height: 422px;
    z-index: 3000;
  }

  #flow-image .flow-main {
    position: relative;
  }
  #flow-image .flow-image-close{
    position: absolute;
    right: 0;
    top: 0;
  }
</style>
<script type="text/javascript">
  var $flow_image = $("#flow-image");
  $(function(){
      $("#link_to_video").click(function(){
        hide_flow();
        return true;
      });

      $("#flow-close").click(function(){
        hide_flow();
        return false;
      });
      
      window.setTimeout(show_flow, 1000);

      window.setTimeout(hide_flow, 15000);
  });


  function hide_flow(){
    if($flow_image.is(":visible")){
      $flow_image.fadeTo('normal', 0);
    }
  }

  function show_flow(){
    if($flow_image.is(":hidden")){
      $flow_image.fadeTo('normal', 1);
    }
  }
</script>

代码解释：

  #flow-image {
    display: none;
    position: absolute;
    top: 130px;
    left: 50%;
    margin-left: -280px;
    width: 565px;
    height: 422px;
    z-index: 3000;
  }

  #flow-image .flow-main {
    position: relative;
  }
  #flow-image .flow-image-close{
    position: absolute;
    right: 0;
    top: 0;
  }

.flow-main首先定义为 relative，这样 .flow-image-close 就能放到右上角了，它的绝对定位是相对与relative的

#flow-image 做了绝对定位和居中显示。先 left:50%; 然后 margin-left: -width/2px;

    $flow_image.fadeTo('normal', 0);

这个效果是隐入，隐出，效果挺好的，这样用户看起来，不会有生硬的

$flow_image.is(":visible")

判断元素是否显示了

$flow_image.is(":hidden")

判断元素是否隐藏了

window.setTimeout(show_flow, 1000);

定时任务