<style>
.cloud{ width:260px; height:97px; position:fixed; top:0px; left:0px; background-color:#ddd; z-index:999;}
.cloud_close{ width:18px; height:20px; position:absolute; top:0px; right:-60px; background-color:#f00; font-size:20px; line-height:25px; color:#fff; text-align:center; cursor:pointer; background:url(http://tazwfw.sd.gov.cn/picture/21/1804211225295745632.jpg?cache=0.8886874383072927) center top no-repeat;}
.test{ width:300px; height:200px; position:fixed; top:0px; left:0px; background-color:#0f0; z-index:998;}
</style>
<div id="cloud" class="cloud">
<a href="/" target="_blank"><img src='images/wjwgg.png' width='320' height='120' border='0' ></a>
<div class="cloud_close" onClick="javascript:document.getElementById('cloud').style.display='none';"></div>
</div>
<script>
$(document).ready(function(){
/*初始设置*/
var f_speed = 20; /*漂浮速度*/
var fi_top=50,fi_left=20; /*初始位置:上、左*/
var $f_cloud = $("#cloud"); /*选定漂浮元素*/
//var $f_cloud = $(".test");
var f_top=0,f_left=0;
var f_W = $(window).width()-$f_cloud.width();
var f_H = $(window).height()-$f_cloud.height();
function f_auto(){
if(fi_top>=0 && fi_top<f_H){
fi_top++;
f_top = 1*fi_top;
}else if(fi_top>=f_H && fi_top<2*f_H){
fi_top++;
f_top = 2*f_H-fi_top;
}else{
fi_top=0;
fi_top++;
f_top = 1*fi_top;
}
if(fi_left>=0 && fi_left<f_W){
fi_left++;
f_left = 1*fi_left;
}else if(fi_left>=f_W && fi_left<2*f_W){
fi_left++;
f_left = 2*f_W-fi_left;
}else{
fi_left=0;
fi_left++;
f_left = 1*fi_left;
}
$f_cloud.css({top:f_top,left:f_left});
}
var f_cloud = setInterval(f_auto,f_speed);
f_auto();
/*鼠标移入移出*/
$f_cloud.hover(function(){
clearInterval(f_cloud);
},function(){
f_cloud = setInterval(f_auto,f_speed);
});
/*自适应屏幕*/
$(window).resize(function(){
f_W = $(window).width()-$f_cloud.width();
f_H = $(window).height()-$f_cloud.height();
f_auto();
});
});
</script>