飘窗代码
本文描述如何编写飘窗代码。
1.固定飘窗
（1）左侧飘窗
<style>
.pf01{position:fixed;left:20px;top:320px;z-index:99;}
.close01{position:absolute;top:0;right:5px;color:#fff;font-size:16px;text-decoration:none;cursor:pointer;}
</style>
<div class="pf01" id="pf01">
<a class="close01" onclick="pf01.style.visibility = 'hidden'">x</a>
<a href="链接地址" target="_blank"><img src="../PageAssets/Images/2023/飘窗.png"></a>
</div>
（2）右侧飘窗
<style>
.pf02{position:fixed;right:20px;top:320px;z-index:99;}
.close02{position:absolute;top:0;right:5px;color:#fff;font-size:16px;text-decoration:none;cursor:pointer;}
</style>
<div class="pf02" id="pf02">
<a class="close02" onclick="pf02.style.visibility = 'hidden'">x</a>
<a href="链接地址" target="_blank"><img src="../PageAssets/Images/2023/飘窗.png"></a>
</div>
2.乱飘
<script>
/*乱飘*/
function move_obj(obj,move_w,move_h,x,y,l,t,m){
if(obj==undefined){
alert("方法调用错误,请传入正确参数!");
return;
}
move_w=(move_w==undefined||move_w=='')?$(window).width():move_w;//水平移动范围,默认浏览器可视区域宽度
move_h=(move_h==undefined||move_h=='')?$(window).height():move_h;//垂直移动范围,默认浏览器可视区域高度
x=(x==undefined||x=='')?3:x;//一次水平移动距离,默认3px
y=(y==undefined||y=='')?3:y;//一次垂直移动距离,默认3px
l=(l==undefined||l=='')?0:l;//相对于body的起始水平位置,默认0
t=(t==undefined||t=='')?0:t;//相对于body的起始垂直位置,默认0
m=(m==undefined||m=='')?80:m;//计时周期,单位毫秒,默认80ms
function moving(){
x=(l>=move_w-$(obj).width()||l<0)?-x:x;
y=(t>=move_h-$(obj).height()||t<0)?-y:y;
l+=x;
t+=y;
$(obj).css({left:l,top:t});
}
var timer_move=setInterval(function () {
moving();
},m);
//悬停停止运动
$(obj).mouseover(function(){
$(this).children(".close_port").show();
clearInterval(timer_move);
});
//移开鼠标后继续运动
$(obj).mouseout(function(){
$(this).children(".close_port").hide();
timer_move=setInterval(function () {
moving();
},m);
});
};
</script>
<style>
.pf03{position:fixed;left:20px;top:320px;z-index:99;}
.close03{position:absolute;top:0;right:5px;color:#fff;font-size:16px;text-decoration:none;cursor:pointer;}
</style>
<div class="pf03" id="pf03">
<a class="close03" onclick="pf03.style.visibility = 'hidden'">x</a>
<a href="链接地址" target="_blank"><img src="../PageAssets/Images/2023/飘窗.png"></a>
</div>
<script>
/*调用移动浮窗方法并按顺序传入正确参数["obj",x,y,l,t,m],obj必填*/
/*x 一次水平移动距离,默认3px;y 一次垂直移动距离,默认3px;l 相对于body的起始水平位置,默认0;t 相对于body的起始垂直位置,默认0;m 计时周期,单位毫秒,默认80ms*/
//示例:
move_obj(".pf03",'','',1,1,100,100,10);
</script>
