html 漂浮 广告置顶,HTML5 网页 漂浮窗广告 JavaScript逻辑 - demo

Document

html,

body

{

margin: ;

padding: ;

}

div

{

font-size: 30px;

font-weight: bold;

position: fixed;

display: flex;

width: 200px;

height: 200px;

color: white;

border-radius: %;

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

{

%

{

/* 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 */

}

%

{

/* 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 */

}

}

Hello, world!

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);