js图片随鼠标移动,旋转,拉伸

效果如图,图片可以跟随鼠标移动,旋转,拉伸,代码在谷歌浏览器和IE11验证了,其他浏览器没试过

本博客源码: https://github.com/shengbid/vue-demo 把这个功能放在vue项目里了, 这个项目里会把平时博客写的一些功能的代码都放在里面,有需要可以下载看看,有帮助的话点个star哈

 

我主要讲一下实现思路,

首先是移动,这个比较简单

这里我用的是鼠标事件的pageX,pageY,因为这个获取的是鼠标距文档左上角的坐标,不受滚动条影响

 

画一张图来演示

如图.绿色是鼠标移动位置,pageX,pageY是鼠标按下的位置,pageX1,pageY1是鼠标移动停止时的位置

pageX是由图片的left + 鼠标到图片左边的距离组成,也许还有其他的padding,margin之类的,但是不影响,统统都算成c

pageX = left + c

c = pageX - left

要求第二次的left值,只需要用pageX1 - c就可以

left1 = pageX1 - c

 

再把计算出的left1赋值给定位元素,top是同样的计算

因为我的图片是包在一个div元素里,定位给就这个div赋值

 

代码实现

// 元素移动
  var moveMouse = false;
  $('.img').mousedown(function (e) {
    e.preventDefault()
    e.stopPropagation()
    moveMouse = true

    var dis = {
      X: e.pageX - $('.box').position().left,
      Y: e.pageY - $('.box').position().top
    }
    $(document).on('mousemove', function (event) {
      event.preventDefault()
      event.stopPropagation()
      if (moveMouse) {
        var end = {}
        end.X = event.pageX - dis.X
        end.Y = event.pageY - dis.Y
        $('.box').css({
          'left': end.X,
          'top': end.Y
        })
      }
    })
  })

  $(document).on('mouseup', function (e) {
    moveMouse = false
  });

 

这样就实现移动功能了

 

  再来实现元素的旋转拉伸功能

  拉伸可以通过改变元素的width和height实现,也可以通过transform的scale实现

  这里涉及一个问题,旋转的时候以图片左上角为旋转点还是以图片中心点为旋转点,transform的rotate默认是以元素的中心点为旋转点.而width和height的改变是以元素左上角为基点,这里我们要做的功能是边旋转边改变图片大小,那么统一都以图片中心点为基点.这样的话用width和height来实现放大缩小功能就不方便了,所以还是使用scale来实现

 

  先看旋转的实现,以这张图说明,首先需要确定中心点,还有第一次鼠标按下的点pointB,以后每次旋转都是求BA,CA的夹角,也就是cosA

 代码实现

var pointA = { // 元素中心点 元素1/2自身宽高 + 元素的定位
    X: $('.box').width() / 2 + $('.box').offset().left,
    Y: $('.box').height() / 2 + $('.box').offset().top
  };
  console.log(pointA)

  var pointB = {};
  var pointC = {}; // A,B,C分别代表中心点，起始点，结束点坐标
  // 这里通过鼠标的移动获取起始点和结束点
  var typeMouse = false;

  var allA = 0; // 存放鼠标旋转总共的度数
  var count = 0;
  // 元素跟随鼠标移动旋转
  $(".r