HTML5 网页 漂浮窗广告 JavaScript逻辑 - demo
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <!-- <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> --> <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> --> <style type="text/css"> html, body { margin: 0; padding: 0; } div { font-size: 30px; font-weight: bold; position: fixed; display: flex; width: 200px; height: 200px; color: white; border-radius: 50%; background: red; justify-content: center; align-items: center; } div { /* Firefox */ -webkit-animation: rotate 5s linear infinite; -moz-animation: rotate 5s linear infinite; /* Safari 和 Chrome */ -o-animation: rotate 5s linear infinite; animation: rotate 5s linear infinite; /* Opera */ } @keyframes rotate { 0% { /* Firefox */ -webkit-transform: rotate(0deg); /* IE 9 */ -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); /* Safari 和 Chrome */ -o-transform: rotate(0deg); transform: rotate(0deg); /* Opera */ } 100% { /* Firefox */ -webkit-transform: rotate(360deg); /* IE 9 */ -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); /* Safari 和 Chrome */ -o-transform: rotate(360deg); transform: rotate(360deg); /* Opera */ } } </style> </head> <body> <div id="ad">Hello, world!</div> </body> </html> <script type="text/javascript">
let el = document.querySelector('#ad');
let styleTop = 0;
let styleLeft = 0;
let verticalFlag = true;
let horizontalFlag = true;
setInterval(() => {
(el.offsetHeight + styleTop === window.innerHeight) && (verticalFlag = false);
(el.offsetWidth + styleLeft === window.innerWidth) && (horizontalFlag = false);
verticalFlag ? styleTop++ : styleTop--;
horizontalFlag ? styleLeft++ : styleLeft--;
(styleTop <= 0) && (verticalFlag = true);
(styleLeft <= 0) && (horizontalFlag = true);
el.style.top = `${styleTop}px`;
el.style.left = `${styleLeft}px`;
}, 10);
</script>