DEMO下载:http://download.csdn.net/detail/cometwo/9571755
下载:http://download.csdn.net/detail/cometwo/9576732
<!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>
<!--
作者:1010305129@qq.com
时间: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(