JavaScript/jQuery/Vue实现飘窗功能
JavaScript飘窗
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#adbox{
width:150px;
height:150px;
position: relative;
z-index:999;
}
#adbox img{
border: none;
}
#adbox b{
position: absolute;
right: 5px;
top: 0;
cursor: pointer;
color:#666;
}
</style>
</head>
<body>
<div id="adbox">
<a href="javascript:;">
<img src="https://imgconvert.csdnimg.cn/aHR0cHM6Ly9hdmF0YXIuY3Nkbi5uZXQvNy83L0IvMV9yYWxmX2h4MTYzY29tLmpwZw" alt="广告图片">
</a>
<b onclick="closebox()">×</b>
</div>
<script>
var x = 50,y = 60
var xin = true, yin = true
var step = 1
var delay = 10
var obj=document.getElementById("adbox")
function movebox() {
var L=T=0
var R= document.documentElement.clientWidth-obj.offsetWidth
var B = document.documentElement.clientHeight-obj.offsetHeight
obj.style.left = x + document.documentElement.scrollLeft + "px"
obj.style.top = y + document.documentElement.scrollTop + "px"
x = x + step*(xin?1:-1)
if (x < L) { xin = true; x = L}
if (x > R){ xin = false; x = R}
y = y + step*(yin?1:-1)
if (y < T) { yin = true; y = T }
if (y > B) { yin = false; y = B }
}
var itl= setInterval('movebox()', delay)
obj.onmouseover=function(){clearInterval(itl)}
obj.onmouseout=function(){itl=setInterval('movebox()', delay)}
function closebox() {
obj.style.display = "none";
}
</script>
</body>
</html>
jQuery飘窗
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>广告飘窗</title>
<style type="text/css">
#adbox{
width:150px;
height:150px;
position: relative;
z-index:999;
}
#adbox img{
border: none;
}
#adbox b{
position: absolute;
right: 5px;
top: 0;
cursor: pointer;
color:#666;
}
</style>
</head>
<body>
<div id="adbox">
<a href="javascript:;">
<img src="https://imgconvert.csdnimg.cn/aHR0cHM6Ly9hdmF0YXIuY3Nkbi5uZXQvNy83L0IvMV9yYWxmX2h4MTYzY29tLmpwZw" alt="广告图片">
</a>
<b>×</b>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script>
(function($){
$.fn.adFloat=function(options){
return new AdFloat(this,options);
}
var AdFloat=function(element,options){
this.element=$(element);
this.options=$.extend({
width:150, //默认的广告的宽
height:150, //默认的广告的高
top:0, //默认的广告的Y坐标
left:0, //默认的广告的X坐标
delay:20, //延迟
step:1 //默认的广告每次移动的距离(像素)
},options);
this.interval=null;
this.xPos=this.options.left;
this.yPos=this.options.top;
this.yon=0;
this.xon=0;
this.isPause=false;
this.init();
};
AdFloat.prototype={
init:function(){
var me=this;
me.element.css("display","block");
me.element.css({position:"absolute",left:me.options.left,top:me.options.top,width:me.options.width,height:me.options.height,overflow:"hidden"})
me.element.hover(function(){clearInterval(me.interval)},function(){me.interval=setInterval(function(){me.changePos();},me.options.delay);});
$(document).ready(function(){me.start();});
},
changePos:function(){
var me=this;
var clientWidth=$(window).width();
var clientHeight=$(window).height();
var Hoffset=me.options.height;
var Woffset=me.options.width;
me.element.css({left:me.xPos+$(document).scrollLeft(),top:me.yPos+$(document).scrollTop()});
if(me.yon){
me.yPos=me.yPos+me.options.step;
}else{
me.yPos=me.yPos-me.options.step;
}
if(me.yPos<0){me.yon=1;me.yPos=0;}
if(me.yPos>=(clientHeight-Hoffset)){me.yon=0;me.yPos=(clientHeight-Hoffset);}
if(me.xon){
me.xPos=me.xPos+me.options.step;
}else{
me.xPos=me.xPos-me.options.step;
}
if(me.xPos<0){me.xon=1;me.xPos=0;}
if(me.xPos>=(clientWidth-Woffset)){me.xon=0;me.xPos=(clientWidth-Woffset);}
},
start:function(){
var me=this;
me.element.css("top",me.yPos);
me.interval=setInterval(function(){me.changePos();},me.options.delay);
}
}
})(jQuery);
$(function(){
$("#adbox").adFloat({width:150,height:150,top:0,left:0})
});
$("#adbox b").click(function(){
$("#adbox").hide(165)
})
</script>
</body>
</html>
Vue飘窗
<template>
<div>
<div id="adbox" ref="adbox" :style="adboxStyle" @mouseenter="enterbox" @mouseleave="leavebox">
<a href="javascript:;">
<img src="https://imgconvert.csdnimg.cn/aHR0cHM6Ly9hdmF0YXIuY3Nkbi5uZXQvNy83L0IvMV9yYWxmX2h4MTYzY29tLmpwZw" alt="广告图片">
</a>
<b @click="closebox">×</b>
</div>
</div>
</template>
<style scoped>
#adbox{
width:150px;
height:150px;
position: relative;
z-index:999;
}
#adbox img{
border: none;
}
#adbox b{
position: absolute;
right: 5px;
top: 0;
cursor: pointer;
color:#666;
}
</style>
<script>
export default{
data(){
return {
x:50,
y:50,
xin:true,
yin:true,
step:1,
delay:10,
itl:null,
adboxStyle:{
display:"block",
},
}
},
methods:{
closebox(){
this.adboxStyle={
display:"none",
}
},
leavebox(){
this.itl=setInterval(this.movebox, this.delay)
},
enterbox(){
clearInterval(this.itl)
},
movebox() {
var L = 0;
var T = 0;
var R = document.documentElement.clientWidth - this.$refs.adbox.offsetWidth; //浏览器显示宽度-adbox宽度，不随滚动条变化而变化
var B = document.documentElement.clientHeight - this.$refs.adbox.offsetHeight; //浏览器显示高度-adbox高度，不随滚动条变化而变化
this.$refs.adbox.style.left = this.x + document.documentElement.scrollLeft + "px"; //adbox初始左+滚动条最左端到浏览器最左端的距离
this.$refs.adbox.style.top = this.y + document.documentElement.scrollTop + "px"; //adbox初始高+滚动条顶端到浏览器顶端的距离
this.x = this.x + this.step * (this.xin ? 1 : -1);
if (this.x < L) {this.xin = true;this.x = L;}
if (this.x > R) {this.xin = false;this.x = R;}
this.y = this.y + this.step * (this.yin ? 1 : -1);
if (this.y < T) {this.yin = true;this.y = T;}
if (this.y > B) {this.yin = false;this.y = B;}
},
},
mounted:function(){
this.itl=setInterval(this.movebox, this.delay)
}
}
</script>
来源：CSDN
作者：长腿欧巴911
链接：https://blog.csdn.net/KONGHUI911/article/details/103472178