具体效果
飘窗效果
如何实现
<template>
<!-- 飘窗效果 -->
<div
id="thediv"
ref="thediv"
style="position: absolute; z-index: 111; left: 0; top: 0"
v-show="thedivShow"
@mouseover="clearFdAd"
@mouseout="starFdAd"
>
<div
style="
cursor: pointer;
text-align: right;
font-size: 12px;
color: #999999;
"
@click="thedivShow = false"
>
关闭
</div>
<a href="http://www.baidu.com" target="_blank"
><img src="../assets/111.jpg" width="320" border="0"
/></a>
</div>
</template>
<script>
var interval;
export default {
data() {
return {
xPos: 0,
yPos: 0,
xin: true,
yin: true,
step: 1,
delay: 18,
height: 0,
Hoffset: 0,
Woffset: 0,
yon: 0,
xon: 0,
pause: true,
thedivShow: true,
};
},
mounted() {
interval = setInterval(this.changePos, this.delay);
},
methods: {
changePos() {
let width = document.documentElement.clientWidth;
let height = document.documentElement.clientHeight;
this.Hoffset = this.$refs.thediv.offsetHeight; //获取元素高度
this.Woffset = this.$refs.thediv.offsetWidth;
// 滚动部分跟随屏幕滚动
// this.$refs.thediv.style.left = (this.xPos + document.body.scrollLeft + document.documentElement.scrollLeft) + "px";
// this.$refs.thediv.style.top = (this.yPos + document.body.scrollTop + document.documentElement.scrollTop) + "px";
// 滚动部分不随屏幕滚动
this.$refs.thediv.style.left =
this.xPos + document.body.scrollLeft + "px";
this.$refs.thediv.style.top = this.yPos + document.body.scrollTop + "px";
if (this.yon) {
this.yPos = this.yPos + this.step;
} else {
this.yPos = this.yPos - this.step;
}
if (this.yPos < 0) {
this.yon = 1;
this.yPos = 0;
}
if (this.yPos >= height - this.Hoffset) {
this.yon = 0;
this.yPos = height - this.Hoffset;
}
if (this.xon) {
this.xPos = this.xPos + this.step;
} else {
this.xPos = this.xPos - this.step;
}
if (this.xPos < 0) {
this.xon = 1;
this.xPos = 0;
}
if (this.xPos >= width - this.Woffset) {
this.xon = 0;
this.xPos = width - this.Woffset;
}
},
clearFdAd() {
clearInterval(interval);
},
starFdAd() {
interval = setInterval(this.changePos, this.delay);
},
},
};
</script>
<style lang="scss" scoped>
#thediv {
z-index: 100;
position: absolute;
top: 43px;
left: 2px;
height: 184px;
width: 280px;
overflow: hidden;
img {
width: 100%;
height: 100%;
}
}
</style>
其他页面调用
局部注册
<template>
<div class="home">
<Baywindow></Baywindow>
</div>
</template>
<script>
import Baywindow from "@/views/Baywindow.vue";
export default {
name: "Home",
components: {
Baywindow,
},
};
</script>
全局注册 在main.js中
// 注册为全局组件
import Baywindow from "@/views/Baywindow.vue";
Vue.component("Baywindow", Baywindow);
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/48845.html
