<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>飘窗</title>
<style type="text/css">
.floatDiv{
300px;
height:225px;
position: absolute;
z-index: 2;
}
.floatDiv img{
300px;
height:225px;
}
.closeFloatDiv{
position:absolute;
16px;
height:16px;
right:0px;
color:#fff;
font:14px/16px "微软雅黑";
text-align:center;
cursor:pointer;
}
</style>
<script src="https://files.cnblogs.com/files/lansetuerqi/jquery-1.11.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$(".closeFloatDiv").click(function(){
$(".floatDiv").remove();
});
})
</script>
</head>
<body>
<!-- 飘窗 -->
<div class="floatDiv up left" id="floatDiv" style="left: 655px; top: 468px;">
<div class="closeFloatDiv">x</div>
<a target="_blank">
<img src="./飘窗/yl_pc.png">
</a>
</div>
<script type="text/javascript">
//飘窗动起来
$(function(){
//可视高度
var heightMax = $(window).height()-$(".floatDiv").css("height").replace("px","");
//可视宽度
var widthMax = $(window).width()-$(".floatDiv").css("width").replace("px","");
//飘窗
var i = 0;
var j = 0;
var funl = function leftactive(){
if($(".floatDiv").css("left").replace("px","")<=0){
$(".floatDiv").removeClass("left").addClass("right");
}
if($(".floatDiv").css("right").replace("px","")>=widthMax){
$(".floatDiv").removeClass("right").addClass("left");
}
if($(".floatDiv").hasClass("right")){
i++;
$(".floatDiv").css("left",i+"px");
}
if($(".floatDiv").hasClass("left")){
i--;
$(".floatDiv").css("left",i+"px");
}
}
var funt = function topactive(){
if($(".floatDiv").css("top").replace("px","")<=$(window).scrollTop()){
$(".floatDiv").removeClass("up").addClass("down");
}
if($(".floatDiv").css("top").replace("px","")>=$(window).scrollTop()+heightMax){
$(".floatDiv").removeClass("down").addClass("up");
}
if($(".floatDiv").hasClass("down")){
j++;
$(".floatDiv").css("top",j+"px");
}
if($(".floatDiv").hasClass("up")){
j--;
$(".floatDiv").css("top",j+"px");
}
}
var leftfun = setInterval(funl, 10);
var topfun = setInterval(funt, 10);
$(".floatDiv").mouseover(function() {
clearInterval(leftfun);
clearInterval(topfun);
});
$(".floatDiv").mouseout(function() {
leftfun = setInterval(funl, 10);
topfun = setInterval(funt, 10);
});
});
</script>
</body></html>