javascript实现鼠标移动两个小人的动画效果

动画效果

效果说明：鼠标按住其中一个小人拖动，可以实现屏幕上两个小人的移动

实现

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="按下鼠标，移动我们试试看(＾Ｕ＾)">
    </div>
    <div class="hh-img" @mousedown="movezzhhDown($event)" @mousemove="movezzhhMove($event)" @mouseup="movezzhhUp($event)">
      <img src="../assets/index/hh.png" alt="按下鼠标，移动我们试试看(＾Ｕ＾)">
    </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函数中我们主要做的工作是当鼠标松开的时候恢复两张图片原来的位置