【vue】 vue2 实现飘窗效果

文章目录

具体效果
代码
注册使用

具体效果

飘窗效果

代码

Baywindow.vue

<template><!-- 飘窗效果 --><divid="thediv"ref="thediv"style="position: absolute; z-index: 111; left: 0; top: 0"v-show="thedivShow"@mouseover="clearFdAd"@mouseout="starFdAd"><divstyle="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>

注册使用

全局注册在main.js中

// 注册为全局组件
import Baywindow from "@/views/Baywindow.vue";
Vue.component("Baywindow", Baywindow);

局部注册

<template><div class="home"><Baywindow></Baywindow></div>
</template><script>
import Baywindow from "@/views/Baywindow.vue";export default {name: "Home",components: {Baywindow,},
};
</script>

【vue】 vue2 实现飘窗效果相关推荐

vue飘窗效果（css飘窗效果，跟随页面滚动）
简述:飘窗效果,相信大家都见过,一般用于官网页面,下面给大家整理了下,飘窗效果在vue中的使用,效果图如下: 1.话不多说,直接上代码,HTML部分: <template><!-- ...
黑马vue---10-11、Vue实现跑马灯效果
黑马vue---10-11.Vue实现跑马灯效果一.总结一句话总结: 1. 给 [浪起来] 按钮,绑定一个点击事件 v-on @ 2. 在按钮的事件处理函数中,写相关的业务逻辑代码:拿到 ...
vue2实现传送门效果
描述: 在Vue3中<Teleport> 是一个内置组件,使我们可以将一个组件的一部分模板"传送"到该组件的 DOM 层次结构之外的 DOM 节点中:现在在vue2实现 ...
Vue2实现放大镜效果
本文实例为大家分享了Vue2实现放大镜效果的具体代码,供大家参考,具体内容如下一,需求描述在使用vue进行项目开发时,需要通过鼠标在一定范围内滑动使项目图片放大以便于查看步骤思路对原图的显示空 ...
php vue联动查询,使用vue.js实现联动效果的示例代码
摘要:本篇文章主要介绍了使用vue.js实现联动效果的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧想用vue.js写一个联动效果,按照自己的思路实验了下,并没有 ...
[vue] vue2.0不再支持v-html中使用过滤器了怎么办？
[vue] vue2.0不再支持v-html中使用过滤器了怎么办? 在method中定义方法 htmlFilter(htmlString){ return htmlString.replace(/+s ...
php实现飘窗,JS实现网站图片飘窗效果，JavaScript悬浮广告（附详细代码）
原标题:JS实现网站图片飘窗效果,JavaScript悬浮广告(附详细代码) JS实现网站图片飘窗效果,Java悬浮广告,郑州SEO提供以下代码,仅供参考: 飘窗效果-丁光辉博客(www.dinggu ...
Vue实现跑马灯效果以及封装为组件发布
Vue 实现跑马灯效果前言最近做活动需要做跑马灯效果,其他同事也有实现,本来打算复制他们代码,发现都是使用setInterval实现了,也没有封装为组件,所以自己用CSS3实现了一下跑马灯效果,并 ...
vue openlayer 添加风场效果
vue openlayer 添加风场效果一个简单的小demo,就是在一个openlayers地图上面添加风场效果. 话不多说,直接进入正题. 首先我们需要安装一个插件. 插件地址:https://w ...

【vue】 vue2 实现飘窗效果

文章目录

具体效果

代码

注册使用

【vue】 vue2 实现飘窗效果相关推荐

最新文章

热门文章