效果:
1.点击收起按钮,导航栏收起,鼠标移动到导航栏cursor:move鼠标移动光标提示导航栏可移动,鼠标移动到img上cursor:pointer出现小手,提示可点击跳转
2.导航栏展开或收起可移动到任何位置展开收起,展开或收起的位置随移动的位置改变
代码部分:
<template>
<div id="index_tip_" :style="{padding:'20px 0',top:showIcon?boxTop:box2Top}">
<div id="index_tip_in" v-show="showIcon">
<div class="center center0" >
<img @click="toItPageFn" src="../../../static/images/IT5000.png" alt="" />
</div>
<div class="center center1">
<img @click="toCommontProblemFn" src="../../../static/images/IT6000.png" alt=""/>
</div>
<div class="center center2">
<img @click="toOperationFn" src="../../../static/images/IT7000.png" alt="" />
</div>
<div class="center center3">
<div @click="toOpenOrCloseFn(2)" class="iconfont iconpullup01">
</div> 收起</div>
</div>
<div v-show="!showIcon" class="open-icon" >
<img @click="showIcon=true" src="../../../static/images/IT4000.png" alt="" />
<div class="iconfont iconpulldown01" @click="toOpenOrCloseFn(1)"></div>
<div class="title">展开</div>
</div>
</div>
</template>
<script>
export default{
//main.js:Vue.prototype.$pageHeight = 1 * 100 + 'vh'
data(){
return{
showIcon: true,
boxTop:`calc(${this.$pageHeight} - 340px)`,
box2Top:`calc(${this.$pageHeight} - 170px)`}
}
}
mounted() { this.getmoveFn()}
methods:{
toOpenOrCloseFn(flag){
this.showIcon=flag==1
let box=document.getElementById("index_tip_");
this.boxTop=box.offsetTop+"px"
this.box2Top=box.offsetTop+"px"
},
getmoveFn(){
let divX=0;
let divY=0;
let mouseX=0;
let mouseY=0;
let box=document.getElementById("index_tip_");
//为box绑定一个鼠标按下事件
if(box){
box.onmousedown=function(e){
console.log(e);
//获取盒子距离浏览器可视窗口的水平距离和垂直距离
divX=this.offsetLeft;
divY=this.offsetTop;
//获取鼠标距离浏览器可视窗口的水平位置和垂直位置
mouseX=e.clientX;
mouseY=e.clientY;
//为全局绑定一个鼠标移动事件(1.为什么不给box绑定?)
document.onmousemove=function(e){
//获取移动后的水平偏移量和垂直偏移量
let disX=e.clientX-mouseX;
let disY=e.clientY-mouseY;
//令箱子移动:移动前的位置+移动后的位置
box.style.left=disX+divX+"px";
box.style.top=disY+divY+"px";
}
//为盒子绑定一个鼠标移出事件,使箱子停止移动
document.onmouseup=function(){
document.onmousemove=null;
document.onmouseup=null;
}
}
}
},
toItPageFn(){},
toCommontProblemFn() {},
toOperationFn() {},
}
</script>
<style lang='less'>
#index_tip:hover {
.open-icon {
.iconfont{
font-size: 33px !important;
}
img{
width:81%;
}
}
}
#index_tip_{
position: fixed;
right: 16px;
width:65px;
z-index: 99999999;
box-shadow: -1px 0px 7px #d3daeb;
background-color: #ffffff;
cursor: move;
border-radius: 50px;
#index_tip_in{
img{
margin: 10px 0;
width: 80%;
cursor: pointer;
}
img:hover {
width: 83%;
height: 32%;
background-color: #eef4ff !important;
}
}
.center3{
font-size: 12px;
color: rgb(51, 49, 49);
font-weight: 550;
margin-bottom: 9px;
font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
.iconpullup01{
width: 50%;
margin-left: 16px;
font-size: 30px !important;
color: #bacdff;
}
}
.open-icon {
text-align: center;
.title {
color: #000;
margin-bottom:8px;
margin-top: -2px;
}
.iconfont {
font-size: 25px !important;
color: #bacdff;
}
img{
width:80%;
}
img:hover{
width:81%;
cursor: pointer;
}
}
}
</style>