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

<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. oracle函数大全-字符处理函

    字符函数——返回字符值 这些函数全都接收的是字符族类型的参数(CHR 除外)并且返回字符值.除了特别说明的之外,这些函数大部分返回VARCHAR2类型的数值.字符函数的返回类型所受的限制和基本数据库类 ...

  2. 配置linux的ip、网络等

      之前配过ubuntu的..以为centos的也是这么配置,结果照抄下来,启动报错哈哈...网上搜下资料发现centos配置需要不少文件.忘了以后再参考下- ubuntu的,这样配置 vim /et ...

  3. kafka 删除topic清空数据

    原 kafka 删除topic清空数据 2018年11月20日 18:17:50 Ming! 阅读数:1391   版权声明:版权声明:本文为博主原创文章,未经博主允许不得转载. https://bl ...

  4. linux centos 访问根目录 not accessable

    chmod 777 root 即可 或  chmod a+x root https://blog.csdn.net/CSDN_GYG/article/details/73276310

  5. pip 离线安装

    pip download ansible -d . --trusted-host mirrors.aliyun.com pip install ansible-2.7.5.tar.gz  --user ...

  6. 新手必看ES6基础

    ES6 基础 一.新的变量声明方式 let/const 与var不同,新的变量声明方式带来了一些不一样的特性,其中最重要的两个特性就是提供了块级作用域与不再具备变量提升. 通过2个简单的例子来说明这两 ...

  7. idea 修改 使用的git账号

    打开控制面板-->用户账户-->凭证管理器 如下图点击进入,删除原有的账号 当在idea中再提交或下载代码时,就会弹出如下提示框: 重新输入你自己的账号就可以了.

  8. Docker容器管理及代码调用

    这篇文章主要讲解Docker的容器管理,实现服务的部署,以Redis为例.我用的是Utuntu16.04,所以软件直接从库中下载,库中的Docker不是最新版本.但是不影响部署,如需要最新可在官网下载 ...

  9. EF CodeFirst学习笔记004--足够聪明

    将BlogTypes注释掉,但因为Blogs中定义了BlogType 这样类型的属性,所以Ef会聪明的找到BlogType类. public class BlogEntities:DbContext ...

  10. 下载安装windows版Redis

    链接       https://github.com/MicrosoftArchive/redis/releases 选择版本下载 在redis目录打开cmd命令输入 redis-server.ex ...