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

来源：互联网发布：网络赚钱入门必读pdf 编辑：程序博客网时间：2024/05/19 05:39

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

如下是我所做的代码记录

实例参考：
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);

定时任务