1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <script type="text/javascript" src="jquery-1.8.3.min.js"></script>
7 <style type="text/css">
8 body{height: 10000px;width: 5000px;}
9 #floatdivids{
10 width: 200px;
11 height: 200px;
12 position: absolute;
13 top: 0;
14 left: 0;
15 background-color: #ff8015;
16 z-index: 1000;
17 border: 1px solid #ccc;
18 }
19 </style>
20 <script type="text/javascript">
21 var isinter;
22 var millisec = 25;//定时器间隔执行时间/毫秒
23 var xflo = 0; //漂浮层x坐标
24 var yflo = 0; //漂浮层y坐标
25 var yistop = false;
26 var xisleft = true;
27 function floatadfun(){
28 kwidth = $(window).width();//可视区域宽度
29 kheight = $(window).height();//可视区域高度
30
31 divwidth = $('#floatdivids').width();//div漂浮层宽度
32 divheight = $('#floatdivids').height();//div漂浮层高度
33
34 hstop = jQuery(window).scrollTop();//滚动条距离顶部的高度
35 wsleft = jQuery(window).scrollLeft();//滚动条距离最左边的距离
36
37 offwidth = (kwidth-divwidth);//div偏移的宽度
38 offheight = (kheight-divheight);//div偏移的高度
39
40 if (!yistop) {
41 yflo++;
42 if (yflo >= offheight) {
43 yistop = true;
44 }
45 } else {
46 yflo--;
47 if (yflo <= 0) {
48 yistop = false;
49 }
50 }
51
52 if (xisleft) {
53 xflo++;
54 if (xflo >= offwidth) {
55 xisleft = false;
56 }
57 } else {
58 xflo--;
59 if (xflo <= 0) {
60 xisleft = true;
61 }
62 }
63
64 $('#floatdivids').css({'top':yflo+hstop,'left':xflo+wsleft}); /* 如果使用固定定位，请把加上滚动条的距离去掉即可 */
65 }
66
67 $(function () {
68 isinter = setInterval("floatadfun()",millisec);
69 $('#floatdivids').mouseover(function () {
70 clearInterval(isinter);
71 }).mouseout(function () {
72 isinter = setInterval("floatadfun()",millisec);
73 });
74 $('#ClickRemoveFlo').click(function () {
75 $(this).parents("#floatdivids").slideUp(500,function(){
76 clearInterval(isinter);
77 $(this).remove();
78 });
79 });
80 });
81 </script>
82 </head>
83 <body>
84 <div id="floatdivids">
85 <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>
86 小鹿乱撞！！<br>弹弹弹！
87 </div>
88 </body>
89 </html>
90
91 ————————————————93 原文链接：https://blog.csdn.net/weixin_42350070/article/details/82111429
