<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<style type="text/css">
body{height: 10000px;width: 5000px;}
#floatdivids{
width: 200px;
height: 200px;
position: absolute;
top: 0;
left: 0;
background-color: #ff8015;
z-index: 1000;
border: 1px solid #ccc;
}
</style>
<script type="text/javascript">
var isinter;
var millisec = 25;//定时器间隔执行时间/毫秒
var xflo = 0; //漂浮层x坐标
var yflo = 0; //漂浮层y坐标
var yistop = false;
var xisleft = true;
function floatadfun(){
kwidth = $(window).width();//可视区域宽度
kheight = $(window).height();//可视区域高度
divwidth = $(‘#floatdivids‘).width();//div漂浮层宽度
divheight = $(‘#floatdivids‘).height();//div漂浮层高度
hstop = jQuery(window).scrollTop();//滚动条距离顶部的高度
wsleft = jQuery(window).scrollLeft();//滚动条距离最左边的距离
offwidth = (kwidth-divwidth);//div偏移的宽度
offheight = (kheight-divheight);//div偏移的高度
if (!yistop) {
yflo++;
if (yflo >= offheight) {
yistop = true;
}
} else {
yflo--;
if (yflo <= 0) {
yistop = false;
}
}
if (xisleft) {
xflo++;
if (xflo >= offwidth) {
xisleft = false;
}
} else {
xflo--;
if (xflo <= 0) {
xisleft = true;
}
}
$(‘#floatdivids‘).css({‘top‘:yflo+hstop,‘left‘:xflo+wsleft}); /* 如果使用固定定位，请把加上滚动条的距离去掉即可 */
}
$(function () {
isinter = setInterval("floatadfun()",millisec);
$(‘#floatdivids‘).mouseover(function () {
clearInterval(isinter);
}).mouseout(function () {
isinter = setInterval("floatadfun()",millisec);
});
$(‘#ClickRemoveFlo‘).click(function () {
$(this).parents("#floatdivids").slideUp(500,function(){
clearInterval(isinter);
$(this).remove();
});
});
});
</script>
</head>
<body>
<div id="floatdivids">
<span id="ClickRemoveFlo" style="position: absolute;top: 0;right: 0;color: #fff;background-color: rgba(0, 0, 0, 0.5);padding: 0 5px;cursor: pointer;">X</span>
小鹿乱撞！！<br>弹弹弹！
</div>
</body>
</html>
————————————————93 原文链接：https://blog.csdn.net/weixin_42350070/article/details/82111429 