JQuery实现动态漂浮广告&全局窗口,供大家参考,具体内容如下
以下是效果图及实现代码:
代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>漂浮广告栏</title> <script type="text/javascript" src="https://www.atool.online/article/js/jquery-3.2.1.js"></script> <style type="text/css"> body{ height: 100%; width: 100%; margin: 0; padding: 0; text-align: center; } #floatdiv{ width: 200px; height: 200px; position: absolute; top: 0; left: 0; background-color: #fbb; z-index: 999; border: 1px solid #ccc; border-radius: 10px 10px ; } span{ position: absolute; top: 0; right: 0; color: darksalmon; background-color: rgba(0, 0, 0, 0.5); padding: 0 5px; cursor: pointer; border-radius: 20% 20%; } </style> </head> <body> <div id="floatdiv"> <span id="Clickclose" >X</span> <p>鼠标悬停!</p> <p>点击关闭!</p> </div> <script type="text/javascript"> var isinter; var millisec = 30;//定时器间隔执行时间/毫秒 var xfloat = 0; //漂浮层x坐标 var yfloat = 0; //漂浮层y坐标 var yistop = false; var xisleft = true; function floatanimation(){ var visiblewidth = $(window).width();//可视区域宽度 var visibleheight = $(window).height();//可视区域高度 var divwidth = $('#floatdiv').width();//div漂浮层宽度 var divheight = $('#floatdiv').height();//div漂浮层高度 var hstop = jQuery(window).scrollTop();//滚动条距离顶部的高度 var wsleft = jQuery(window).scrollLeft();//滚动条距离最左边的距离 var offwidth = (visiblewidth-divwidth);//div偏移的宽度 var offheight = (visibleheight-divheight);//div偏移的高度 if (!yistop) { yfloat++; if (yfloat >= offheight) { yistop = true; } } else { yfloat--; if (yfloat <= 0) { yistop = false; } } if (xisleft) { xfloat++; if (xfloat >= offwidth) { xisleft = false; } } else { xfloat--; if (xfloat <= 0) { xisleft = true; } } /* 如果使用固定定位,请把加上滚动条的距离去掉即可 */ $('#floatdiv').css({'top':yfloat+hstop,'left':xfloat+wsleft}); } $(function () { isinter = setInterval("floatanimation()",millisec); $('#floatdiv').mouseover(function () { clearInterval(isinter); }).mouseout(function () { isinter = setInterval("floatanimation()",millisec); }); $('#Clickclose').click(function () { $(this).parents("#floatdiv").slideUp(500,function(){ clearInterval(isinter); $(this).remove(); }); }); }); </script> </body> </html>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持阿兔在线工具。