Imperceptible another month past, this time reading in the morning and have a good harvest, sincerely recommend to build the foundation, for further study, now feel fruitful from books, going to use a few days (js redbook) read the book, after the comments must be share with everyone, Of course, if there is something wrong, please fire gently. I don’t want to say any more. It’s all in the wine. No, no, no, it’s all in the article. Today, I will change my previous learning style and share with you the troubles I have encountered in my work today.

  • Function requirements: for the picture after the zoom wheel zoom

    1. Let me enlarge the image first

      • BaguetteBox. Js plugin is a good choice, in line with normal functional requirements, strong recommendation!!

      • Nonsense also do not say, after all, a plug-in to see can use, paste their own code

        baguetteBox.run('.z3d_goods_img', {  Z3d_goods_img is the enlarged image element
  captions: function(element) {
    return element.getElementsByTagName('img') [0].alt; }});if (typeof oldIE === 'undefined' && Object.keys) {
  hljs.initHighlighting();
}
Copy the code

    2. The topic, ah, to achieve the wheel zoom, mouse wheel zoom method understand it? What don’t you know? One foot away, ha ha ha joke should send me away ah, come to slide onmousewheel, no problem

      • Hey, guys, I’m not done. Don’t yell at me. Code

         image.onmousewheel=function(event){
   var UpDown =  event.wheelDelta
   // Scroll up for wheels greater than 0, scroll down for wheels less than 0
   if(UpDown>0) {var maxScaleHeight = toPoint(this.style.maxHeight);  // I used percentages, so I rotated the decimal
     var maxScaleWidth = toPoint(this.style.maxWidth) ;
     this.style.maxHeight = toPercent(maxScaleHeight-0.1); // The percentage is a little low
     this.style.maxWidth = toPercent(maxScaleWidth-0.1);
     var scaleper = maxScaleWidth-0.1;
     this.style.transform = 'scale('+ scaleper+') '; // Continuously zooming, infinite zooming, also designed to tease why infinite zooming
   }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+') '; }};Copy the code

      • On the end of the code, Google browser test no problem, 360 no problem, sweet sweet of the brothers, Firefox (browser) dog brother does not agree with the whole sentence: I will not zoom, no way ah, change!!

        image.addEventListener('DOMMouseScroll'.function(event){
  var UpDown =  event.detail*40
  // Scroll up for wheels greater than 0, scroll down for wheels less than 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)
Copy the code

      • This can’t be two paragraphs, can it? , come on! show

        /* * 1. Merge event.detail and detail * 2. Compatibility with DOMMouseScroll and onMousewheel Write common methods */ 
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; }}Copy the code

  • Function requirements: drag the mouse after enlarging the picture

    1. The front end finish the second day, the manager come to say, big guy comes again drag drag be, that beauty in my heart (….. Big collection of irony come), elated, get up, that’s it, that’s it again love is over. I’ll stick

      /* * 1. Get the left/right position of the image first, after all, you have to move the element, remember to position the element * 2. Left top = left top = left top Mouse press and release to record position * 4. Then open or move */	

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){  // Get the element style
  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) {  // Press down to get the relative position of the mouse at that time
  params.flag = true;
  if(! event) { event =window.event;
    // Prevent IE text from being selected
    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") {  // Get the location of the image
    params.left = getCss(this."left");
  }
  if (getCss(this."top")! = ="auto") {
    params.top = getCss(this."top"); }}; image.onmousemove =function (event) {  // The mouse starts to move
  if (params.flag) {
    var nowX = e.clientX, nowY = e.clientY;  // The current mouse position
    var disX = nowX - params.currentX, disY = nowY - params.currentY; // The distance moved
    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; }}Copy the code

    2. Achieve the end, happy! Soeasy, manager, I finished this drag ah, upload, drink tea, Ge you lie down, smoke a cigarette, come back, manager: can’t use this drag, write what stuff, I: kid you don’t have a lot of ❓❓❓, check a found firefox this browse is true gou ah, drag is actually a new page open pictures. The default event must be disabled, and the bubble event must be disabled as well

    iamge.onmousedown =function(event){
  var e = event ? event : window.event;  / / add
  if (e.preventDefault) e.preventDefault();
  else e.returnvalue = false;
  if(e.stopPropagation){
    e.stopPropagation();
  }else{
    e.cancelBubble = true;
  }
    // Todo before those
}
image.onmouseup  =function (event){
   / / add
  // Todo before those
}
image.onmousemove = function (event) { 
  // Add it too
  // Todo before those
}
Copy the code