Posted in jQuery onSeptember 11, 2020
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);
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。
jQuery实现朋友圈查看图片
- Author -
s2kzzZ声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@