[置顶] 支持移动端，PC端图片弹出层（支持键盘）
DEMO下载：http://download.csdn.net/detail/cometwo/9571755
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, maximum-scale=1.0" />
<title>jquery实现的触摸相册效果</title>
<link rel="stylesheet" href="css/styles.css" />
<link rel="stylesheet" href="css/touchTouch.css" />
<script type="text/javascript" src="js/jquery-2.1.4.js"></script>
<script type="text/javascript" src="js/touchTouch.jquery_xiugai.js"></script>
<!-- 作者：[email protected] 时间：2016-07-09 描述：换我试试效果 <script type="text/javascript" src="js/touchTouch.jquery官方的.js" ></script> -->
<script type="text/javascript"> $(function() { $('#thumbs a').touchTouch(); }); </script>
</head>
<body>
<div id="thumbs">
<a href="img/1.jpg" style="background-image:url(img/1.jpg)"></a>
<a href="img/2.jpg" style="background-image:url(img/2.jpg)"></a>
<a href="img/3.jpg" style="background-image:url(img/3.jpg)"></a>
<a href="img/4.jpg" style="background-image:url(img/4.jpg)"></a>
<a href="img/5.jpg" style="background-image:url(img/5.jpg)"></a>
<a href="img/6.jpg" style="background-image:url(img/6.jpg)"></a>
</div>
</body>
</html>原JS文件
/** * @name jQuery touchTouch plugin * @author Martin Angelov * @version 1.0 * @url http://tutorialzine.com/2012/04/mobile-touch-gallery/ * @license MIT License */
(function(){
/* Private variables */
var overlay = $('<div id="galleryOverlay">'),
slider = $('<div id="gallerySlider">'),
prevArrow = $('<a id="prevArrow"></a>'),
nextArrow = $('<a id="nextArrow"></a>'),
overlayVisible = false;
/* Creating the plugin */
$.fn.touchTouch = function(){
var placeholders = $([]),
index = 0,
items = this;
// Appending the markup to the page
overlay.hide().appendTo('body');
slider.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){
if(!$(e.target).is('img')){
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);
// Preload the next image
preload(index+1);
// Preload the previous
preload(index-1);
});
// 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;
}
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);
}
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);
}
else{
// Trigger the spring animation
slider.addClass('leftSpring');
setTimeout(function(){
slider.removeClass('leftSpring');
},500);
}
}
};
})(jQuery);原css文件
.animation29 { -webkit-animation: bounceIn .3s .2s ease both; -moz-animation: bounceIn .3s .2s ease both; }
@-webkit-keyframes bounceIn {
0% { opacity: 0; -webkit-transform: scale(.05) }
10% { -webkit-transform: scale(.1) }
20% { opacity: 1; -webkit-transform: scale(.2) }
30% { opacity: 1; -webkit-transform: scale(.3) }
40% { opacity: 1; -webkit-transform: scale(.4) }
50% { opacity: 1; -webkit-transform: scale(.5) }
60% { -webkit-transform: scale(.6) }
70% { -webkit-transform: scale(.7) }
80% { -webkit-transform: scale(.8) }
90% { -webkit-transform: scale(.9) }
100% { -webkit-transform: scale(1) }
}
@-moz-keyframes bounceIn {
0% { opacity: 0; -webkit-transform: scale(.05) }
10% { -webkit-transform: scale(.1) }
20% { opacity: 1; -webkit-transform: scale(.2) }
30% { opacity: 1; -webkit-transform: scale(.3) }
40% { opacity: 1; -webkit-transform: scale(.4) }
50% { opacity: 1; -webkit-transform: scale(.5) }
60% { -webkit-transform: scale(.6) }
70% { -webkit-transform: scale(.7) }
80% { -webkit-transform: scale(.8) }
90% { -webkit-transform: scale(.9) }
100% { -webkit-transform: scale(1) }
}
/*******************34、bounceOut***********************/
.animation34 { -webkit-animation: bounceOut .3s .2s ease both; -moz-animation: bounceOut .3s .2s ease both; }
@-webkit-keyframes bounceOut {
0% { opacity: 0; -webkit-transform: scale(1) }
10% { -webkit-transform: scale(.9) }
20% { opacity: 1; -webkit-transform: scale(.8) }
30% { opacity: 1; -webkit-transform: scale(.7) }
40% { opacity: 1; -webkit-transform: scale(.6) }
50% { opacity: 1; -webkit-transform: scale(.5) }
60% { -webkit-transform: scale(.4) }
70% { -webkit-transform: scale(.3) }
80% { -webkit-transform: scale(.2) }
90% { -webkit-transform: scale(.1) }
100% { display: none; -webkit-transform: scale(0) }
}
@-moz-keyframes bounceOut {
0% { opacity: 0; -webkit-transform: scale(1) }
10% { -webkit-transform: scale(.9) }
20% { opacity: 1; -webkit-transform: scale(.8) }
30% { opacity: 1; -webkit-transform: scale(.7) }
40% { opacity: 1; -webkit-transform: scale(.6) }
50% { opacity: 1; -webkit-transform: scale(.5) }
60% { -webkit-transform: scale(.4) }
70% { -webkit-transform: scale(.3) }
80% { -webkit-transform: scale(.2) }
90% { -webkit-transform: scale(.1) }
100% { -webkit-transform: scale(0) }
}
/* The gallery overlay */
#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, 0.8); overflow: hidden; display: none; -moz-transition: opacity 1s ease; -webkit-transition: opacity 1s ease; transition: opacity 1s ease; }
/* This class will trigger the animation */
#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 { background-color: rgba(0, 0, 0, 0.8); background: url(../img/preloader.gif) no-repeat center center; height: 100%; line-height: 1px; text-align: center; width: 100%; display: inline-block; }
/* The before element moves the * image halfway from the top */
#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 */
#prevArrow,
#nextArrow { border: none; text-decoration: none; background: url(../img/arrows.png) no-repeat; opacity: 0.5; 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; }核心JS分析，可以判断手势滑动方向
$('body').on('click', '.placeholder img', function(e) {
//touchstart在你之前发生，不管些什么，都先执行下面的
});
$('body').on('touchstart', '#gallerySlider img', function(e) {
var touch = e.originalEvent,
startX = touch.changedTouches[0].pageX;
startY = touch.changedTouches[0].pageY;
slider.on('touchmove', function(e) {
e.preventDefault();
touch = e.originalEvent.touches[0] ||
e.originalEvent.changedTouches[0];
if (touch.pageX - startX > 10) {
console.log("右划");
slider.off('touchmove');
showPrevious();
} else if (touch.pageX - startX < -10) {
console.log("左划");
slider.off('touchmove');
showNext();
};
if (touch.pageY - startY > 10) {
console.log("下划");
} else if (touch.pageY - startY < -10) {
console.log("上划");
};
});
// Return false to prevent image
// highlighting on Android
return false;
}).on('touchend', function() {
slider.off('touchmove');
});如果想点击图片就隐藏
$('body').on('click', '.placeholder img', function(e) {
hideOverlay();
});
/*把他注掉，因为touchstart优先发生
$('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');
});
*/其实DOM不局限于a标签，sb（傻逼）属性存大图地址
<div class="border_blue ry">
<div class="img_box">
<div class="tupian">
<p id="imger_1" sb="images/home_c5_a_d.png"><img src="images/home_c5_a-2.png" alt="" /></p>
<p id="imger_2" sb="images/home_c5_b_d.png"><img src="images/home_c5_b-2.png" alt="" /></p>
</div>
<div class="tupian">
<p id="imger_3" sb="images/home_c5_c_d.png"><img src="images/home_c5_c.png" alt="" /></p>
<p id="imger_4" sb="images/home_c5_d_d.png"><img src="images/home_c5_d.png" alt="" /></p>
</div>
<div class="tupian">
<p id="imger_5" sb="images/home_c5_e_d.png"><img src="images/home_c5_e.png" alt="" /></p>
<p id="imger_6" sb="images/home_c5_f_d.png"><img src="images/home_c5_f.png" alt="" /></p>
</div>
</div>
</div>$(function() {
$(".tupian p").touchTouch();
});修改库文件：
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('sb'), function() {
placeholders.eq(index).html(this);
});
}