网页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图片预览滑动
