需要在公司的产品首页添加一个悬浮的广告框,做了一个链接,链到了土豆网。(关于我们公司的一个产品的电视报道)
如下是我所做的代码记录
实例参考:
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);
定时任务