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 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);
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值