动画效果
效果说明:鼠标按住其中一个小人拖动,可以实现屏幕上两个小人的移动
实现
1.HTML中的代码
<div class="background" @mousemove="movezzhhMove($event)" @mouseup="movezzhhUp($event)">
</div>
<div class="zz-img" @mousedown="movezzhhDown($event)" @mousemove="movezzhhMove($event)" @mouseup="movezzhhUp($event)">
<img src="../assets/index/zz.png" alt="按下鼠标,移动我们试试看(^U^)">
</div>
<div class="hh-img" @mousedown="movezzhhDown($event)" @mousemove="movezzhhMove($event)" @mouseup="movezzhhUp($event)">
<img src="../assets/index/hh.png" alt="按下鼠标,移动我们试试看(^U^)">
</div>
我们定义了两个div
标签用来装两个小人的图片
2.css样式代码
.zz-img{
position: absolute;
top: 30vh;
left: 30vw;
width: 300px;
}
.hh-img{
position: absolute;
top: 30vh;
right: 30vw;
width: 300px;
margin-top: -38px;
}
.zz-img,.hh-img{
cursor: pointer;
z-index: 0;
}
两个小人的图片我们用绝对定位,其中有一张图片用了margin-top
,原因是为了让两张图片的手位于同一水平面上,所以我们做了微调
3.javascript代码
说明:
- click
- dblclick
- mousedown
- mouseenter 不冒泡 ❌
- mouseleave 不冒泡 ❌
- mousemove
- mouseout
- mouseover
- mouseup
其余的均为冒泡事件
data () {
return {
ifMouseDown: false,
zzorhh: 0,
elementzz: Object,
elementhh: Object,
zzLeft: Number,
hhRight: Number,
zzImgWidth: Number,
hhImgWidth: Number,
screenWidth: Number,
xCurrent: Number,
}
},
methods: {
stop: function (ev) { //阻止事件冒泡和事件默认行为
ev.stopPropagation()
ev.preventDefault()
},
movezzhhDown: function (ev) {
this.stop(ev)
this.ifMouseDown = true
let elementClass = (ev.target || ev.srcElement).parentNode.className
if (elementClass.indexOf('hh') != -1) {
this.zzorhh = 1
} else {
this.zzorhh = 0
}
this.xCurrent = ev.pageX
},
movezzhhMove: function (ev) {
if (this.ifMouseDown) {
let xNext = ev.pageX
let differ = (xNext - this.xCurrent)/3 //图片移动的速度,要是图片移动的速度过快会有mouseMove触发频率的问题,给人一种
this.xCurrent = xNext
let elementzzLeft = parseInt(this.elementzz.css('left'))
let elementhhRight = parseInt(this.elementhh.css('right'))
if (this.zzorhh) {
let hhRight = elementhhRight + differ
let zzLeft = elementzzLeft + differ
let allLength = hhRight + zzLeft + this.zzImgWidth + this.hhImgWidth
if ((allLength - this.screenWidth) > 31) {
zzLeft = elementzzLeft
hhRight = elementhhRight
} else {
if (hhRight < 20) {
hhRight = 20
}
if (zzLeft < 20) {
zzLeft = 20
}
}
this.elementhh.css({ 'right': hhRight + 'px' })
this.elementzz.css({ 'left': zzLeft + 'px' })
} else {
let hhRight = elementhhRight - differ
let zzLeft = elementzzLeft - differ
let allLength = hhRight + zzLeft + this.zzImgWidth + this.hhImgWidth
if ((allLength - this.screenWidth) > 31) {
zzLeft = elementzzLeft
hhRight = elementhhRight
} else {
if (hhRight < 20) {
hhRight = 20
}
if (zzLeft < 20) {
zzLeft = 20
}
}
this.elementhh.css({ 'right': hhRight + 'px' })
this.elementzz.css({ 'left': zzLeft + 'px' })
}
} else {}
},
movezzhhUp: function () {
if (this.ifMouseDown) {
this.ifMouseDown = 0
this.elementzz.css({ 'left': this.zzLeft + 'px' })
this.elementhh.css({ 'right': this.hhRight + 'px' })
} else {}
}
},
mounted: function () {
let that = this
setTimeout(function () {
that.elementzz = $('.zz-img')
that.elementhh = $('.hh-img')
that.zzLeft = parseInt(that.elementzz.css('left'))
that.hhRight = parseInt(that.elementhh.css('right'))
that.hhImgWidth = parseFloat(that.elementhh.css('width'))
that.zzImgWidth = parseFloat(that.elementhh.css('width'))
that.screenWidth = $(document).width()
}, 50)
在初始化函数中我们获取了两张图片的宽度
that.hhImgWidth = parseFloat(that.elementhh.css('width'))
that.zzImgWidth = parseFloat(that.elementhh.css('width'))
左右间隙
that.zzLeft = parseInt(that.elementzz.css('left'))
that.hhRight = parseInt(that.elementhh.css('right'))
屏幕宽度信息
that.screenWidth = $(document).width()
在 movezzhhDown函数中我们主要做的工作是把ifMouseDown
设定为true,以及判断那张图片被点击了
在movezzhhMove函数中我们主要是移动两张小人的图片
if ((allLength - this.screenWidth) > 31) {
zzLeft = elementzzLeft
hhRight = elementhhRight
}
这个的作用是判断两个小人会不会重合
if (hhRight < 20) {
hhRight = 20
}
if (zzLeft < 20) {
zzLeft = 20
}
这个的作用是判断两个小人会不会跑到屏幕外面去
在movezzhhUp函数中我们主要做的工作是当鼠标松开的时候恢复两张图片原来的位置