jQuery实现朋友圈查看图片
jQuery实现朋友圈查看图片效果,供大家参考,具体内容如下
效果:图片点击显示大图,多张图可以滑动,左右按钮点击可切换查看图片(左右点击切换效果不需要删除样式即可)
index.html文件
jQuery模仿朋友圈查看图片效果
touchTouch.css文件
预加载loading动图preloader.gif
左右切换按钮图片arrows.png(不需要可删除)
#galleryOverlay{ width:100%; height:100%; position:fixed; top:0; left:0; opacity:0; z-index:100000; background-color:#222; background-color:rgba(0,0,0,1); overflow:hidden; display:none; -moz-transition:opacity1sease; -webkit-transition:opacity1sease; transition:opacity1sease; } #galleryOverlay.visible{ opacity:1; } #gallerySlider{ height:100%; left:0; top:0; width:100%; white-space:nowrap; position:absolute; -moz-transition:left0.4sease; -webkit-transition:left0.4sease; transition:left0.4sease; } #gallerySlider.placeholder{ /*preloader.gif预加载loading动图*/ background:url("preloader.gif")no-repeatcentercenter; height:100%; line-height:1px; text-align:center; width:100%; display:inline-block; } #gallerySlider.placeholder:before{ content:""; display:inline-block; height:50%; width:1px; margin-right:-1px; } #gallerySlider.placeholderimg{ display:inline-block; max-height:100%; max-width:100%; vertical-align:middle; } #gallerySlider.rightSpring{ -moz-animation:rightSpring0.3s; -webkit-animation:rightSpring0.3s; } #gallerySlider.leftSpring{ -moz-animation:leftSpring0.3s; -webkit-animation:leftSpring0.3s; } /*FirefoxKeyframeAnimations*/ @-moz-keyframesrightSpring{ 0%{ margin-left:0px; } 50%{ margin-left:-30px; } 100%{ margin-left:0px; } } @-moz-keyframesleftSpring{ 0%{ margin-left:0px; } 50%{ margin-left:30px; } 100%{ margin-left:0px; } } /*SafariandChromeKeyframeAnimations*/ @-webkit-keyframesrightSpring{ 0%{ margin-left:0px; } 50%{ margin-left:-30px; } 100%{ margin-left:0px; } } @-webkit-keyframesleftSpring{ 0%{ margin-left:0px; } 50%{ margin-left:30px; } 100%{ margin-left:0px; } } /*左右切换按钮*/ /*arrows.png左右切换按钮图片不需要可删除*/ #prevArrow,#nextArrow{ border:none; text-decoration:none; background:url('arrows.png')no-repeat; opacity:1; cursor:pointer; position:absolute; width:43px; height:58px; top:50%; margin-top:-29px; -moz-transition:opacity0.2sease; -webkit-transition:opacity0.2sease; transition:opacity0.2sease; } #prevArrow:hover,#nextArrow:hover{ opacity:1; } #prevArrow{ background-position:lefttop; left:40px; } #nextArrow{ background-position:righttop; right:40px; } /*页码*/ #pagelimit{ position:absolute; bottom:20px; left:50%; margin-left:-18px; color:#fff; font-size:1.4rem; }
touchTouch.jquery.js文件
(function(){ /*Privatevariables*/ varoverlay=$(''), slider=$(' '), prevArrow=$(' '), nextArrow=$(' '), pageSpan=$(' ')); }); //Hidethegalleryifthebackgroundistouched/clicked slider.append(placeholders).on('click',function(e){ hideOverlay(); }); //Listenfortoucheventsonthebodyandcheckifthey //originatedin#gallerySliderimg-theimagesintheslider. $('body').on('touchstart','#gallerySliderimg',function(e){ vartouch=e.originalEvent, startX=touch.changedTouches[0].pageX; slider.on('touchmove',function(e){ e.preventDefault(); touch=e.originalEvent.touches[0]||e.originalEvent.changedTouches[0]; if(touch.pageX-startX>10){ slider.off('touchmove'); showPrevious(); } elseif(touch.pageX-startX<-10){ slider.off('touchmove'); showNext(); } }); //Returnfalsetopreventimage //highlightingonAndroid returnfalse; }).on('touchend',function(){ slider.off('touchmove'); }); //Listeningforclicksonthethumbnails //评论事件 items.on('click',function(e){ e.preventDefault(); //Findthepositionofthisimage //inthecollection index=items.index(this); showOverlay(index); showImage(index); calcPages(items,index); //Preloadthenextimage preload(index+1); //Preloadtheprevious preload(index-1); $(document).data("overlayVisible",true); e.cancelBubble=true;//取消冒泡事件 //e.stopPropagation(); }); functioncalcPages(items,index){ pageSpan.text((index+1)+"/"+items.length); } //Ifthebrowserdoesnothavesupport //fortouch,displaythearrows if(!("ontouchstart"inwindow)){ overlay.append(prevArrow).append(nextArrow); prevArrow.click(function(e){ e.preventDefault(); showPrevious(); }); nextArrow.click(function(e){ e.preventDefault(); showNext(); }); } //Listenforarrowkeys $(window).bind('keydown',function(e){ if(e.keyCode==37){ showPrevious(); } elseif(e.keyCode==39){ showNext(); } }); /*Privatefunctions*/ functionshowOverlay(index){ //Iftheoverlayisalreadyshown,exit if(overlayVisible){ returnfalse; } //Showtheoverlay overlay.show(); setTimeout(function(){ //TriggertheopacityCSStransition overlay.addClass('visible'); },100); //Movetheslidertothecorrectimage offsetSlider(index); //Raisethevisibleflag overlayVisible=true; } functionhideOverlay(){ //Iftheoverlayisnotshown,exit if(!overlayVisible){ returnfalse; } //Hidetheoverlay overlay.hide().removeClass('visible'); overlayVisible=false; $(document).data("overlayVisible",overlayVisible); } functionoffsetSlider(index){ //Thiswilltriggerasmoothcsstransition slider.css('left',(-index*100)+'%'); } //Preloadanimagebyitsindexintheitemsarray functionpreload(index){ setTimeout(function(){ showImage(index); },1000); } //Showimageintheslider functionshowImage(index){ //Iftheindexisoutsidethebondsofthearray if(index<0||index>=items.length){ returnfalse; } //Calltheloadfunctionwiththehrefattributeoftheitem loadImage(items.eq(index).attr('href'),function(){ placeholders.eq(index).html(this); }); } //Loadtheimageandexecuteacallbackfunction. //ReturnsajQueryobject functionloadImage(src,callback){ varimg=$('').on('load',function(){ callback.call(img); }); img.attr('src',src); } functionshowNext(){ //Ifthisisnotthelastimage if(index+1 0){ index--; offsetSlider(index); preload(index-1); calcPages(items,index); } else{ //Triggerthespringanimation slider.addClass('leftSpring'); setTimeout(function(){ slider.removeClass('leftSpring'); },500); } } }; })(jQuery);
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。
声明:本文内容来源于网络,版权归原作者所有,内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:czq8825#qq.com(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。