[置顶] 支持移动端，PC端图片弹出层（支持键盘）
2016-07-09 17:57
645 查看
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(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);
});
}#有一个jQuery插件http://plugins.jquery.com/jTap/插件：http://download.csdn.net/detail/cometwo/9576288#
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Mybatis-mapper-xml-基础
- Android之LayoutParams的用法
- CSAPP: Architecture Lab
- Android Launcher开发添加应用程序的快捷方式
- idea maven 创建webapp项目没有src目录
- Unity应用发布如何在本地查看Debug输出？
- Android 使用ViewPager实现左右循环滑动图片
- android之广播(一)
- Android根据音量大小绘制心电图(附源码)
- iOS开发经验总结
- 使用KSoap2-anroid连接WebService并保持Session
- 移动端应该如何动态设置字体大小？
- Android 中的dm-verity
- android apk 防止反编译技术第一篇-加壳技术
- Environment Mapping
- （翻译）开始iOS 7中自动布局教程(二)
- 移动端实现图片压缩上传
- 开始iOS 7中自动布局教程(一)
- Android 方法数超过64k限制的解决办法
- Unity3D 新版Particle System（粒子系统）