这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要介绍了手机端图片缩放旋转全屏查看 PhotoSwipe.js 插件实现,感兴趣的小伙伴们可以参考一下
PhotoSwipe 是专为移动触摸设备设计的相册 / 画廊. 兼容所有 iPhone、iPad、黑莓 6+, 以及桌面浏览器. 底层实现基于 html/CSS/JavaScript, 是一款免费开源的相册产品。
为谁而用 让移动站点的相册体验和原生 App 一样的设计师和开发者。
绝佳特性 PhotoSwipe 提供给用户一个熟悉又直观的相册交互界面。
官方网站 http://www.photoswipe.com/
源码示例 http://github.com/downloads/codecomputerlove/PhotoSwipe/code.photoswipe-3.0.5.zip
Github https://github.com/codecomputerlove/PhotoSwipe
在线 demo http://www.photoswipe.com/latest/examples/04-jquery-mobile.html
兼容特性 PhotoSwipe 兼容大量的移动设备以及所有流行的 JavaScript 类库 / 开发框架. 既有基于 jQuery 的版本, 也有不依赖 jQuery 的版本,还有兼容 jQuery Mobile 的版本。当然,All In One,全在源码示例包里。
如何使用 PhotoSwipe 是一个自身独立的 JavaScript 库,可以很方便地集成进你的网站。针对移动浏览器 (webkit) 进行了大量的优化, 当然,对于桌面浏览器,以及 jQueryMobile,在源码包内也提供了相应的版本.
类库引用
调用代码
/* 添加 DOMContentLoaded 事件监听, 类似于 jQuery 的 ready 函数. 默认方式 examples/01-default.html 无缩略图模式请查看. examples/09-exclusive-mode-no-thumbnails.html */ // PhotoSwipe.attach 方法接收 3 个参数 (HTML 元素集合, 可选配置信息, 可选多实例时 string 类型的 ID) document.addEventListener('DOMContentLoaded', function(){ // 设置 PhotoSwipe 绑定为 id 为 Gallery 的容器下的所有标签. 点击就会激活 // 此处的对象,就是 PhotoSwipe 实例,可以使用相应的方法, 例如 show(0),hide() 等. var myPhotoSwipe = Code.PhotoSwipe.attach(window.document.querySelectorAll('#Gallery a'), {enableMouseWheel: false , enableKeyboard: false} ); }, false);
如果使用 jQuery,则调用代码如下:
//jQuery 版, 对应的 js 文件也需要变化 // 示例详见 examples/02-jquery.html $(document).ready(function(){// 此处的对象,就是 PhotoSwipe 实例,可以使用相应的方法, 例如 show(0),hide() 等. var myPhotoSwipe = $("#Gallery a").photoSwipe({enableMouseWheel: false , enableKeyboard: false}); });
HTML 代码
参数说明
1.allowUserZoom: 允许用户双击放大 / 移动方式查看图片. 默认值 = true 2.autoStartSlideshow: 当 PhotoSwipe 激活后, 自动播放幻灯片. 默认值 = false 3.allowRotationOnUserZoom: 只有 iOS 支持 - 允许用户在缩放 / 平移模式下 用手势旋转图像. 默认值 = false 4.backButtonHideEnabled: 按返回键隐藏相册幻灯片. 主要是 Android 和 Blackberry 使用. 支持 BB6, Android v2.1, iOS 4 以及更新版本. 默认值 = true 5.captionAndToolbarAutoHideDelay: 标题栏和工具栏自动隐藏的延迟时间. 默认值为 = 5000(毫秒). 如果设为 0 则不会自动隐藏 (tap / 单击切换显隐) 6.captionAndToolbarFlipPosition: 标题栏和工具栏切换位置 (让 caption 显示在底部而 toolbar 显示在顶部). 默认值 = false 7.captionAndToolbarHide: 隐藏 标题栏和工具栏. 默认值 = false 8.captionAndToolbarOpacity: 标题栏和工具栏 的透明度 (0-1). 默认值 = 0.8 9.captionAndToolbarShowEmptyCaptions: 即使当前图片的标题是空, 也显示标题栏. 默认值 = true 10.cacheMode: 缓存模式, Code.PhotoSwipe.Cache.Mode.normal (默认, 正常) 或者 Code.PhotoSwipe.Cache.Mode.aggressive(激进, 积极). 决定 PhotoSwipe 如何管理图片缓存 cache. 11. Aggressive 模式将会积极地地设置非 "当前,上一张, 下一张" 的图片为空的类型. 对于老版本 iOS 浏览器下的大图片内存溢出将会很有用. 大多数情况下,normal 模式就可以了。 12.doubleTapSpeed: 双击的最大间隔. 默认值 = 300(毫秒) 13.doubleTapZoomLevel: 当用户双击的时候, 放大的倍数, 默认的 "zoom-in"(拉近) 级别. 默认值 = 2.5 14.enableDrag: 允许拖动上一张 / 下一张图片到当前界面. 默认值 = true 15.enableKeyboard: 允许键盘操作 (左右箭头切换,Esc 退出, Enter 自动播放, 空格键 显 / 隐标题栏 / 退出). 默认 = true 16.enableMouseWheel: 允许鼠标滚轮操作. 默认 = true 17.fadeInSpeed: 淡入效果元素的速度 (持续时间), 毫秒. 默认 = 250 18.fadeOutSpeed: 淡出效果元素的速度 (持续时间), 毫秒. 默认 = 250 19.imageScaleMethod: 图片缩放方法 (模式). 可选值: "fit", "fitNoUpscale" 和 "zoom". 模式 "fit" 保证图像适应屏幕. "fitNoUpscale" 和 "fit" 类似但是不会放大图片. "zoom" 将图片全屏, 但有可能图片缩放不是等比例的. 默认 = "fit" 20.invertMouseWheel: 反转鼠标滚轮。默认情况下, 鼠标向下滚动将切换到下一张, 向上切换到上一张 . 默认 = false 21.jQueryMobile: 指示 PhotoSwipe 是否集成进了 jQuery Mobile 项目. 默认情况下, PhotoSwipe will try and work this out for you 22.jQueryMobileDialogHash: jQuery Mobile 的 window,dialog 页面 所使用的 hash 标签。 默认值 = "&ui-state=dialog" 23.loop: 相册是否自动循环. 默认 = true 24.margin: 两张图之间的间隔, 单位是像素. 默认 = 20 25.maxUserZoom: 最大放大倍数. 默认 = 5.0 (设置为 0 将被忽略) 26.minUserZoom: 图像最小的缩小倍数. 默认 = 0.5 (设置为 0 将会忽略) 27.mouseWheelSpeed: 响应鼠标滚轮的灵敏度. 默认 = 500(毫秒) 28.nextPreviousSlideSpeed: 当点击上一张, 下一张按钮后, 延迟多少毫秒执行切换. 默认 = 0 (立即切换) 29.preventHide: 阻止用户关闭 PhotoSwipe. 同时也会隐藏 工具栏上的 "close" 关闭按钮. 在独享的页面使用 (示例是源码中的 examples/08-exclusive-mode.html). 默认 = false 30.preventSlideshow: 阻止自动播放模式. 同时也会隐藏工具栏里的播放按钮. 默认 = false 31.slideshowDelay: 自动播放模式下,多长时间播放下一张. Default = 3000(毫秒) 32.slideSpeed: 图片滑进视图的时间. 默认 = 250(毫秒) 33.swipeThreshold: 手指滑动多少像素才触发一个 swipe 手势事件. 默认 = 50 34.swipeTimeThreshold: 定义触发 swipe(滑动) 手势的最大毫秒数, 太慢了则不会触发滑动,只会拖动当前照片的位置. 默认 = 250 35.slideTimingFunction: 滑动时的 Easing function . 默认 = "ease-out" 36.zIndex: 初始的 zIndex 值. 默认 = 1000 37.enableUIWebViewRepositionTimeout: 检查设备的方向是否改变。默认 = false 38.uiWebViewResetPositionDelay: 定时检查设备的方向是否改变的时间 默认 = 500(毫秒) 39.preventDefaultTouchEvents: 阻止默认的 touch 事件,比如页面滚动。 默认 = true 40.target: 必须是一个合法的 DOM 元素 (如 DIV)。默认是 window(全页面)。而如果是某个低级别的 DOM,则在 DOM 内显示,可能非全屏。
自定义函数
- getToolbar: function() {
- /*返回 要在Toolbar之中显示的HTML字符串*/
- },
- getImageSource: function(el) {
- /* 告诉 gallery如何获取图片的src,
- 默认情况下,gallery假设你使用<a>标签包装了<img>缩略图,而<a>标签的href属性即为完整图片的URL。
- 此时可以使用本方法来返回对应元素的图片的路径。可以是各种各样的。比如rel属性什么的。有jQuery那就更简单了。
- */
- return el.getAttribute('rel');
- },
- getImageCaption: function(el) {
- /**
- 如同 getImageSource 方法一样,此方法返回图片的标题,默认情况下gallery查找图片的alt 属性。
- */
- },
- getImageMetaData: function(el) {
- /**
- 如果你监听了 onDisplayImage,那么你可以通过此函数获取额外的元信息.并在 onDisplayImage中使用
- */
- return {
- longDescription: el.getAttribute(el, 'data-long-description')
- }
- }
针对 android 手机一次点按,会引起一层关闭后, 底上的层依然会触发点击事件的问题,我们的解决方案如下:
- // 在android 手机上多个层次触发点击,我们采用的是用定时器进行拦截
- var event_timeout = 500; // 预防多次事件触发
- // 阻止短时间内连续事件
- var multiClickPrevent = false;
- function preventMultiClick() {
- if (multiClickPrevent) {
- return false;
- }
- multiClickPrevent = true;
- window.setTimeout(function() {
- multiClickPrevent = false;
- },
- event_timeout);
- return true;
- };
- // 适配浏览器
- var useragent = navigator.userAgent;
- var likeIOS = useragent.match(/iPad|iPhone|iPod/i);
- var likeAndroid = useragent.match(/android/i);
- var specialClick = "click";
- if (likeIOS) {
- specialClick = "touchstart click";
- } else if (likeAndroid) {
- specialClick = "touchstart click";
- }
- /示例
- $(".t_right").live(specialClick,function(){
- if(preventMultiClick()){
- / / 执行其他操作
- } else {
- // else 就是拒绝操作啦,可以直接返回 false 之类的
- return false;
- }
- });
- //示例
- $("body").live(specialClick,
- function() {
- if (preventMultiClick()) {
- // 执行其他操作
- }
- });
来源: http://www.phperz.com/article/17/0523/332330.html