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
