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

微信扫一扫,分享到朋友圈

超简单漂浮广告代码、网页漂浮广告代码、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="http://mamicode.com/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         varisinter;22         var millisec = 25;//定时器间隔执行时间/毫秒
23         var xflo = 0; //漂浮层x坐标
24         var yflo = 0; //漂浮层y坐标
25         var yistop = false;26         var xisleft = true;27         functionfloatadfun(){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">X</span>
86     小鹿乱撞!!<br>弹弹弹!87 </div>
88 </body>
89 </html>
90  91 ————————————————93 原文链接:https://blog.csdn.net/weixin_42350070/article/details/82111429

 

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

原文地址:https://www.cnblogs.com/1301694f/p/12580411.html

二十三、Django3.0学习之在apps下命令新建app应用

上一篇

linux 入门6-文件属性和管理

下一篇

你也可能喜欢

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

长按储存图像,分享给朋友