jQuery实现朋友圈查看图片

2023-07-16 20:19:04 369

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+10){
index--;
offsetSlider(index);
preload(index-1);
calcPages(items,index);
}
else{
//Triggerthespringanimation
slider.addClass('leftSpring');
setTimeout(function(){
slider.removeClass('leftSpring');
},500);
}
}
};
})(jQuery);

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

jQuery实现朋友圈查看图片

热门推荐

随机推荐