jQuery实现朋友圈查看图片效果,供大家参考,具体内容如下
效果: 图片点击显示大图,多张图可以滑动,左右按钮点击可切换查看图片 (左右点击切换效果不需要删除样式即可)
index.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 = $(''), slider = $(''), prevArrow = $(''), nextArrow = $(''), pageSpan = $('')); }); // 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 = $('').on('load', function(){ callback.call(img); }); img.attr('src',src); } function showNext(){ // If this is not the last image if(index+1
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); 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
写下你的评论吧 !推荐阅读
本文介绍了一款名为Voicewo的在线语音识别转换jQuery插件,该插件具有快速、架构、风格、扩展和兼容等特点,适合在互联网应用中使用。同时还提供了一个快速示例供开发人员参考。 ... [详细]蜡笔小新 2023-12-13 20:01:16 一、用户行为三剑客以下3个CSS属性:user-select属性可以设置是否允许用户选择页面中的图文内容;user-modify属性可以设置是否允许输入 ... [详细]蜡笔小新 2023-10-17 14:35:15 本文介绍了使用正则表达式来爬取36Kr网站首页所有新闻的操作步骤和代码示例。通过访问网站、查找关键词、编写代码等步骤,可以获取到网站首页的新闻数据。代码示例使用Python编写,并使用正则表达式来提取所需的数据。详细的操作步骤和代码示例可以参考本文内容。 ... [详细]蜡笔小新 2023-12-12 19:16:21 本文介绍了ECMA262规定的typeof操作符对不同类型的变量的返回值,以及instanceof操作符的使用方法。同时还提到了在不同浏览器中对正则表达式应用typeof操作符的返回值的差异。 ... [详细]蜡笔小新 2023-12-10 17:31:51 本文整理了常用的CSS属性及用法,包括背景属性、边框属性、尺寸属性、可伸缩框属性、字体属性和文本属性等,方便开发者查阅和使用。 ... [详细]蜡笔小新 2023-12-09 03:01:43 CSS|网格-行-结束属性原文:https://www.gee ... [详细]蜡笔小新 2023-10-17 15:21:56 css,背景,位置,y,background, ... [详细]蜡笔小新 2023-10-16 16:28:38 本文提供了Python瓦片图下载、合并、绘图、标记的代码示例,包括下载代码、多线程下载、图像处理等功能。通过参考geoserver,使用PIL、cv2、numpy、gdal、osr等库实现了瓦片图的下载、合并、绘图和标记功能。代码示例详细介绍了各个功能的实现方法,供读者参考使用。 ... [详细]蜡笔小新 2023-12-13 12:14:55 本文介绍了影响网站打开时间的两个因素,即网页加载速度和网站页面大小。重点讲解了如何通过压缩网站页面来减少页面加载时间。具体包括图片压缩、Javascript压缩、CSS压缩和HTML压缩等方法,并推荐了相应的压缩工具。此外,还提到了一款Google Chrome插件——网页加载速度分析工具Speed Tracer。 ... [详细]蜡笔小新 2023-12-09 09:17:00 web前端|js教程off-canvas,部分,超出web前端-js教程mui框架中off-canvas侧滑的一个缺点就是无法出现滚动条,因为它主要用途是设置类似于qq界面的那种格 ... [详细]蜡笔小新 2023-10-17 20:40:03 前言:关于跨域CORS1.没有跨域时,ajax默认是带cookie的2.跨域时,两种解决方案:1)服务器端在filter中配置详情:http:blog.csdn.netwzl002 ... [详细]蜡笔小新 2023-10-17 17:47:27 本文由编程笔记#小编为大家整理,主要介绍了css回到顶部按钮相关的知识,希望对你有一定的参考价值。 ... [详细]蜡笔小新 2023-10-17 13:38:49 一、pyecharts介绍ECharts,一个使用JavaScript实现的开源可视化库,可以流畅的运行在PC和移动设备上,兼容当前绝大部 ... [详细]蜡笔小新 2023-10-16 08:29:03
孤魂地狱这个家伙很懒,什么也没留下!Tags | 热门标签RankList | 热门文章
- 1Bootstrap基本样式学习笔记之表格(2)
- 2JS实现太极旋转思路分析
- 3原生js实现查询天气小应用
- 4BootStrap轮播HTML代码(推荐)
- 5jquery利用json实现页面之间传值的实例解析
- 6Websocket协议详解及简单实例代码
- 7smartupload实现文件上传时获取表单数据(推荐)
- 8深入学习Bootstrap表单
- 9Bootstrap弹出框modal上层的输入框不能获得焦点问题的解决方法
- 10WEB开发之注册页面验证码倒计时代码的实现
- 11手机软键盘弹出时影响布局的解决方法
- 12如何使用包含已编码值的Encodable在Swift中编码结构
- 13jQuery Easyui 下拉树组件combotree
- 14前端js弹出框组件使用方法
- 15vue.js实现仿原生ios时间选择组件实例代码
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved |京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有