jQuery实现朋友圈查看图片

jQuery实现朋友圈查看图片效果,供大家参考,具体内容如下

效果: 图片点击显示大图,多张图可以滑动,左右按钮点击可切换查看图片 (左右点击切换效果不需要删除样式即可)

index.html 文件



 
 
 
 
 jQuery模仿朋友圈查看图片效果
 
 
 
 
 
 
 
 
 
 

touchTouch.css 文件

预加载loading动图 preloader.gif

左右切换按钮图片 arrows.png(不需要可删除)

jQuery实现朋友圈查看图片_第1张图片

#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:opacity 1s ease;
 -webkit-transition:opacity 1s ease;
 transition:opacity 1s ease;
}
#galleryOverlay.visible{
 opacity:1;
}
#gallerySlider{
 height:100%;
 left:0;
 top:0;
 width:100%;
 white-space: nowrap;
 position:absolute;
 -moz-transition:left 0.4s ease;
 -webkit-transition:left 0.4s ease;
 transition:left 0.4s ease;
}
#gallerySlider .placeholder{
 /* preloader.gif 预加载loading动图 */
 background: url("preloader.gif") no-repeat center center;
 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 .placeholder img{
 display: inline-block;
 max-height: 100%;
 max-width: 100%;
 vertical-align: middle;
}
#gallerySlider.rightSpring{
 -moz-animation: rightSpring 0.3s;
 -webkit-animation: rightSpring 0.3s;
}
#gallerySlider.leftSpring{
 -moz-animation: leftSpring 0.3s;
 -webkit-animation: leftSpring 0.3s;
}
/* Firefox Keyframe Animations */
@-moz-keyframes rightSpring{
 0%{
 margin-left:0px;
 }
 50%{
 margin-left:-30px;
 }
 100%{
 margin-left:0px;
 }
}
@-moz-keyframes leftSpring{
 0%{
 margin-left:0px;
 }
 50%{
 margin-left:30px;
 }
 100%{
 margin-left:0px;
 }
}
/* Safari and Chrome Keyframe Animations */
@-webkit-keyframes rightSpring{
 0%{
 margin-left:0px;
 }
 50%{
 margin-left:-30px;
 }
 100%{
 margin-left:0px;
 }
}
@-webkit-keyframes leftSpring{
 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:opacity 0.2s ease;
 -webkit-transition:opacity 0.2s ease;
 transition:opacity 0.2s ease;
}
#prevArrow:hover, #nextArrow:hover{
 opacity:1;
}
#prevArrow{
 background-position:left top;
 left:40px;
}
#nextArrow{
 background-position:right top;
 right:40px;
}
/* 页码 */
#pagelimit{
 position:absolute;
 bottom:20px;
 left:50%;
 margin-left:-18px;
 color:#fff;
 font-size:1.4rem;
}


touchTouch.jquery.js 文件

(function(){
 /* Private variables */
 var overlay = $('
'), slider = $('
'), prevArrow = $(''), nextArrow = $(''), pageSpan = $('')); }); // Hide the gallery if the background is touched / clicked slider.append(placeholders).on('click',function(e){ hideOverlay(); }); // Listen for touch events on the body and check if they // originated in #gallerySlider img - the images in the slider. $('body').on('touchstart', '#gallerySlider img', function(e){ var touch = 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(); } else if (touch.pageX - startX < -10){ slider.off('touchmove'); showNext(); } }); // Return false to prevent image // highlighting on Android return false; }).on('touchend',function(){ slider.off('touchmove'); }); // Listening for clicks on the thumbnails //评论事件 items.on('click', function(e){ e.preventDefault(); // Find the position of this image // in the collection index = items.index(this); showOverlay(index); showImage(index); calcPages(items,index); // Preload the next image preload(index+1); // Preload the previous preload(index-1); $(document).data("overlayVisible",true); e.cancelBubble = true; //取消冒泡事件 //e.stopPropagation(); }); function calcPages(items,index){ pageSpan.text((index+1)+"/"+items.length); } // If the browser does not have support // for touch, display the arrows if ( !("ontouchstart" in window) ){ overlay.append(prevArrow).append(nextArrow); prevArrow.click(function(e){ e.preventDefault(); showPrevious(); }); nextArrow.click(function(e){ e.preventDefault(); showNext(); }); } // Listen for arrow keys $(window).bind('keydown', function(e){ if (e.keyCode == 37){ showPrevious(); } else if (e.keyCode==39){ showNext(); } }); /* Private functions */ function showOverlay(index){ // If the overlay is already shown, exit if (overlayVisible){ return false; } // Show the overlay overlay.show(); setTimeout(function(){ // Trigger the opacity CSS transition overlay.addClass('visible'); }, 100); // Move the slider to the correct image offsetSlider(index); // Raise the visible flag overlayVisible = true; } function hideOverlay(){ // If the overlay is not shown, exit if(!overlayVisible){ return false; } // Hide the overlay overlay.hide().removeClass('visible'); overlayVisible = false; $(document).data("overlayVisible",overlayVisible); } function offsetSlider(index){ // This will trigger a smooth css transition slider.css('left',(-index*100)+'%'); } // Preload an image by its index in the items array function preload(index){ setTimeout(function(){ showImage(index); }, 1000); } // Show image in the slider function showImage(index){ // If the index is outside the bonds of the array if(index < 0 || index >= items.length){ return false; } // Call the load function with the href attribute of the item loadImage(items.eq(index).attr('href'), function(){ placeholders.eq(index).html(this); }); } // Load the image and execute a callback function. // Returns a jQuery object function loadImage(src, callback){ var img = $('').on('load', function(){ callback.call(img); }); img.attr('src',src); } function showNext(){ // If this is not the last image if(index+1 < items.length){ index++; offsetSlider(index); preload(index+1); calcPages(items,index); } else{ // Trigger the spring animation slider.addClass('rightSpring'); setTimeout(function(){ slider.removeClass('rightSpring'); },500); } } function showPrevious(){ // If this is not the first image if(index>0){ index--; offsetSlider(index); preload(index-1); calcPages(items,index); } else{ // Trigger the spring animation slider.addClass('leftSpring'); setTimeout(function(){ slider.removeClass('leftSpring'); },500); } } }; })(jQuery);

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

你可能感兴趣的:(jQuery实现朋友圈查看图片)