html左侧悬浮广告,HTML5 网页 漂浮窗广告 JavaScript逻辑 - demo

Document

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

}

Hello, world!

var div = document.querySelector('#ad');var divTop = 0;var divLeft = 0;//true： top 和 left 自增，false： top 和 left 自减

var flagT = true;var flagL = true;

function move() {

(div.offsetHeight+ divTop == window.innerHeight) ? flagT = false: flagT;

(div.offsetWidth+ divLeft == window.innerWidth) ? flagL = false: flagL;

flagT? divTop++ : divTop--;

flagL? divLeft++ : divLeft--;

div.style.left= divLeft + 'px';

div.style.top= divTop + 'px';

(divTop<= 0) ? flagT = true: flagT;

(divLeft<= 0) ? flagL = true: flagL;

setTimeout(move,5);

}

setTimeout(move,1);