编程 Javascript jQuery

jQuery实现朋友圈查看图片

Posted in jQuery onSeptember 11, 2020

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

jQuery实现朋友圈查看图片

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

jQuery实现朋友圈查看图片

#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 page
 overlay.hide().appendTo('body');
 slider.appendTo(overlay);
 pageSpan.appendTo(overlay);
 
 // Creating a placeholder for each image
 items.each(function(){
 placeholders = placeholders.add($('<div class="placeholder">'));
 });
 
 // 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 = $('<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实现朋友圈查看图片

- Author -

s2kzzZ

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

jQuery 相关文章推荐

jQuery插件之validation插件

Mar 29 jQuery

jQuery+ajax实现局部刷新的两种方法

Jun 08 jQuery

详解在vue-cli中引用jQuery、bootstrap以及使用sass、less编写css

Nov 08 jQuery

jquery手机触屏滑动拼音字母城市选择器的实例代码

Dec 11 jQuery

jQuery Validate插件ajax方式验证输入值的实例

Dec 21 jQuery

jQuery实现鼠标响应式淘宝动画效果示例

Feb 13 jQuery

jQuery中图片展示插件highslide.js的简单dom

Apr 22 jQuery

jQuery实现基本淡入淡出效果的方法详解

Sep 05 jQuery

jQuery选择器之基本选择器用法实例分析

Feb 19 jQuery

jquery实现的放大镜效果示例

Feb 24 jQuery

jQuery实现移动端下拉展现新的内容回弹动画

Jun 24 jQuery

jQuery带控制按钮轮播图插件

Jul 31 jQuery

jQuery实现日历效果

Sep 11 #jQuery

jquery实现简单每周轮换的日历

Sep 10 #jQuery

如何使用jQuery操作Cookies方法解析

Sep 08 #jQuery

jQuery实现简单三级联动效果

Sep 05 #jQuery

如何基于jQuery实现五角星评分

Sep 02 #jQuery

jQuery中getJSON跨域原理的深入讲解

Sep 02 #jQuery

Jquery $.map使用方法实例详解

Sep 01 #jQuery