这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要为大家详细介绍了手机端点击图片放大特效 PhotoSwipe.js 插件实现方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
PhotoSwipe 插件能实现手机端点击图片全屏放大 再双击图片放大等功能
PhotoSwipe 插件官方网站 http://www.photoswipe.com/
但有一点不太好的是图片放大后再单击不能关闭浏览,要点击关闭按钮或者滑动才能关闭,找了好久配置项都没说到这点上的,只能自己动手改了。
打开 photoswipe.js,大概在 3179 行有个关于 tap 的函数定义 在开头先定义一个变量
var tap_num = 0;
然后在 onTapStart 的定义里加入
- //根据需求自己添加的S
- //判断是单击还是双击 单击关闭 双击放大
- tap_num++;
- if (tap_num < 2) {
- setTimeout(function() {
- if (tap_num > 1) {
- tap_num = 0;
- return;
- } else {
- tap_num = 0;
- //判断是否有拖拽 如有拖拽触发拖拽事件 没有则关闭
- if (_isDragging) {
- return;
- } else {
- self.close();
- }
- }
- },
- 200);
- }
- //根据需求自己添加的E
大概整体就是这样
- var tapTimer, tapReleasePoint = {},
- _dispatchTapEvent = function(origEvent, releasePoint, pointerType) {
- var e = document.createEvent('CustomEvent'),
- eDetail = {
- origEvent: origEvent,
- target: origEvent.target,
- releasePoint: releasePoint,
- pointerType: pointerType || 'touch'
- };
- e.initCustomEvent('pswpTap', true, true, eDetail);
- origEvent.target.dispatchEvent(e);
- };
- var tap_num = 0;
- _registerModule('Tap', {
- publicMethods: {
- initTap: function() {
- _listen('firstTouchStart', self.onTapStart);
- _listen('touchRelease', self.onTapRelease);
- _listen('destroy',
- function() {
- tapReleasePoint = {};
- tapTimer = null;
- });
- },
- onTapStart: function(touchList) {
- if (touchList.length > 1) {
- clearTimeout(tapTimer);
- tapTimer = null;
- }
- //根据需求自己添加的S
- //判断是单击还是双击 单击关闭 双击放大
- tap_num++;
- if (tap_num < 2) {
- setTimeout(function() {
- if (tap_num > 1) {
- tap_num = 0;
- return;
- } else {
- tap_num = 0;
- //判断是否有拖拽 如有拖拽触发拖拽事件 没有则关闭
- if (_isDragging) {
- return;
- } else {
- self.close();
- }
- }
- },
- 200);
- }
- //根据需求自己添加的E
- },
- onTapRelease: function(e, releasePoint) {
- if (!releasePoint) {
- return;
- }
- if (!_moved && !_isMultitouch && !_numAnimations) {
- var p0 = releasePoint;
- if (tapTimer) {
- clearTimeout(tapTimer);
- tapTimer = null;
- // Check if taped on the same place
- if (_isNearbyPoints(p0, tapReleasePoint)) {
- _shout('doubleTap', p0);
- return;
- }
- }
- if (releasePoint.type === 'mouse') {
- _dispatchTapEvent(e, releasePoint, 'mouse');
- return;
- }
- var clickedTagName = e.target.tagName.toUpperCase();
- // avoid double tap delay on buttons and elements that have class pswp__single-tap
- if (clickedTagName === 'BUTTON' || framework.hasClass(e.target, 'pswp__single-tap')) {
- _dispatchTapEvent(e, releasePoint);
- return;
- }
- _equalizePoints(tapReleasePoint, p0);
- tapTimer = setTimeout(function() {
- _dispatchTapEvent(e, releasePoint);
- tapTimer = null;
- },
- 300);
- }
- }
- }
- });
把修改后的 photoswipe.js 压缩一下,就能实现自己想要的功能了
另外,使用 photoswipe 插件需要插入框架和 JavaScript 代码,可以把这些代码整合成一个 js 再引入,这样页面看起来就简洁了很多。 先在 html 写上图片相册结构,并配上样式
- <div id="demo-test-gallery" class="demo-gallery">
- <a href="https://farm4.staticflickr.com/3894/15008518202_c265dfa55f_h.jpg"
- data-size="1600x1600" data-med="https://farm4.staticflickr.com/3894/15008518202_b016d7d289_b.jpg"
- data-med-size="1024x1024">
- <img src="https://farm4.staticflickr.com/3894/15008518202_b016d7d289_m.jpg"
- alt="" />
- </a>
- <a href="https://farm6.staticflickr.com/5591/15008867125_b61960af01_h.jpg"
- data-size="1600x1068" data-med="https://farm6.staticflickr.com/5591/15008867125_68a8ed88cc_b.jpg"
- data-med-size="1024x1024">
- <img src="https://farm6.staticflickr.com/5591/15008867125_68a8ed88cc_m.jpg"
- alt="" />
- </a>
- </div>
整理后的 js
- document.writeln("<!-- Root element of PhotoSwipe. Must have class pswp. -->");
- document.writeln("<div class=\"pswp\" tabindex=\"-1\" role=\"dialog\" aria-hidden=\"true\">");
- document.writeln("");
- document.writeln(" <!-- Background of PhotoSwipe.");
- document.writeln(" It\'s a separate element as animating opacity is faster than rgba(). -->");
- document.writeln(" <div class=\"pswp__bg\"><\/div>");
- document.writeln("");
- document.writeln(" <!-- Slides wrapper with overflow:hidden. -->");
- document.writeln(" <div class=\"pswp__scroll-wrap\">");
- document.writeln("");
- document.writeln(" <!-- Container that holds slides.");
- document.writeln(" PhotoSwipe keeps only 3 of them in the DOM to save memory.");
- document.writeln(" Don\'t modify these 3 pswp__item elements, data is added later on. -->");
- document.writeln(" <div class=\"pswp__container\">");
- document.writeln(" <div class=\"pswp__item\"><\/div>");
- document.writeln(" <div class=\"pswp__item\"><\/div>");
- document.writeln(" <div class=\"pswp__item\"><\/div>");
- document.writeln(" <\/div>");
- document.writeln("");
- document.writeln(" <!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->");
- document.writeln(" <div class=\"pswp__ui pswp__ui--hidden\">");
- document.writeln("");
- document.writeln(" <div class=\"pswp__top-bar\">");
- document.writeln("");
- document.writeln(" <!-- Controls are self-explanatory. Order can be changed. -->");
- document.writeln("");
- document.writeln(" <div class=\"pswp__counter\"><\/div>");
- document.writeln("");
- document.writeln(" <button class=\"pswp__button pswp__button--close\" title=\"Close (Esc)\"><\/button>");
- document.writeln("");
- document.writeln(" <button class=\"pswp__button pswp__button--share\" title=\"Share\"><\/button>");
- document.writeln("");
- document.writeln(" <button class=\"pswp__button pswp__button--fs\" title=\"Toggle fullscreen\"><\/button>");
- document.writeln("");
- document.writeln(" <button class=\"pswp__button pswp__button--zoom\" title=\"Zoom in\/out\"><\/button>");
- document.writeln("");
- document.writeln(" <!-- Preloader demo http:\/\/codepen.io\/dimsemenov\/pen\/yyBWoR -->");
- document.writeln(" <!-- element will get class pswp__preloader--active when preloader is running -->");
- document.writeln(" <div class=\"pswp__preloader\">");
- document.writeln(" <div class=\"pswp__preloader__icn\">");
- document.writeln(" <div class=\"pswp__preloader__cut\">");
- document.writeln(" <div class=\"pswp__preloader__donut\"><\/div>");
- document.writeln(" <\/div>");
- document.writeln(" <\/div>");
- document.writeln(" <\/div>");
- document.writeln(" <\/div>");
- document.writeln("");
- document.writeln(" <div class=\"pswp__share-modal pswp__share-modal--hidden pswp__single-tap\">");
- document.writeln(" <div class=\"pswp__share-tooltip\"><\/div>");
- document.writeln(" <\/div>");
- document.writeln("");
- document.writeln(" <button class=\"pswp__button pswp__button--arrow--left\" title=\"Previous (arrow left)\">");
- document.writeln(" <\/button>");
- document.writeln("");
- document.writeln(" <button class=\"pswp__button pswp__button--arrow--right\" title=\"Next (arrow right)\">");
- document.writeln(" <\/button>");
- document.writeln("");
- document.writeln(" <div class=\"pswp__caption\">");
- document.writeln(" <div class=\"pswp__caption__center\"><\/div>");
- document.writeln(" <\/div>");
- document.writeln("");
- document.writeln(" <\/div>");
- document.writeln("");
- document.writeln(" <\/div>");
- document.writeln("");
- document.writeln("<\/div>"); (function() {
- var initPhotoSwipeFromDOM = function(gallerySelector) {
- var parseThumbnailElements = function(el) {
- var thumbElements = el.childNodes,
- numNodes = thumbElements.length,
- items = [],
- el,
- childElements,
- thumbnailEl,
- size,
- item;
- for (var i = 0; i < numNodes; i++) {
- el = thumbElements[i];
- // include only element nodes
- if (el.nodeType !== 1) {
- continue;
- }
- childElements = el.children;
- size = el.getAttribute('data-size').split('x');
- // create slide object
- item = {
- src: el.getAttribute('href'),
- w: parseInt(size[0], 10),
- h: parseInt(size[1], 10),
- author: el.getAttribute('data-author')
- };
- item.el = el; // save link to element for getThumbBoundsFn
- if (childElements.length > 0) {
- item.msrc = childElements[0].getAttribute('src'); // thumbnail url
- if (childElements.length > 1) {
- item.title = childElements[1].innerHTML; // caption (contents of figure)
- }
- }
- var mediumSrc = el.getAttribute('data-med');
- if (mediumSrc) {
- size = el.getAttribute('data-med-size').split('x');
- // "medium-sized" image
- item.m = {
- src: mediumSrc,
- w: parseInt(size[0], 10),
- h: parseInt(size[1], 10)
- };
- }
- // original image
- item.o = {
- src: item.src,
- w: item.w,
- h: item.h
- };
- items.push(item);
- }
- return items;
- };
- // find nearest parent element
- var closest = function closest(el, fn) {
- return el && (fn(el) ? el: closest(el.parentNode, fn));
- };
- var onThumbnailsClick = function(e) {
- e = e || window.event;
- e.preventDefault ? e.preventDefault() : e.returnValue = false;
- var eTarget = e.target || e.srcElement;
- var clickedListItem = closest(eTarget,
- function(el) {
- return el.tagName === 'A';
- });
- if (!clickedListItem) {
- return;
- }
- var clickedGallery = clickedListItem.parentNode;
- var childNodes = clickedListItem.parentNode.childNodes,
- numChildNodes = childNodes.length,
- nodeIndex = 0,
- index;
- for (var i = 0; i < numChildNodes; i++) {
- if (childNodes[i].nodeType !== 1) {
- continue;
- }
- if (childNodes[i] === clickedListItem) {
- index = nodeIndex;
- break;
- }
- nodeIndex++;
- }
- if (index >= 0) {
- openPhotoSwipe(index, clickedGallery);
- }
- return false;
- };
- var photoswipeParseHash = function() {
- var hash = window.location.hash.substring(1),
- params = {};
- if (hash.length < 5) { // pid=1
- return params;
- }
- var vars = hash.split('&');
- for (var i = 0; i < vars.length; i++) {
- if (!vars[i]) {
- continue;
- }
- var pair = vars[i].split('=');
- if (pair.length < 2) {
- continue;
- }
- params[pair[0]] = pair[1];
- }
- if (params.gid) {
- params.gid = parseInt(params.gid, 10);
- }
- return params;
- };
- var openPhotoSwipe = function(index, galleryElement, disableAnimation, fromURL) {
- var pswpElement = document.querySelectorAll('.pswp')[0],
- gallery,
- options,
- items;
- items = parseThumbnailElements(galleryElement);
- // define options (if needed)
- options = {
- galleryUID: galleryElement.getAttribute('data-pswp-uid'),
- getThumbBoundsFn: function(index) {
- // See Options->getThumbBoundsFn section of docs for more info
- var thumbnail = items[index].el.children[0],
- pageYScroll = window.pageYOffset || document.documentElement.scrollTop,
- rect = thumbnail.getBoundingClientRect();
- return {
- x: rect.left,
- y: rect.top + pageYScroll,
- w: rect.width
- };
- },
- addCaptionHTMLFn: function(item, captionEl, isFake) {
- if (!item.title) {
- captionEl.children[0].innerText = '';
- return false;
- }
- captionEl.children[0].innerHTML = item.title + '<br/><small>Photo: ' + item.author + '</small>';
- return true;
- }
- };
- // options for control bar
- options.shareEl = false;
- options.fullscreenEl = false;
- if (fromURL) {
- if (options.galleryPIDs) {
- // parse real index when custom PIDs are used
- // http://photoswipe.com/documentation/faq.html#custom-pid-in-url
- for (var j = 0; j < items.length; j++) {
- if (items[j].pid == index) {
- options.index = j;
- break;
- }
- }
- } else {
- options.index = parseInt(index, 10) - 1;
- }
- } else {
- options.index = parseInt(index, 10);
- }
- // exit if index not found
- if (isNaN(options.index)) {
- return;
- }
- // Pass data to PhotoSwipe and initialize it
- gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, options);
- // see: http://photoswipe.com/documentation/responsive-images.html
- var realViewportWidth, useLargeImages = false,
- firstResize = true,
- imageSrcWillChange;
- gallery.listen('beforeResize',
- function() {
- var dpiRatio = window.devicePixelRatio ? window.devicePixelRatio: 1;
- dpiRatio = Math.min(dpiRatio, 2.5);
- realViewportWidth = gallery.viewportSize.x * dpiRatio;
- if (realViewportWidth >= 1200 || (!gallery.likelyTouchDevice && realViewportWidth > 800) || screen.width > 1200) {
- if (!useLargeImages) {
- useLargeImages = true;
- imageSrcWillChange = true;
- }
- } else {
- if (useLargeImages) {
- useLargeImages = false;
- imageSrcWillChange = true;
- }
- }
- if (imageSrcWillChange && !firstResize) {
- gallery.invalidateCurrItems();
- }
- if (firstResize) {
- firstResize = false;
- }
- imageSrcWillChange = false;
- });
- gallery.listen('gettingData',
- function(index, item) {
- if (useLargeImages) {
- item.src = item.o.src;
- item.w = item.o.w;
- item.h = item.o.h;
- } else {
- item.src = item.m.src;
- item.w = item.m.w;
- item.h = item.m.h;
- }
- });
- gallery.init();
- };
- // select all gallery elements
- var galleryElements = document.querySelectorAll(gallerySelector);
- for (var i = 0,
- l = galleryElements.length; i < l; i++) {
- galleryElements[i].setAttribute('data-pswp-uid', i + 1);
- galleryElements[i].onclick = onThumbnailsClick;
- }
- // Parse URL and open gallery if it contains #&pid=3&gid=1
- var hashData = photoswipeParseHash();
- if (hashData.pid && hashData.gid) {
- openPhotoSwipe(hashData.pid, galleryElements[hashData.gid - 1], true, true);
- }
- };
- initPhotoSwipeFromDOM('.demo-gallery');
- })();
来源: http://www.phperz.com/article/17/0516/332353.html