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; 5000px;} 9 #floatdivids{ 10 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