1. <p id="ijjhg"></p>
      <acronym id="ijjhg"></acronym>

    2. <p id="ijjhg"></p>
      <table id="ijjhg"><ruby id="ijjhg"><mark id="ijjhg"></mark></ruby></table>
      0712-2888027 189-8648-0214
      微信公眾號

      孝感風信網絡科技有限公司微信公眾號

      當前位置:主頁 > 技術支持 > Javascript/JQuery > lightbox添加鼠標滾輪縮放大小并支持Base64圖片

      lightbox添加鼠標滾輪縮放大小并支持Base64圖片

      時間:2024-06-04來源:風信官網 點擊: 773次
      LightBox2則是在眾多產品中比較優秀的一款Jquery插件。配置就不細說了,今天我主要要分享的是:如何在點開大圖后,可以通過鼠標滾輪來縮放圖片,

      1、修改Lightbox源碼使支持滾輪縮放

      支持鼠標滾輪主要就是把彈出后的框整個綁定上mousewheel事件,打開lightbox.js,找到Lightbox.prototype.build = function() {...}這一段,可以在這里(lightbox初始化的時候)把想要的滾輪事件綁定上去,比如在函數的末尾添加如下代碼:

       // 圖片滾輪縮放
             this.img = this.$container.find('.lb-image');
             this.label = this.$lightbox.find('.lb-dataContainer');
             $([this.$overlay[0],this.$lightbox[0]]).bind("mousewheel", function(e){
                 var flag= e.originalEvent.wheelDelta < 0;
                 var imgH = self.img.height();
                 var imgW = self.img.width();
                 var nw = Math.round(20*imgW/imgH);
                 var ctH = self.$outerContainer.height();
                 var ctW = self.$outerContainer.width();
                 var layH = self.$overlay.height()-20;
                 var layW = self.$overlay.width()-20;
                 // 向下
                 if(flag && imgH>20 && imgW>20) {
                     self.img.css('height', imgH - 20);
                     self.img.css('width', imgW - nw);
                     self.$outerContainer.css('height', ctH - 20);
                     self.$outerContainer.css('width', ctW - nw);
                     if(ctW-nw > 240){
                         self.label.css('width', ctW - nw);
                     }
                 } else if(!flag && imgH<layH && imgW<layW) {
                     self.img.css('height', imgH + 20);
                     self.img.css('width', imgW + nw);
                     self.$outerContainer.css('height', ctH + 20);
                     self.$outerContainer.css('width', ctW + nw);
                     self.label.css('width', ctW + nw);
                 }
                 e.stopPropagation();
                 return false;
             });

      代碼比較好理解,就是給后面背景和前面圖片都添加鼠標滾輪監聽,然后高、寬成比例地縮放(向上滾放大、向下滾縮?。?,我是設定每次高度變化為20個像素,然后寬度是成比例變化。需要注意的地方,應該是在圖片的最小縮小大小,和圖片放大不能超過屏幕范圍的限制。同時,為了更好的體驗,一定要加上e.stopPropagation(),且返回false,讓瀏覽器不要滾動。

      2、修改Lightbox源碼使支持Base64圖片

      這里說起來可能比較麻煩,先來看一下在使用原生Lightbox時的html代碼格式要求:

      <a href="img/image.jpg" data-lightbox="test">Image #1</a>

       這是一個最簡單的彈出圖,當點擊Image #1時,就會彈出一個lightbox顯示img/image.jpg的內容(彈出一個元素<img src="img/image.jpg" />)。
          現在我們來考慮這種情況,如果圖片是以Base64編碼在服務器是存放在數據庫中的?應該就是這樣:

      <a href="data:image/png;base64,iVBORw..." data-lightbox="test">Image #1</a>

      問題來了,href長度在IE下是有限制的,一張大的圖片,不可能放在href字段中,圖片將會被閹割(只顯示上半部分)。
          另外還有一種普遍情況,如果我是先顯示小圖,點擊小圖看大圖,應該就是這樣:

      <a href="data:image/png;base64,iVBORw..." data-lightbox="test">
          <img src="data:image/png;base64,iVBORw..." />
      </a>

      好了,這有兩份重復的base64數據,而且都是從服務器端傳過來的,耗時耗帶寬啊。
          所以我按我的需求進行了改造,代碼很簡單,修改Lightbox.prototype.start = function($link) {...} 中的子函數addToAlbum:

       function addToAlbum($link) {
              self.album.push({
                // link: $link.attr('href'),
                link: $link.children().attr("src"),
                title: $link.attr('data-title') || $link.attr('title')
              });
          }

      注釋掉的部分就是原來的,$link是前面HTML代碼中的a標簽,改過后addToAlbum函數的作用是:在設置彈出圖片的src時,不再從原始的的href中取字符作為彈出img標簽的src,而是直接從a標簽的子元素中找src屬性,由于src屬性的長度無限制,所以它不會存在圖片截斷的問題。

      3、將Lightbox應用到已有的文章

          第2節已經講到了Lightbox使用時HTML有一定的格式,如果已有的文章中的圖片是<img src="img/image.jpg">這樣的,則必須對其進行一層封裝:

       function initLightbox(){
           var imgs = $(".lightbox-container").find('img');
           $.each(imgs,function(i) {
               var img = $(imgs[i]);
               img.wrap("<a href='' data-lightbox='test' ></a>");       
           });
       }

      其中,“lightbox-container”是文章所在容器的class。initLightbox函數應放置在頁面加載ready時,它會把文章中的所有img標簽都封裝成為lightbox的格式。

      本文就寫到這了,第2、3點大家可以看自己的使用場景去使用,lightbox改動的重點在于支持滾輪縮放。
      欄目列表
      推薦內容
      熱點內容
      展開
      中文字幕第二页在线天堂中文_中文字幕制服丝袜在线观看_美女胸禁止18以下看免费国产_中日韩人妻一级毛片