網頁H5圖片預覽滑動模仿新浪微博插件

首先看使用方法:

    //注意一定要頁面加載完成后再調用
      $(function(){
                //調用方式
                $("#picList").createImgWin();
    })

插件內容介紹:

1.前台html元素格式:

<div id="picList">
                       //要預覽的圖片
            <img src="img/834.jpg" />
            <img src="img/timg.jpg" />
            <img src="img/cbd.jpg" />
            <img src="img/shuijiao.jpg" />
</div>

 

2.調用方法封裝

    //給jquery添加調用函數 主要是為了滿足用戶對Jquery書寫習慣
      $.fn.extend({
                createImgWin:function(){
                    var ImgWin=new scrollWin(this);
                }
                
         })

3.對象構造函數封裝:

為了使圖片加載一次之后不用重新加載 加入已加載完成的的圖片的索引

                    //類對象
    var scrollWin=function(target){
            this.picList=$(target).find("img");
            var that=this;
            //創建背景層
            function createBackPopup(){
                    var height = $(window).height()
                    //<!---黑色背景------->
                    var divBack = $(".container");
                    if(divBack.length < 1) {
                        divBack = $("<div></div>");
                        divBack.attr("class", "container");
                        divBack.width("100%");
                        divBack.css("position", "absolute").css("top", "0").css("z-index", "10").css("background-color", "black").css("width","100%")
                        divBack.height(height);                        
                        divBack.css("display", "none");
                        var tip=$("<div style='width:100%;margin-top:10px'></div>")
                        var topTip=$("<div class='topTip' style='background-color:#434343;color:#fff;text-align: center;' ></div>")
                        var picNumber=that.picList.length;
                        topTip.text("0/"+picNumber);
                        topTip.height(20)
                        topTip.width(40)
                        topTip.css("border-radius","10px").css("margin","5px auto")
                        tip.append(topTip)

                        divBack.append(tip)
                        var imgDiv = $("<div class='imgDiv' style='display: flex;justify-content: flex-start;width:100%;'></div>");
                        divBack.append(imgDiv);
                        $("body").append(divBack);
                    }
                    return divBack;
            }
            this.backPopup=createBackPopup();
                
            //緩存的圖片索引
            this.picIndex=[];
            //綁定點擊事件
            this.bindClick(this.picList);
            //綁定滑動事件
            that.bindMove();
            }

4. prototype函數封裝:

scrollWin.prototype={
                //點擊事件
                bindClick:function(list){
                    var that=this;
                    $.each(list, function(index, item) {
                    //點擊事件
                    $(item).on("click", function() {
                        
                        var src = $(this).attr("src")
                        //創建圖片層
                        that.createImgPopup(src,index);
                    })
                  });
                  
                },
                //滑動事件
                bindMove:function(){
                    //綁定滑動事件
                    var startX,startY, that=this;
                    //開始觸摸
                    this.backPopup.on("touchstart", function(e) {
                        e.preventDefault();
                        startX = e.originalEvent.changedTouches[0].pageX, startY = e.originalEvent.changedTouches[0].pageY;
                    });
                    //滑動結束
                    this.backPopup.on("touchend", function(e) {
                     
                        e.preventDefault();
                        var moveEndX,X,index,picNumber;
                        moveEndX = e.originalEvent.changedTouches[0].pageX, 
                        index=$(".imgDiv").find("img[class=current]").attr("index");
                        index=parseInt(index);
                        if(isNaN(index))
                        return;
                        X = moveEndX - startX;
                        picNumber=that.picList.length;
                        //滑動事件判斷
                        if(X > 0) {
                            //索引加1 right to left
                             index--;
                             if(index<1)
                              index=picNumber
                             $(".topTip").text(index+"/"+picNumber); 
                              //判斷之前是否已經加載該圖片
                             var nextimg= $(".imgDiv").find("img[index="+index+"]")
                             if(!that.isInArray(that.picIndex,index)){
                                 var imgEle=that.picList[index-1]
                                 //獲取下一張圖片的路徑
                                 var src= $(imgEle).attr("src")
                                  nextimg =new Image(); //創建一個Image對象，實現圖片的預下載     
                                  nextimg.src = src;  
                                // nextimg = $("<img index="+index+" />")
                                  $(nextimg).attr("index", index);
                                  //當前標識
                                  $(nextimg).attr("class", "current");
                                 that.picIndex.push(index); 
                                  
                                 nextimg.onload=function(){
                                     
                                     //之前的圖片隱藏
                                    that.hiddenImg(index)
                                         //添加元素
                                    $(".imgDiv").append(nextimg) 
                                   //元素調整
                                     that.resizeImg($(nextimg));
                                  }
                            }//已經存在
                             else{
                                 
                                 //之前的圖片隱藏
                                  that.hiddenImg(index)
                                   nextimg.css("display","block")
                                   nextimg.attr("class", "current");
                             }
                              
                        } else if(X < 0) {
                            //索引加1 right to left
                              index++;
                             if(index>picNumber)
                              index=1;
                            
                             $(".topTip").text(index+"/"+picNumber); 
                             //判斷之前是否已經加載該圖片
                             var nextimg= $(".imgDiv").find("img[index="+index+"]")
                             if(!that.isInArray(that.picIndex,index)){
                                 
                                 var imgEle=that.picList[index-1]
                                 //獲取下一張圖片的路徑
                                 var src= $(imgEle).attr("src")
                                  nextimg =new Image(); //創建一個Image對象，實現圖片的預下載     
                                  nextimg.src = src;  
                                // nextimg = $("<img index="+index+" />")
                                  $(nextimg).attr("index", index);
                                  //當前標識
                                  $(nextimg).attr("class", "current");
                                 that.picIndex.push(index); 
                                 
                                 nextimg.onload=function(){
                                     
                                     //之前的圖片隱藏
                                     that.hiddenImg(index)
                                         //添加元素
                                    $(".imgDiv").append(nextimg) 
                                   //元素調整
                                     that.resizeImg($(nextimg));
                                  }
                             }
                             //已經存在
                             else{
                                 //之前的圖片隱藏
                                  that.hiddenImg()
                                   nextimg.css("display","block")
                                   nextimg.attr("class", "current");
                             }
                            
                        }else{
                            that.hiddenPop()
                        }
                    
                    });
                 },
                 //工具方法 判斷是否已經存在在索引列表中
                isInArray:function(arr,value){
                    for(var i = 0; i < arr.length; i++){
                        if(value === arr[i]){
                            return true;
                        }
                    }
                    return false;
                 },
                 //隱藏指定圖片
                hiddenImg:function(index){
                   //圖片隱藏
                    var otherimg= $(".imgDiv img[index!="+index+"]")
                     $.each(otherimg, function(index ,item) {
                                      $(item).css("display","none")
                                      $(item).attr("class", "other");
                    });
               },
                //創建圖片元素 
                createImgPopup:function(src,index){
                    var that=this;
                    var height = $(window).height()
                    var divBack= $(".container")
                    divBack.css("display", "block")
                    //索引
                    var picNumber=that.picList.length;
                  
                    index=index+1;
                    //頂部編號
                    $(".topTip").text(index+"/"+picNumber);
                    //判斷是否已經有該元素
                    if(!that.isInArray(that.picIndex,index)){
                        //<!----圖片層----->
                        var img = $("<img index="+index+" />")
                        img.attr("src", src);
                        img.attr("class", "current");
                        
                        that.picIndex.push(index); 
                        img[0].onload=function(){
                            //添加元素
                            $(".imgDiv").append(img)
                            that.hiddenImg(index)
                            //元素調整
                            that.resizeImg(img);
                         }
                    }
                    //如果已經存在
                    else{
                        that.hiddenImg(index);
                       //只顯示該元素
                        var curimg= $(".imgDiv").find("img[index="+index+"]")
                        $(curimg).css("display","block")
                         $(curimg).attr("class", "current");
                        
                    }
                    
                },
                //隱藏整個框架
                hiddenPop:function(){
                       this.backPopup.css("display", "none")
                },
                //圖片大小位置按比例調整
                resizeImg:function(img){
                    var height = $(window).height()
                    
                    var rate = img.height() / img.width();
                    var imgH, imgW;
            
                    
                    if(img.width() > $(window).width()) {
                        imgW = $(window).width();
                    } else {
                        imgW = img.width()
                    }
                    imgH = imgW * rate;
                    if(imgH>height-20){
                        imgH=height-20;
                        imgW=imgH/rate;
                        if(imgW> $(window).width())
                            imgW= $(window).width()
                    }
                    img.height(imgH)
                    img.width(imgW)
                    //垂直居中
                    img.css("margin-top", (height-40- imgH) / 2)
                    
                }
            }
            

5.效果預覽

//

github地址:h5圖片預覽滑動