超简单漂浮广告代码、网页漂浮广告代码、jQuery漂浮广告、div漂浮层 

 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

 

posted @ 2020-03-27 11:56  樊琇鸿  阅读(1369)  评论(0)    收藏  举报