vue实现悬浮广告飘窗组件

<template><!--悬浮小广告样式的提示信息--><div id="thediv" ref="thediv" style="background:red;position: absolute; z-index: 111; left: 0; top: 0" v-show="theDivShow"@mouseover="clearFdAd" @mouseout="starFdAd"><div style="position: absolute;cursor: pointer;font-size: 12px;color: #999999;" @click="theDivShow = false">关闭</div><a href="javascript:;"><img src="https://imgconvert.csdnimg.cn/aHR0cHM6Ly9hdmF0YXIuY3Nkbi5uZXQvNy83L0IvMV9yYWxmX2h4MTYzY29tLmpwZw" width="100%" 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: 120px;width: 200px;//overflow: hidden;img {width: 100%;height: 100%;}
}
</style>

vue实现悬浮广告飘窗组件相关推荐

vue实现web端飘窗组件
项目中需要实现飘窗效果效果如下: 一.封装飘窗组件FloatWidow.vue,放在目录/components下 <template>& ...
php实现飘窗,JS实现网站图片飘窗效果，JavaScript悬浮广告（附详细代码）
原标题:JS实现网站图片飘窗效果,JavaScript悬浮广告(附详细代码) JS实现网站图片飘窗效果,Java悬浮广告,郑州SEO提供以下代码,仅供参考: 飘窗效果-丁光辉博客(www.dinggu ...
vue 移动端顶部导航组件
废话不多说,下面是我自己写的vue移动端顶部导航组件给大家分享一下 ,动态绑定背景颜色,字体颜色,以及回退图标.需要的直接拿去放项目里用吧- 示例图: HTML <template>< ...
7 种最棒的 Vue Loading 加载动画组件测评与推荐 - 穷尽市面上所有加载动画效果（Vue loader）类型
本文完整版:<7 种最棒的 Vue Loading 加载动画组件测评与推荐> 目录 7 种不同类型的 Vue Loading 加载动画组件 1. Vue Simple Spinner - ...
Vue多个单文件组件使用
在project目录下创建components文件夹,然后将所有子组件放入components文件夹下 [创建此目录][文件名的首字母大写] 1.多组件嵌套使用 Child1.vue <tem ...
用vue优雅地编写UI组件的几条指导原则
前言最近在尝试写几个UI组件,并通过阅读element-ui的源码,与其反复比较,然后认真思考,最后总结出一些自己的一些心得和体会.在造轮子的过程中,既巩固了html,css,js基础,又加深了对v ...
iView 3.3.0 发布，基于 Vue.js 的企业级 UI 组件库
iView 3.3.0 发布了,代号 Transistor ,iView 是一套基于 Vue.js 的企业级 UI 组件库,主要服务于 PC 界面的中后台产品. 本次更新如下: https://www ...
【分享】Vue 资源典藏（UI组件、开发框架、服务端、辅助工具、应用实例、Demo示例）...
Vue 资源典藏,包括:UI组件开发框架服务端辅助工具应用实例 Demo示例 element ★11612 - 饿了么出品的Vue2的web UI工具套件 Vux ★7503 - 基于Vue和 ...
六十八、完成Vue项目推荐和周末游组件，并使用Ajax发起ajax请求
@Author:Runsen 2020/10/27. 周二.今天又是奋斗的一天. 写在前面:我是「Runsen」,热爱技术.热爱开源.热爱编程.技术是开源的.知识是共享的.大四弃算法转前端,需要每天的 ...

vue实现悬浮广告飘窗组件

vue实现悬浮广告飘窗组件

vue实现悬浮广告飘窗组件相关推荐

最新文章

热门文章