1.dom
< div class = "popup-dialog" id= "popupDialog" @mouseover= "onMmouseover" @mouseout= "onMouseout" >
< p> vue广告悬浮< / p>
< / div>
2.js
mounted ( ) {
this . initPopup ( ) ;
} ,
beforeDestory ( ) {
if ( this . times) {
clearInterval ( this . times) ;
}
} ,
methods : {
onMmouseover ( ) {
if ( this . times) {
clearInterval ( this . times) ;
}
} ,
onMouseout ( ) {
if ( this . times) {
clearInterval ( this . times) ;
}
this . initPopup ( ) ;
} ,
initPopup ( ) {
let count = 11 ;
let stepX = 1 ;
let stepY = 1 ;
let pop = document. getElementById ( "popupDialog" ) ;
let popWidth = pop. offsetWidth;
let popHeight = pop. offsetHeight;
let clientw = document. body. clientWidth;
let clienth = document. body. clientHeight;
let x = parseInt ( pop. getBoundingClientRect ( ) . left) ;
let y = parseInt ( pop. getBoundingClientRect ( ) . top) ;
this . times = setInterval ( ( ) => {
let distenceX = clientw - x;
let distenceY = clienth - y;
if ( distenceX - popWidth < 0 || distenceX > clientw) {
stepX = - stepX;
}
if ( distenceY - popHeight < 0 || distenceY > clienth) {
stepY = - stepY;
}
x += stepX;
y += stepY;
this . changePos ( pop, x, y) ;
} , count) ;
} ,
changePos ( pop, x, y ) {
pop. style. left = x + "px" ;
pop. style. top = y + "px" ;
} ,
}
3.css
. popup- dialog {
position : fixed;
top : 0 ;
left : 0 ;
width : 100px;
height : 100px;
z- index: 999 ;
background : #ccc;
}