由于项目需要改写了一个悬浮碰撞弹窗组件

<template>
<div class="floatLayer">
<a class="close-btn" href="javascript:;" @click.stop="closeView">×</a>
<img :src="json.src" alt="">
</div>
</template>
<script>
export default{
data(){
return{
object: [],
left:0,
top:0,
interval:30,
distance:2,
directionX:1,
directionY:1,
zIndex:100,
target:"_blank",
cursor:"pointer",
i:0
}
},
props:['json'],
mounted(){
this.init(this.json);
},
methods:{
closeView(){
this.$emit("closeView");
},
init(json){
var obj = document.querySelector(".floatLayer");
//自定义
obj.left=parseInt(json.left || this.left);
obj.top = parseInt(json.top || this.top);
obj.interval = json.interval || this.interval;
obj.distance = json.distance || this.distance;
obj.directionX = json.directionX || this.directionX;
obj.directionY = json.directionY || this.directionY;
obj.index = this.object.length;
obj.url = json.url;
obj.target = json.target || this.target;
obj.t=null;
//事件
if (obj.url != undefined){
obj.onclick = function () {
switch (this.target) {
case "_blank":
open(this.url);
break;
case "_parent":
parent.location = this.url;
case "_top":
top.location = this.url;
break;
case "_self":
location = this.url;
break;
}
}
}
if (!json.noHoverPause) {
obj.onmouseover = function () {
clearInterval(this.t);
}
obj.onmouseout = function () {
obj.t=setInterval(function(){that.float(obj.index)}, obj.interval);
}
}
obj.src = json.src;
obj.style.cursor = json.cursor || this.cursor;
obj.style.position = "absolute";
obj.style.left = obj.left + "px";
obj.style.top = obj.top + "px";
obj.style.zIndex = json.zIndex || this.zIndex;
obj.style.width = json.width || "";
obj.style.height = json.height || "";
obj.style.directionX=json.directionX || this.directionX;
obj.style.directionY=json.directionY || this.directionY;
this.object.push(obj);
//console.log(this.object)
document.body.appendChild(obj);
let that=this;
console.log(obj.t)
obj.t=setInterval(function(){that.float(obj.index)}, obj.interval);
},
float(index) {
//console.log("dd",index);
var pageWidth = document.documentElement.clientWidth;
var pageHeight = document.documentElement.clientHeight;
var scrollLeft = document.documentElement.scrollLeft;
var scrollTop = document.documentElement.scrollTop; var obj = this.object[index];
//console.log("s",obj) obj.left = obj.left + obj.directionX * obj.distance;
if (obj.left <= scrollLeft) {
obj.left = scrollLeft;
obj.directionX = 1;
}
if (obj.left + obj.offsetWidth >= pageWidth + scrollLeft - 1) {
obj.left = pageWidth + scrollLeft - 1 - obj.offsetWidth;
obj.directionX = -1;
} obj.top = obj.top + obj.directionY * obj.distance;
if (obj.top <= scrollTop) {
obj.top = scrollTop;
obj.directionY = 1;
}
if (obj.top + obj.offsetHeight >= pageHeight + scrollTop - 1) {
obj.top = pageHeight + scrollTop - 1 - obj.offsetHeight;
obj.directionY = -1;
} obj.style.left = obj.left + "px";
obj.style.top = obj.top + "px";
} }
}
</script>
<style>
.floatLayer{
position:fixed;
left:0;
top:0;
z-index:100;
}
.close-btn{
display:block;
position:absolute;
right:0px;
top:0px;
width:40px;
height:40px;
line-height:40px;
text-align: center;
overflow:hidden;
font-size: 30px;
background:#ccc;
color:#fff;
z-index:110;
}
.close-btn:hover{
color:#B50900;
background:#ccc;
}
.floatLayer img{
position:relative;
z-index:101;
}
</style>
调用方式(加上了多个悬浮碰撞弹窗)
<float-view v-if="showView" :json="json" @closeView="closeView"></float-view>
<float-view v-if="showView2" :json="json2" @closeView="closeView2"></float-view>
数据来源模拟的
json:{
src: 'https://www.ssdfz.net/ImageFiles/20180419130336830.jpg',
url: 'http://www.baidu.com',
left: ,
top: ,
directionX: ,
directionY: ,
distance: null,
interval: null,
target: null,
zIndex: null,
width: null,
height: null,
noHoverPause: null, //鼠标经过时不停止,为true时不停止
cursor: null,
},

json2:{
src: 'https://www.ssdfz.net/ImageFiles/20180424095347234.jpg',
url: 'http://www.baidu.com',
left: 0,
top: 0,
directionX: 1,
directionY: 1,
distance: null,
interval: null,
target: null,
zIndex: null,
width: null,
height: null,
noHoverPause: null, //鼠标经过时不停止,为true时不停止
cursor: null,
},

 

父组件的基本操作

父组件控制显示隐藏
data(){
return{
showView:true,
showView2:true,
}
},
methods:{
closeView(val){
this.showView=false;
},
closeView2(val){
this.showView2=false;
},
}

效果图

												

基于vue的悬浮碰撞窗口(用于打广告的)组件的更多相关文章

  1. 基于Vue的工作流项目模块中,使用动态组件的方式统一呈现不同表单数据的处理方式

    在基于Vue的工作流项目模块中,我们在查看表单明细的时候,需要包含公用表单信息,特定表单信息两部分内容.前者表单数据可以统一呈现,而后者则是不同业务的表单数据不同.为了实现更好的维护性,把它们分开作为 ...

  2. 【技术博客】基于vue的前端快速开发(工具篇)

    一.Vue教程 vue.js是一套构建用户界面的渐进式框架.vue采用自底向上增量开发的设计.vue的核心库只关心视图层,非常容易学习,非常容易与其它库和已有项目整合.vue完全有能力驱动采用单文件组 ...

  3. [译]基于Vue.js的10个最佳UI框架,用于构建移动应用程序

    原文查看10 Best Vue.js based UI Frameworks for Building Mobile Apps 如果您期待使用Vue.js构建移动应用程序,那么您可以选择许多可用的UI ...

  4. 基于Vue、Springboot网站实现第三方登录之QQ登录,以及邮件发送

    基于Vue.Springboot实现第三方登录之QQ登录 前言 一.前提(准备) 二.QQ登录实现 1.前端 2.后端 1.application.yml 和工具类QQHttpClient 2.QQL ...

  5. 基于Vue开发的门户网站展示和后台数据管理系统

    基于Vue的前端框架有很多,这几年随着前端技术的官方应用,总有是学不完的前端知识在等着我们,一个人的精力也是有限,不可能一一掌握,不过我们学习很大程度都会靠兴趣驱动,或者目标导向,最终是可以以点破面, ...

  6. Codrops 教程:基于 CSS3 的精美模态窗口效果

    Codrops 分享了漂亮的模态窗口效果实现方法,希望给前端开发人员提供一些创新显示对话框的启示.这个方案使用了触发按钮(或任何的 HTML 元素),在点击的时候出现一个模态窗口,带有简单的过渡(或动 ...

  7. 基于Vue实现后台系统权限控制

    原文地址:http://refined-x.com/2017/08/29/基于Vue实现后台系统权限控制/,转载请注明出处. 用Vue/React这类双向绑定框架做后台系统再适合不过,后台系统相比普通 ...

  8. 优秀的基于VUE移动端UI框架合集

    1. vonic 一个基于 vue.js 和 ionic 样式的 UI 框架,用于快速构建移动端单页应用,很简约,是我喜欢的风格 star 2.3k 中文文档 在线预览 2.vux 基于WeUI和Vu ...

  9. 基于VUE框架 与 其他框架间的基本对比

    基于VUE框架的基本描述 与 其他框架间的基本对比 2018-11-03  11:01:14 A B React React 和 Vue 有许多相似之处,它们都有: 使用 Virtual DOM 提供 ...

随机推荐

  1. genymotion使用学习

    1 安装 直接去其官网(https://www.genymotion.com/#!/download)下载安装包安装即可,安装中会附带安装VirtualBox. 2 注册 必须使用帐号登录后,方可下载 ...

  2. hmac md5

    import hmac //内置 def simaplemd5(str): m2 = hashlib.md5() m2.update(str) res=m2.hexdigest() return re ...

  3. 维护没有源代码的遗留 Java 项目

    维护没有源代码的遗留 Java 项目 Give Those Sweets Some Love --> 有时你可能不得不修改一些只有 Jar 和 .class 的 Java 项目. 要修改 Jar ...

  4. setting 常用配置

    一,保存logging 信息 # 保存log信息的文件名 LOG_LEVEL = "INFO" LOG_STDOUT = True LOG_ENCODING = 'utf-8' # ...

  5. poj1061-青蛙的约会-(贝祖定理+扩展欧几里得定理+同余定理)

    青蛙的约会 Time Limit: 1000MS   Memory Limit: 10000K Total Submissions:132162   Accepted: 29199 Descripti ...

  6. HTML 视频

    在html5中使用视频,只要添加元素<video></video>元素表示. <video>有几个属性: src 指定音频文件的路径 poster 视频播放之前显示 ...

  7. Canvas 绘画

    一.Canvas 应用场景 1.游戏 2.图表 3.动画 4.codepen.io (HTML5 动效) 最早 二.Canvas 发展历史 1.最早在apple的safari  1.3中引入 2.ie ...

  8. Linux安装face_recgnition

    Ubuntu 3:apt-get install python3.6-dev 4:pip3 install face_recgnition 5:  pip3 install opencv-python ...

  9. iostat磁盘监控工具

    安装iostat磁盘监控工具 1.安装 yum install sysstat 2.运行 iostat -k -d -x 1 10 -k:以kb为单位统计 -d:显示磁盘状态 -x:显示详细信息 1: ...

  10. CSS实现禁止文字选中

    E10平台预览第四版中包含了对 CSS3 新属性 -ms-user-select 的支持,Web 开发人员可以利用这一新属性轻松精确的控制用户可以在网站上选择哪些文本. user-select:non ...