本文是承接 上一篇的 《自定義鼠標滾動事件》 的基礎上實現的，建議大家先看一下上一篇的mousewheel的實現，再瀏覽下文：
上篇中我們介紹到:
1 $element.mousewheel(function(dir){ 2 console.log(dir) ; 3 })
得到的結果為：鼠標滾輪 向上滾動 dir-->1, 向下滾動 dir-->-1
ok，有了這個結果 我們就可以做下邊的工作了...
to know what's I want...
目標: 滾動鼠標滾輪實現圖片合理的放大縮小，何為合理？即：不能讓圖片失真，至少比例要一致（成比例放大或縮小）
思路：有了dir這個屬性，讓圖片向上滾動時，成比例放大；向下滾動時，圖片成比例縮小；
也就是說 dir=1時，圖片的寬高在原有基礎上，保持比例一致的增大，dir=-1時，圖片的寬高在原有基礎上，保持比例一致的縮小。
（此時的你是不已經 有點靈感了呢 ：），貌似 這次重點不在如何判斷鼠標的滾動方向啦，而是，如何 *合理的 放大和縮小了啊...）
來吧，忍不住了 我要 coding....
1.HTML + CSS:先來寫個頁面
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title>SE - 點擊圖片放大 顯示 </title> 6 <style type="text/css"> 7 html,body,* { margin: 0; padding: 0; } 8 ul { list-style: none; } 9 li { float: left; margin-left:10px; } 10 ul li a { display: block; } 11 </style> 12 </head> 13 <body> 14 <ul id="picList"> 15 <li><a href="#"><img src="images/photo1.jpg"></a></li> 16 <li><a href="#"><img src="images/photo2.jpg"></a></li> 17 <li><a href="#"><img src="images/photo3.jpg"></a></li> 18 <li><a href="#"><img src="images/photo4.jpg"></a></li> 19 </ul> 20 </body> 21 </html>
效果：
2.實現點擊圖片，彈出模態框，含有要放大的圖片 （本人用的jquery實現），代碼如下
HTML部分: 新加一個代表模態框的 div
<div id="modal" class="modal"> <img src="" /> </div>
style部分: 對模態框進行設置，圖片的上下居中，左右居中（ *這段代碼很重要 ）
1 .modal { 2 display: none; 3 position: absolute; 4 top: 0; 5 left: 0; 6 z-index: 999; 7 width: 100%; 8 height: 100%; 9 background-color: #000000; 10 -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=90); 11 filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=90); 12 background-color: rgba(0,0,0,0.8); 13 text-align: center; 14 } 15 .modal:before { 16 content: ''; 17 display: inline-block; 18 height: 100%; 19 vertical-align: middle; 20 margin-right: -0.25em; /* Adjusts for spacing */ 21 } 22 .modal img { 23 display: inline-block; 24 vertical-align: middle; 25 border: 6px solid white; 26 border-radius: 5px; 27 }
script部分：引入jquery, 實現彈出模態框，並且點擊模態框，模態框消失
1 <script type="text/javascript" src="../js/jquery-1.10.2.min.js"></script> 2 <script type="text/javascript"> 3 $(function(){ 4 var smImgA = $('#picList li a'), //small image 5 md = $('.modal'); //遮罩層 6 7 //small images been clicked 8 smImgA.on('click',function(e){ 9 e.preventDefault(); 10 e.stopPropagation(); 11 //load the big image 12 md.empty(); 13 $('<img src="" />').appendTo(md); 14 var bgImg = $('.modal img'); //遮罩層內的 image 15 var bgImgSrc = ''; //big image src 16 bgImgSrc = $(this).find('img').attr('src').split('.')[0] + 'big.jpg'; //get the src 17 bgImg.attr('src',bgImgSrc); 18 //show the model 19 md.show(200, bgImgShow); 20 //method show() callback function 21 function bgImgShow(e){ 22 //do something。。。。。。 23 alert("顯示模態框后，都something。。。"); 24 }; 25 }); 26 27 //.modal been click 28 md.on('click',function(e){ //點擊模態框，它隱藏 29 $(this).hide(300); 30 }); 31 }); 32 </script>
效果：
3.重點來了，目的：當鼠標在模態框中的圖片上 滾動滾輪的時候，圖片合理放大（ 我的理解：成比例放大，不能溢出屏幕 ）
script部分：上一節自制的鼠標滾動事件，得到應用啦
第1步：引入擴展
1 $.fn.extend({ 2 mousewheel: function( fn ){ 3 //judge the brower's mousewheel event, bind the event to element 4 var toBind = ( 'onwheel' in document || document.documentMode >= 9 ) ? 5 ['wheel'] : ['mousewheel', 'DomMouseScroll', 'MozMousePixelScroll']; 6 var el = this[0]; //this[0]; jquery對象 轉 JS對象(因addEventListener是JS對象的監聽事件) 7 if( el.addEventListener ){ 8 for( var i = toBind.length; i; ){ 9 el.addEventListener(toBind[--i],handleFun,false); 10 } 11 } 12 else { 13 el.onmousewheel = handleFun; 14 } 15 16 //deal with the mousewheel 17 function handleFun(e){ 18 var driect = 0, delta=0; //driect:滾動方向 delta:各瀏覽器監聽滾動事件的屬性值 19 var e = e || window.event; 20 if ( e.wheelDelta ){ delta = e.wheelDelta } 21 else if ( e.deltaY ){ delta = e.deltaY * -1 } 22 else if( e.wheelDeltaY ) { delta = e.wheelDeltaY } 23 else { 24 console.log('get delta,have somethings wrong...'); 25 } 26 delta==0 ? console.log('get delta,have somethings wrong...') : 27 delta>0 ? driect=1 : driect=-1; 28 29 typeof fn==='function' ? fn( $(el) ,driect ) : ''; 30 } 31 } 32 33 });
第2步：實現圖片 放大 和 縮小；因為圖片的縮放只有在模態框顯示后才可以發生，所以我把這一步驟放到了 show()事件的回調函數里，也以便獲得圖片的真實寬高。我的想法：圖片newWidth = realWidth + realWidth*(1+dir*0.1), 也許你已經看出來了，這就是 因為dir=(+1或-1)，所以，圖片的新寬度 = 真實寬度 + （放大或縮小的寬度），對就這么簡單的思路，ok，開干
1 //method show() callback function 2 function bgImgShow(e){ 3 var realWidth = bgImg.width(), realHeight = bgImg.height();//圖片真實寬高 4 //mousewheel diy 5 var imgSize=1; 6 bgImg.mousewheel(function( $this,dir ){ 7 imgSize = imgSize + dir*0.1; 8 var newW = realWidth * imgSize, newH = realHeight * imgSize; 9 $this.width( newW ); 10 $this.height( newH ); 11 }); 12 };
ok,已實現 圖片的放大縮小的功能，但是此時的功能是有瑕疵的，就是圖片可以無限放大和縮小，做原理講述還是可以的，但是，這並不符合場景的應用，所以有了第3步的合理化。
第3步：實現圖片放大和縮小的和合理化（即,對圖片的可 成比例放大和縮小 的范圍做限制）。
look at my code.....
1 function bgImgShow(e){ 2 var winW = $(window).width(), winH = $(window).height(); //window的寬高 3 var limW = 0.9 * winW, limH = 0.9 * winH; //可允許圖片顯示最大寬高 4 var realWidth = bgImg.width(), realHeight = bgImg.height();//圖片真實寬高 5 var rdW = limW / realWidth, rdH = limH / realHeight; //得到圖片寬高與limit寬高比 6 //mousewheel diy 7 var imgSize=1, minSize=0.2, maxSize= rdW>rdH ? rdH : rdW; 8 bgImg.mousewheel(function( $this,dir ){ 9 console.log( dir ); 10 imgSize = imgSize + dir*0.1; 11 imgSize<minSize ? imgSize=minSize : ''; 12 imgSize>maxSize ? imgSize=maxSize : ''; 13 var newW = realWidth * imgSize, newH = realHeight * imgSize; 14 $this.width( newW ); 15 $this.height( newH ); 16 }); 17 };
測試：
結果：圖片可以合理的放大和縮小，達成目標。
大功告成！！ 此時呢，如果你已看過上一篇的 《自定義鼠標滾動事件》，再加上 這篇的 一個圖片放大縮小的Demo，再加上一點點你的創造力，應該可以做出一個不錯的關於鼠標滾動的應用啦。哈吼....
上完整代碼，結束本文，有問題的話，歡迎大家留言討論：
1 <!DOCTYPE html>
2 <html>
3 <head lang="en">
4 <meta charset="UTF-8">
5 <title>SE - 點擊圖片放大 顯示 </title>
6 <style type="text/css">
7 html,body,* { margin: 0; padding: 0; }
8 ul { list-style: none; }
9 li { float: left; margin-left:10px; }
10 ul li a { display: block; }
11
12 .modal {
13 display: none;
14 position: absolute;
15 top: 0;
16 left: 0;
17 z-index: 999;
18 width: 100%;
19 height: 100%;
20 background-color: #000000;
21 -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=90);
22 filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=90);
23 background-color: rgba(0,0,0,0.8);
24 text-align: center;
25 }
26 .modal:before {
27 content: '';
28 display: inline-block;
29 height: 100%;
30 vertical-align: middle;
31 margin-right: -0.25em; /* Adjusts for spacing */
32 }
33 .modal img {
34 display: inline-block;
35 vertical-align: middle;
36 border: 6px solid white;
37 border-radius: 5px;
38 }
39
40 </style>
41 <script type="text/javascript" src="../js/jquery-1.10.2.min.js"></script>
42 <script type="text/javascript">
43 $.fn.extend({
44 mousewheel: function( fn ){
45 //judge the brower's mousewheel event, bind the event to element
46 var toBind = ( 'onwheel' in document || document.documentMode >= 9 ) ?
47 ['wheel'] : ['mousewheel', 'DomMouseScroll', 'MozMousePixelScroll'];
48 var el = this[0]; //this[0]; jquery對象 轉 JS對象(因addEventListener是JS對象的監聽事件)
49 if( el.addEventListener ){
50 for( var i = toBind.length; i; ){
51 el.addEventListener(toBind[--i],handleFun,false);
52 }
53 }
54 else {
55 el.onmousewheel = handleFun;
56 }
57
58 //deal with the mousewheel
59 function handleFun(e){
60 var driect = 0, delta=0; //driect:滾動方向 delta:各瀏覽器監聽滾動事件的屬性值
61 var e = e || window.event;
62 if ( e.wheelDelta ){ delta = e.wheelDelta }
63 else if ( e.deltaY ){ delta = e.deltaY * -1 }
64 else if( e.wheelDeltaY ) { delta = e.wheelDeltaY }
65 else {
66 console.log('get delta,have somethings wrong...');
67 }
68 delta==0 ? console.log('get delta,have somethings wrong...') :
69 delta>0 ? driect=1 : driect=-1;
70
71 typeof fn==='function' ? fn( $(el) ,driect ) : '';
72 }
73 }
74
75 });
76
77 $(function(){
78 var smImgA = $('#picList li a'), //small image
79 md = $('.modal'); //遮罩層
80
81 //small images been clicked
82 smImgA.on('click',function(e){
83 e.preventDefault();
84 e.stopPropagation();
85 //load the big image
86 md.empty();
87 $('<img src="" />').appendTo(md);
88 var bgImg = $('.modal img'); //遮罩層內的 image
89 var bgImgSrc = ''; //big image src
90 bgImgSrc = $(this).find('img').attr('src').split('.')[0] + 'big.jpg'; //get the src
91 bgImg.attr('src',bgImgSrc);
92 //show the model
93 md.show(200, bgImgShow);
94 //method show() callback function
95 function bgImgShow(e){
96 var winW = $(window).width(), winH = $(window).height(); //window的寬高
97 var limW = 0.9 * winW, limH = 0.9 * winH; //可允許圖片顯示最大寬高
98 var realWidth = bgImg.width(), realHeight = bgImg.height();//圖片真實寬高
99 var rdW = limW / realWidth, rdH = limH / realHeight; //得到圖片寬高與limit寬高比
100 //mousewheel diy
101 var imgSize=1, minSize=0.2, maxSize= rdW>rdH ? rdH : rdW;
102 bgImg.mousewheel(function( $this,dir ){
103 console.log( dir );
104 imgSize = imgSize + dir*0.1;
105 imgSize<minSize ? imgSize=minSize : '';
106 imgSize>maxSize ? imgSize=maxSize : '';
107 var newW = realWidth * imgSize, newH = realHeight * imgSize;
108 $this.width( newW );
109 $this.height( newH );
110 });
111 };
112 });
113
114 //.modal been click
115 md.on('click',function(e){
116 $(this).hide(300);
117 });
118 });
119 </script>
120
121
122 </head>
123 <body>
124 <ul id="picList">
125 <li><a href="#"><img src="images/photo1.jpg"></a></li>
126 <li><a href="#"><img src="images/photo2.jpg"></a></li>
127 <li><a href="#"><img src="images/photo3.jpg"></a></li>
128 <li><a href="#"><img src="images/photo4.jpg"></a></li>
129 </ul>
130
131 <div id="modal" class="modal"> <img src="" /> </div>
132 </body>
133 </html>
勤能補拙是良訓，一分辛苦一分甜。