鼠標滾輪實現圖片的縮放-------Day79
今天是7月的最後一天了，不得不說，我定下的七月份剩余幾天的計劃是完不成了。一則工作確實緊了些，再則沒能處理好生活、工作和學習的節奏。這才是人生最大的課題吧。只是也還好。至少自己還在堅持著。事實上真的越來越感覺到自己的不足。可昂揚的鬥誌卻是越來越低沈的跡象，內心裏總有個聲音在蠱惑自己：別整那些刻意的東西，做給誰看啊，並且刻意的記錄的時間全然能夠拿來學很多其它的東西，可終於我還在這個蠱惑前堅持著：確實能夠騰出很多其它的時間來，也沒人會在意在做什麽，但是。相同，我不須要走那麽快。並且僅僅要知道自己在意就好了。我須要的就是這樣一步一步走下去。這條路，才剛剛開始。
“滾輪滑動操作圖片縮放”這個功能是我在網上無意中發現的，實際在想的過程中沒有想到它的有用點在哪，只是還認為蠻酷的就學習了下。這裏也來記錄下：
功能介紹：
將鼠標放在圖片上。滾輪向上滑動，則圖片不斷變大。滾輪向下滑動，則圖片不斷減小
功能拆解分析：
1、第一個要關註的。就是獲取滾輪事件的監聽，可以獲取到滾輪是在上滑還是下滑；
2、隨著事件發生的不同。圖片不斷添加或者降低。
實例分析：
<img id="img" src="run.gif" alt="跑" />這樣我們先在html中放置一個圖片，並對它進行樣式上的設置
<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>window.onload = function(){
var img = document.getElementById("img");
if(img.addEventListener){
//ie9,chrome,safari,opera
img.addEventListener("mousewheel",change,true);
//firefox
img.addEventListener("DOMMouseScroll",change,false);
}
else{
//ie 6/7/8
img.attachEvent("onmousewheel",change);
}1、首先在第一個參數中addEventListener中是單純的事件名稱，像mousewheel。而attachEvent中的第一個參數則是事件,像onmousewheel；
2、addEventListener中存在三個參數，第三個是個boolean值，並且必須寫，false表示支持瀏覽器事件的冒泡功能（由裏向外），true則表示瀏覽器事件的捕獲功能（由外向裏）【這個地方還沒有理解透，啥不同呢，回頭再分析吧】
3、兼容性，當時的樓主非常全面的兼容了五大瀏覽器，讓我這後來人占了好大廉價，賺到了
監聽實現了之後，我們就要依據不同的事件作出不同的回應，這個就該寫在我們的方法change()中了
function change(e){
var e = window.event||e;
var oper = Math.max(-1, Math.min(1,(e.wheelDelta || -e.detail)));//wheelDelta和detail
img.style.width = Math.max(50, Math.min(800,img.width + (30*oper)))+"px";
return false;
}這種方法中。首先學到的是Math.max()和Math.min()兩個方法,然後就是邏輯和兼容了
1、Math.max(a,b,c,d)參數能夠取多個，取若幹值中最大值，當然min就是相應的取最小值嘛。
2、e.wheelDelta||-e.detail,這個又是兼容性的表現了，貌似僅僅有Firefox中使用detail，其它的都是wheelDelta，兩者的意義都一樣的。都有兩個值，可是兩個值是不同的detail僅僅能取+/- 3，而wheelDelta則僅僅能取+/- 120，但相同的是整數表示向上，負數表示向下。
3、剩余的邏輯就不說了，已經寫的非常easy明了了
時間又不早了，趕在月末發了這篇吧，準備迎接嶄新的八月...
鼠標滾輪實現圖片的縮放-------Day79