支持移动端，PC端图片弹出层（支持键盘）
来源：互联网 发布：太极拳软件 编辑：程序博客网 时间：2024/06/06 01:09
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#
0 0
- 支持移动端，PC端图片弹出层（支持键盘）
- jquery 弹出层插件FancyBox弹出层演示支持图片、文章内容、flash swf弹出层等
- jquery 弹出层插件FancyBox弹出层演示支持图片、文章内容、flash swf弹出层等
- 【jeecg移动开发能力】表单移动开发能力，提供多套表单模板（移动端、PC端），支持自定义
- 即时通信系统中如何实现：支持PC端和移动端同时在线（即支持同帐号多设备同时登录）？
- PC 端与移动端的判断(判断是否支持touch事件)
- 支持移动端和PC端的轻量级轮播图插件&&hammer.js教程
- 带回调函数的Canvas刮奖刮刮卡JQuery插件，支持移动端PC端
- js html 轮播图 支持移动端左右滑动 pc也能用
- 实用支持移动、PC端的textarea内容复制粘贴小插件
- unity3d移动摄像机，支持PC、手机
- 移动端网页控制键盘弹出样式
- H5 压缩图片上传(pc端适用)支持png/jpg格式（其他格式都会转为png）
- H5 压缩图片上传(pc端适用)支持png/jpg格式（其他格式都会转为png）
- jquery 弹出层插件 ThickBox 多功能弹出层插件支持图片、ajax、内嵌内容弹等
- jquery 弹出层插件 ThickBox 多功能弹出层插件支持图片、ajax、内嵌内容弹等
- 移动端弹出穿透问题（弹出层弹出后body还能滑动）
- 移动端弹出层后一系列问题总结
- Mac 配置mysql 别名 alias
- Java基础四
- 格式符函数printf()、sprintf()、 vprintf()、 vsprintf()、 fprintf() 和 vfprintf()
- vs vc 编译选项
- 几个javascript技巧
- 支持移动端，PC端图片弹出层（支持键盘）
- 【Linux】阻塞信号
- 短信接口
- 使用slice方法进行js对象拷贝 得到新的对象 不再互相干扰 解决引用变量的指向问题
- 推荐算法：基于svd的算法：svd
- flask中的日志使用方法
- 剑指offer-4-面试25：二叉树中和为某一值的路径
- apache压力测试ab命令使用及结果判断
- UITableview禁止cell点击事件
