Scroll wheel scaling ------- day79

Today is the last day of March. I have to say that my plan for the remaining days of March is not finished, and my work is really tight, I have never been able to deal with the pace of life, work, and study. This is the biggest topic in my life, but it is also good. At least I am still sticking to it. In fact, I am more and more aware of my shortcomings, the high morale is a sign of getting deeper and deeper, and there is always a sound in the inner's mind to confuse yourself: Don't look at the deliberate things, who do it, in addition, the time of recording can be used to learn more things, but in the end, I am still confused: it can indeed free up more time, no one is willing to do anything, but, similarly, I don't need to go so fast, and as long as I know that I care about it, all I need is to go this step by step, just now.

I accidentally discovered the function of "scroll sliding operation image scaling" on the Internet. I did not think of its practical point in the actual process, however, if you still think it's cool, you can learn it and record it here:

Function introduction:

Place the mouse on the image, scroll up, the image continues to grow, scroll down, the image continues to decrease

Function disassembly analysis:

1. The first thing to pay attention to is to obtain the scroll wheel event listening, and to see whether the scroll wheel slides or slides;

2. Images increase or decrease as events occur;

Instance analysis:

In this way, we first place an image in HTML and set its style.

<style type="text/css">* { margin:0; padding:0; }body { width:100%; height:100%; overflow:auto; }#img { display:block; width:20%; margin:20px auto; cursor:-webkit-zoom-in; cursor:-moz-zoom-in; border:4px solid #ccc; border-radius:4px; }</style>

Adding a border to the image is to better observe the increase and decrease of the amplitude. Another classic point is the cursor. There should be many styles. A reasonable application will add a lot of points, then we can implement the function

window.onload = function(){var img = document.getElementById("img");if(img.addEventListener){//ie9,chrome,safari,operaimg.addEventListener("mousewheel",change,true);//firefoximg.addEventListener("DOMMouseScroll",change,false);}else{//ie 6/7/8img.attachEvent("onmousewheel",change);}

First Add listenerAs mentioned earlier in the record, on the one hand, the addeventlistener and attachevent methods in compatibility are different, and on the other hand, the parameters passed, which are relatively prone to problems.

1. First, the addeventlistener In the first parameter is a simple event name, such as mousewheel, while the first parameter in attachevent is an event, such as onmousewheel;

2. There are three parameters in addeventlistener, and the third is a Boolean value, which must be written. False indicates that the bubble function of browser events (from the inside out) is supported ), true indicates the browser event capture function (from the external to the internal). [This is not fully understood. What is the difference? Let's analyze it later]

3. Compatibility. At that time, the landlord was fully compatible with the five browsers, which made me a lot of money and money.

After the listener is implemented, we needMake different responsesThis should be written in our method change ().

Function Change (e) {var E = Window. event | E; var variable = math. max (-1, math. min (1, (E. wheeldelta |-e. detail); // wheeldelta and detailimg. style. width = math. max (50, math. min (800, IMG. width + (30 * Rows) + "PX"; return false ;}

In this method, the math. Max () and math. Min () methods are first learned, and then the logic and compatibility are achieved.

1. Multiple math. Max (A, B, C, D) parameters can be used to obtain the maximum values. Of course, Min is the minimum value;

2. E. wheeldelta |-e. detail, which is also a manifestation of compatibility. It seems that only detail is used in Firefox, and the others are wheeldelta. Both have the same meaning and have two values, however, if the two values are different, the detail value can only be +/-3, while the wheeldelta value can only be +/-120, but the same is an integer that indicates up, and the negative value indicates down;

3. Leave the rest logic empty. It is easy and clear to write.

It's not too early. I sent this article at the end of the month to welcome the brand new year August...