编程 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实现字体颜色渐变效果的方法

Mar 29 jQuery

js和jquery中获取非行间样式

May 05 jQuery

使用jQuery.Pin垂直滚动时固定导航

May 24 jQuery

jquery实现一个全局计时器(商城可用)

Jun 30 jQuery

jQuery层级选择器_动力节点节点Java学院整理

Jul 04 jQuery

解决jquery appaend元素中id绑定事件失效的问题

Sep 12 jQuery

jquery ajaxfileupload异步上传插件

Nov 21 jQuery

jQuery实现获取动态添加的标签对象示例

Jun 28 jQuery

jQuery 实现倒计时天,时,分,秒功能

Jul 31 jQuery

jQuery实现轮播图及其原理详解

Apr 12 jQuery

浅谈JS和jQuery的区别

Mar 27 jQuery

jQuery实现简单飞机大战

Jul 05 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