JQuery实现动态漂浮广告
JQuery实现动态漂浮广告&全局窗口，供大家参考，具体内容如下
以下是效果图及实现代码：
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>漂浮广告栏</title>
<script type="text/javascript" src="js/jquery-3.2.1.js"></script>
<style type="text/css">
body{
height: 100%;
width: 100%;
margin: 0;
padding: 0;
text-align: center;
}
#floatdiv{
width: 200px;
height: 200px;
position: absolute;
top: 0;
left: 0;
background-color: #fbb;
z-index: 999;
border: 1px solid #ccc;
border-radius: 10px 10px ;
}
span{
position: absolute;
top: 0;
right: 0;
color: darksalmon;
background-color: rgba(0, 0, 0, 0.5);
padding: 0 5px;
cursor: pointer;
border-radius: 20% 20%;
}
</style>
</head>
<body>
<div id="floatdiv">
<span id="Clickclose" >X</span>
<p>鼠标悬停！</p>
<p>点击关闭！</p>
</div>
<script type="text/javascript">
var isinter;
var millisec = 30;//定时器间隔执行时间/毫秒
var xfloat = 0; //漂浮层x坐标
var yfloat = 0; //漂浮层y坐标
var yistop = false;
var xisleft = true;
function floatanimation(){
var visiblewidth = $(window).width();//可视区域宽度
var visibleheight = $(window).height();//可视区域高度
var divwidth = $('#floatdiv').width();//div漂浮层宽度
var divheight = $('#floatdiv').height();//div漂浮层高度
var hstop = jQuery(window).scrollTop();//滚动条距离顶部的高度
var wsleft = jQuery(window).scrollLeft();//滚动条距离最左边的距离
var offwidth = (visiblewidth-divwidth);//div偏移的宽度
var offheight = (visibleheight-divheight);//div偏移的高度
if (!yistop) {
yfloat++;
if (yfloat >= offheight) {
yistop = true;
}
} else {
yfloat--;
if (yfloat <= 0) {
yistop = false;
}
}
if (xisleft) {
xfloat++;
if (xfloat >= offwidth) {
xisleft = false;
}
} else {
xfloat--;
if (xfloat <= 0) {
xisleft = true;
}
}
/* 如果使用固定定位，请把加上滚动条的距离去掉即可 */
$('#floatdiv').css({'top':yfloat+hstop,'left':xfloat+wsleft});
}
$(function () {
isinter = setInterval("floatanimation()",millisec);
$('#floatdiv').mouseover(function () {
clearInterval(isinter);
}).mouseout(function () {
isinter = setInterval("floatanimation()",millisec);
});
$('#Clickclose').click(function () {
$(this).parents("#floatdiv").slideUp(500,function(){
clearInterval(isinter);
$(this).remove();
});
});
});
</script>
</body>
</html>
