图片缩放及拖拽

子壹
688 阅读4分钟

不知不觉又一个月过去，这段时间早上的看书也是颇有收获，真心推荐大家打好基础，在进行更深一步的学习，现在感觉自己从书籍中收获颇丰，打算在用一些天把这本书（js红皮书）看完，之后的心得体会一定和大家进行分享，当然如有不对之处还是请大佬们轻点开火。闲话咱也不多说，都在酒里，不不不，说错了，都在文章里。今天一改之前的学习风格，今天分享一下今天在工作中遇到的麻烦。

  • 功能要求：进行图片的放大之后的滚轮缩放

    1. 首先我先实现图片的放大吧

      • 使用了一个jquery的插件，baguetteBox.js这款插件还是不错的选择，符合正常的功能需求，强力推荐！！！

      • 废话也不多说，毕竟一款插件看看就能上手，贴一下自己的代码

        baguetteBox.run('.z3d_goods_img', {  // .z3d_goods_img  就是被放大的图片元素
  captions: function(element) {
    return element.getElementsByTagName('img')[0].alt;
  }
});
if (typeof oldIE === 'undefined' && Object.keys) {
  hljs.initHighlighting();
}

    2. 正题来了啊，实现滚轮缩放吧，鼠标滚轮缩放的方法都了解吧？什么不是很了解？一只脚送走，哈哈哈开玩笑应该送走我才对啊，来了滚轮滑动onmousewheel ，妥妥的了

      • 大佬们我还没说完，先别着急骂我，上代码

         image.onmousewheel=function(event){
   var UpDown =  event.wheelDelta
   //大于0滚轮向上滚动,小于0滚轮向下滚动
   if(UpDown>0){
     var maxScaleHeight = toPoint(this.style.maxHeight);  // 我是使用的是百分比，所以转了一下小数
     var maxScaleWidth = toPoint(this.style.maxWidth) ;
     this.style.maxHeight = toPercent(maxScaleHeight-0.1); // 再转回百分比，感觉有点low ，请大佬给出方案
     this.style.maxWidth = toPercent(maxScaleWidth-0.1);
     var scaleper = maxScaleWidth-0.1;
     this.style.transform = 'scale('+ scaleper+')'; // 持续缩放，无限缩放，还被设计吐槽为啥能无限放大
   }else{
     var maxScaleHeight = toPoint(this.style.maxHeight);
     var maxScaleWidth = toPoint(this.style.maxWidth) ;
     this.style.maxHeight = toPercent(maxScaleHeight+0.1);
     this.style.maxWidth = toPercent(maxScaleWidth+0.1);
     var scaleper = maxScaleWidth+0.1;
     this.style.transform = 'scale('+ scaleper+')';

   }
 };

      • 上完代码，谷歌浏览器一测没毛病，360没毛病 ，香香的了兄弟们，火狐（浏览器）狗哥不同意了啊整一句：我就不缩放，没办法啊 ，改吧！！

        image.addEventListener('DOMMouseScroll',function(event){
  var UpDown =  event.detail*40
  //大于0滚轮向上滚动,小于0滚轮向下滚动
  if(UpDown>0){
    var maxScaleHeight = toPoint(this.style.maxHeight);
    var maxScaleWidth = toPoint(this.style.maxWidth) ;
    this.style.maxHeight = toPercent(maxScaleHeight+0.1);
    this.style.maxWidth = toPercent(maxScaleWidth+0.1);
    var scaleper = maxScaleWidth+0.1;
    this.style.transform = 'scale('+ scaleper+')';
  }else{
    var maxScaleHeight = toPoint(this.style.maxHeight);
    var maxScaleWidth = toPoint(this.style.maxWidth) ;
    this.style.maxHeight = toPercent(maxScaleHeight-0.1);
    this.style.maxWidth = toPercent(maxScaleWidth-0.1);
    var scaleper = maxScaleWidth-0.1;
    this.style.transform = 'scale('+ scaleper+')';
  }
},true)

      • 这不能这两大段吧？，来吧！展示

        /*
*	1.先合并一下event.detail和detail吧
*	2.兼容一下DOMMouseScroll和onmousewheel吧
*	3. 写共同的方法吧
*/ 
var wheel = function(event) {   
    var delta = 0;  
    if (!event) /* For IE. */  
        event = window.event;  
    if (event.wheelDelta) { /* IE/Opera. */  
        delta = event.wheelDelta / 120;  
    } else if (event.detail) {  
        delta = -event.detail / 3;  
    }  
    if (delta)  
        handle(delta);   // todo
    if (event.preventDefault)  
        event.preventDefault();  
    event.returnValue = false;  
}  
if (window.addEventListener) {  
    /** DOMMouseScroll is for mozilla. */  
    window.addEventListener('DOMMouseScroll', wheel, false);  
}  
/** IE/Opera. */  
iamge.onmousewheel = wheel;
var handle = function (delta){
  var random_num = Math.floor((Math.random() * 100) + 50);  
    if (delta < 0) {  
        // todo something
        return;  
    } else {  
       // todo something
        return;  
    }
}

  • 功能要求：进行图片的放大之后鼠标拖拽

    1. 前边弄完第二天，经理过来说，大佬再来个拖拽被，我心中那个美啊（.....反话大集合来了），美滋滋，搞起来吧，那就这样吧，那就这样吧 再爱都曲终人散了。我再贴

      /*
*	1. 先来获取图片的左右位置吧，毕竟要拖肯定得移动元素啊，记得要给元素定位哦
*	2. 来个对象记录一下开始的left top 和现在的left top吧
* 3. 鼠标按下和鼠标松开来记录位置吧
* 4. 那就开是移动吧
*/	

if (getCss(image, "left") !== "auto") {
   params.left = getCss(image, "left");
 }
if (getCss(image, "top") !== "auto") {
  params.top = getCss(image, "top");
}
var getCss = function(o,key){  // 获取元素样式 ，这个没毛病吧 很常见
  return o.currentStyle? o.currentStyle[key] : document.defaultView.getComputedStyle(o,false)[key];
};

var params = {
  zoomVal:1,
  left: 0,
  top: 0,
  currentX: 0,
  currentY: 0,
  flag: false
};


image.onmousedown = function (event) {  // 鼠标按下获取 当时的鼠标的相对位置吧
  params.flag = true;
  if (!event) {
    event = window.event;
    //防止IE文字选中
    bar.onselectstart = function () {
      return false;
    }
  }
  var e = event;
  params.currentX = e.clientX;
  params.currentY = e.clientY;
};

image.onmouseup = function (event) {
  params.flag = false;
  if (getCss(this, "left") !== "auto") {  // 获取图片的位置了吧
    params.left = getCss(this, "left");
  }
  if (getCss(this, "top") !== "auto") {
    params.top = getCss(this, "top");
  }
};


image.onmousemove = function (event) {  // 鼠标开始移动了啊
  if (params.flag) {
    var nowX = e.clientX, nowY = e.clientY;  // 现在鼠标的位置
    var disX = nowX - params.currentX, disY = nowY - params.currentY; // 移动的距离
    this.style.left = parseInt(params.left) + disX + "px";
    this.style.top = parseInt(params.top) + disY + "px";
    if (typeof callback == "function") {
      callback((parseInt(params.left) || 0) + disX, (parseInt(params.top) || 0) + disY);
    }
    if (event.preventDefault) {
      event.preventDefault();
    }
    return false;
  }
}

    2. 实现完毕，美滋滋！soeasy嘛，经理，我这个拖拽实现完了啊，上传，喝茶、葛优躺、抽根烟，回来了，经理：不能用这拖拽，写的什么玩意，我：小朋友你是不是有很多的❓❓❓，查看一番发现的 火狐这浏览是真的gou啊，拖拽居然是新开页面打开图片。整吧，这肯定得禁用默认事件啊，后来发现冒泡事件也得禁用，不知道什么鬼

    iamge.onmousedown =function(event){
  var e = event ? event : window.event;  // 加上
  if (e.preventDefault) e.preventDefault();
  else e.returnvalue = false;
  if(e.stopPropagation){
    e.stopPropagation();
  }else{
    e.cancelBubble = true;
  }
    // todo之前那些
}
image.onmouseup  =function (event){
   // 加上
  // todo之前那些
}
image.onmousemove = function (event) { 
  // 也加上吧
  // todo之前那些
}
avatar
文章
阅读
粉丝