jQuery实现朋友圈查看图片

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

效果：图片点击显示大图，多张图可以滑动，左右按钮点击可切换查看图片（左右点击切换效果不需要删除样式即可）

index.html 文件

<!DOCTYPE html><html><head><meta charset=\"utf-8\"><meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0,user-scalable=no,minimal-ui\"><title>jQuery模仿朋友圈查看图片效果</title><link rel=\"stylesheet\" type=\"text/css\" href=\"css/css.css\" ><link rel=\"stylesheet\" type=\"text/css\" href=\"touchTouch/touchTouch.css\" ><script src=\"js/jquery-3.4.1.js\"></script><script src=\"js/touchTouch.jquery.js\"></script><script>$(function() {//图片事件 img-gather处为图片效果展示$(\'#thumbs a\').touchTouch();});</script></head><body><!--content--><div class=\"content\"><!--img-gather--><div class=\"clearfix img-gather\" id=\"thumbs\"><a href=\"images/img1-large.png\" style=\"background-image:url(images/img1-large.png)\" title=\"图片一\"></a><a href=\"images/img2-large.jpg\" style=\"background-image:url(images/img2-large.jpg)\" title=\"图片二\"></a><a href=\"images/img1-large.png\" style=\"background-image:url(images/img1-large.png)\" title=\"图片一\"></a><a href=\"images/img2-large.jpg\" style=\"background-image:url(images/img2-large.jpg)\" title=\"图片二\"></a><a href=\"images/img1-large.png\" style=\"background-image:url(images/img1-large.png)\" title=\"图片一\"></a><a href=\"images/img2-large.jpg\" style=\"background-image:url(images/img2-large.jpg)\" title=\"图片二\"></a></div><!--img-gather end--></div></body></html>

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: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 = $(\'<div id=\"galleryOverlay\">\'),slider = $(\'<div id=\"gallerySlider\">\'),prevArrow = $(\'<a id=\"prevArrow\"></a>\'),nextArrow = $(\'<a id=\"nextArrow\"></a>\'),pageSpan = $(\'<span id=\"pagelimit\"></span\'),overlayVisible = false;/* Creating the plugin */$.fn.touchTouch = function(){var placeholders = $([]),pl1=[],index = 0,items = this;// Appending the markup to the pageoverlay.hide().appendTo(\'body\');slider.appendTo(overlay);pageSpan.appendTo(overlay);// Creating a placeholder for each imageitems.each(function(){placeholders = placeholders.add($(\'<div class=\"placeholder\">\'));});// Hide the gallery if the background is touched / clickedslider.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 Androidreturn 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 collectionindex = items.index(this);showOverlay(index);showImage(index);calcPages(items,index);// Preload the next imagepreload(index+1);// Preload the previouspreload(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 arrowsif ( !(\"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, exitif (overlayVisible){return false;}// Show the overlayoverlay.show();setTimeout(function(){// Trigger the opacity CSS transitionoverlay.addClass(\'visible\');}, 100);// Move the slider to the correct imageoffsetSlider(index);// Raise the visible flagoverlayVisible = true;}function hideOverlay(){// If the overlay is not shown, exitif(!overlayVisible){return false;}// Hide the overlayoverlay.hide().removeClass(\'visible\');overlayVisible = false;$(document).data(\"overlayVisible\",overlayVisible);}function offsetSlider(index){// This will trigger a smooth css transitionslider.css(\'left\',(-index*100)+\'%\');}// Preload an image by its index in the items arrayfunction preload(index){setTimeout(function(){showImage(index);}, 1000);}// Show image in the sliderfunction showImage(index){// If the index is outside the bonds of the arrayif(index < 0 || index >= items.length){return false;}// Call the load function with the href attribute of the itemloadImage(items.eq(index).attr(\'href\'), function(){placeholders.eq(index).html(this);});}// Load the image and execute a callback function.// Returns a jQuery objectfunction loadImage(src, callback){var img = $(\'<img>\').on(\'load\', function(){callback.call(img);});img.attr(\'src\',src);}function showNext(){// If this is not the last imageif(index+1 < items.length){index++;offsetSlider(index);preload(index+1);calcPages(items,index);}else{// Trigger the spring animationslider.addClass(\'rightSpring\');setTimeout(function(){slider.removeClass(\'rightSpring\');},500);}}function showPrevious(){// If this is not the first imageif(index>0){index--;offsetSlider(index);preload(index-1);calcPages(items,index);}else{// Trigger the spring animationslider.addClass(\'leftSpring\');setTimeout(function(){slider.removeClass(\'leftSpring\');},500);}}};})(jQuery);

以上就是本文的全部内容，希望对大家的学习有所帮助

您可能感兴趣的文章: