欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

手機(jī)端圖片縮放旋轉(zhuǎn)全屏查看PhotoSwipe.js插件實(shí)現(xiàn)

 更新時(shí)間：2016年08月25日 14:55:28   作者：讓心靈-去旅行  
這篇文章主要介紹了手機(jī)端圖片縮放旋轉(zhuǎn)全屏查看PhotoSwipe.js插件實(shí)現(xiàn)，感興趣的小伙伴們可以參考一下

PhotoSwipe 是專(zhuān)為移動(dòng)觸摸設(shè)備設(shè)計(jì)的相冊(cè)/畫(huà)廊.兼容所有iPhone、iPad、黑莓6+,以及桌面瀏覽器.底層實(shí)現(xiàn)基于HTML/CSS/JavaScript,是一款免費(fèi)開(kāi)源的相冊(cè)產(chǎn)品。

為誰(shuí)而用
讓移動(dòng)站點(diǎn)的相冊(cè)體驗(yàn)和原生App一樣的設(shè)計(jì)師和開(kāi)發(fā)者。

絕佳特性
PhotoSwipe提供給用戶(hù)一個(gè)熟悉又直觀的相冊(cè)交互界面。

官方網(wǎng)站
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兼容大量的移動(dòng)設(shè)備以及所有流行的JavaScript類(lèi)庫(kù)/開(kāi)發(fā)框架. 既有基于jQuery的版本,也有不依賴(lài)jQuery的版本，還有兼容jQuery Mobile的版本。當(dāng)然，All In One，全在源碼示例包里。

如何使用
PhotoSwipe是一個(gè)自身獨(dú)立的JavaScript庫(kù)，可以很方便地集成進(jìn)你的網(wǎng)站。針對(duì)移動(dòng)瀏覽器(webkit)進(jìn)行了大量的優(yōu)化,當(dāng)然，對(duì)于桌面瀏覽器，以及jQueryMobile，在源碼包內(nèi)也提供了相應(yīng)的版本.

類(lèi)庫(kù)引用

<!-- photoswipe 之前先引用klass,如果需要提高加載速度,可以給 script 加上 defer 標(biāo)記/屬性-->  
<script type="text/javascript" src="klass.min.js"></script>  
<!-- 重要提示,如果不使用jQuery版本，在IE下面會(huì)出錯(cuò)，當(dāng)然，使用jQuery版本，則需要引入jQuery-->  
<script type="text/javascript" src="code.photoswipe-3.0.5.min.js"></script>   

調(diào)用代碼 

/* 添加DOMContentLoaded 事件監(jiān)聽(tīng),類(lèi)似于jQuery的 ready函數(shù). 
默認(rèn)方式 examples/01-default.html 
無(wú)縮略圖模式請(qǐng)查看.examples/09-exclusive-mode-no-thumbnails.html 
*/  
// PhotoSwipe.attach 方法接收3個(gè)參數(shù)(HTML元素集合,可選配置信息,可選多實(shí)例時(shí)string類(lèi)型的ID)  
document.addEventListener('DOMContentLoaded', function(){  
   //設(shè)置 PhotoSwipe綁定為 id為Gallery的容器下的所有<a>標(biāo)簽.點(diǎn)擊就會(huì)激活  
   // 此處的對(duì)象，就是PhotoSwipe實(shí)例，可以使用相應(yīng)的方法,例如 show(0),hide()等.  
   var myPhotoSwipe = Code.PhotoSwipe.attach( window.document.querySelectorAll('#Gallery a'), { enableMouseWheel: false , enableKeyboard: false } );  
}, false);   

如果使用jQuery，則調(diào)用代碼如下： 

//jQuery 版,對(duì)應(yīng)的js文件也需要變化  
// 示例詳見(jiàn)examples/02-jquery.html  
$(document).ready(function(){  
    // 此處的對(duì)象，就是PhotoSwipe實(shí)例，可以使用相應(yīng)的方法,例如 show(0),hide()等.  
    var myPhotoSwipe = $("#Gallery a").photoSwipe({ enableMouseWheel: false , enableKeyboard: false });  
});   

HTML代碼 

<!-- ul li 之類(lèi)是用于顯示縮略圖的,也可以根據(jù)需要調(diào)整.<a>下面的<img> 元素,即為縮略圖,如果不需要，則src設(shè)置為空即可 -->  
 <ul id="Gallery">  
     <li><a href="images/full/01.jpg"><img src="images/thumb/01.jpg" alt="Image 01" /></a></li>  
     <li><a href="images/full/02.jpg"><img src="images/thumb/02.jpg" alt="Image 02" /></a></li>  
    <li><a href="images/full/03.jpg"><img src="images/thumb/03.jpg" alt="Image 03" /></a></li>  
    <li><a href="images/full/04.jpg"><img src="images/thumb/04.jpg" alt="Image 04" /></a></li>  
    <li><a href="images/full/05.jpg"><img src="images/thumb/05.jpg" alt="Image 05" /></a></li>  
   <li><a href="images/full/06.jpg"><img src="images/thumb/06.jpg" alt="Image 06" /></a></li>  
</ul>   

參數(shù)說(shuō)明

 1.allowUserZoom: 允許用戶(hù)雙擊放大/移動(dòng)方式查看圖片. 默認(rèn)值 = true  
 2.autoStartSlideshow: 當(dāng)PhotoSwipe激活后,自動(dòng)播放幻燈片. 默認(rèn)值 = false  
 3.allowRotationOnUserZoom: 只有 iOS 支持 - 允許用戶(hù)在縮放/平移模式下 用手勢(shì)旋轉(zhuǎn)圖像. 默認(rèn)值  = false  
 4.backButtonHideEnabled: 按返回鍵隱藏相冊(cè)幻燈片. 主要是 Android 和 Blackberry使用. 支持 BB6, Android v2.1, iOS 4 以及更新版本. 默認(rèn)值 = true  
 5.captionAndToolbarAutoHideDelay: 標(biāo)題欄和工具欄自動(dòng)隱藏的延遲時(shí)間. 默認(rèn)值為 = 5000(毫秒). 如果設(shè)為 0 則不會(huì)自動(dòng)隱藏(tap/單擊切換顯隱)  
 6.captionAndToolbarFlipPosition: 標(biāo)題欄和工具欄切換位置(讓 caption顯示在底部而 toolbar顯示在頂部). 默認(rèn)值 = false  
 7.captionAndToolbarHide: 隱藏 標(biāo)題欄和工具欄. 默認(rèn)值  = false  
 8.captionAndToolbarOpacity: 標(biāo)題欄和工具欄 的透明度(0-1). 默認(rèn)值  = 0.8  
 9.captionAndToolbarShowEmptyCaptions: 即使當(dāng)前圖片的標(biāo)題是空,也顯示標(biāo)題欄. 默認(rèn)值 = true  
 10.cacheMode: 緩存模式,Code.PhotoSwipe.Cache.Mode.normal (默認(rèn),正常) 或者 Code.PhotoSwipe.Cache.Mode.aggressive(激進(jìn),積極). 決定 PhotoSwipe 如何管理圖片緩存 cache. 
 11. Aggressive 模式將會(huì)積極地地設(shè)置非 "當(dāng)前，上一張,下一張"的圖片為空的類(lèi)型. 對(duì)于老版本iOS 瀏覽器下的大圖片內(nèi)存溢出將會(huì)很有用. 大多數(shù)情況下，normal模式就可以了。 
 12.doubleTapSpeed: 雙擊的最大間隔. 默認(rèn)值 = 300(毫秒) 
 13.doubleTapZoomLevel: 當(dāng)用戶(hù)雙擊的時(shí)候,放大的倍數(shù), 默認(rèn)的 "zoom-in"(拉近) 級(jí)別. 默認(rèn)值 = 2.5 
 14.enableDrag: 允許拖動(dòng)上一張/下一張圖片到當(dāng)前界面. 默認(rèn)值 = true 
 15.enableKeyboard: 允許鍵盤(pán)操作(左右箭頭切換，Esc退出,Enter自動(dòng)播放,空格鍵 顯/隱標(biāo)題欄/退出). 默認(rèn) = true 
 16.enableMouseWheel: 允許鼠標(biāo)滾輪操作. 默認(rèn) = true 
 17.fadeInSpeed: 淡入效果元素的速度(持續(xù)時(shí)間),毫秒. 默認(rèn) = 250 
 18.fadeOutSpeed: 淡出效果元素的速度(持續(xù)時(shí)間),毫秒. 默認(rèn) = 250 
 19.imageScaleMethod: 圖片縮放方法(模式). 可選值: "fit", "fitNoUpscale" 和 "zoom". 模式"fit" 保證圖像適應(yīng)屏幕. "fitNoUpscale" 和 "fit"類(lèi)似但是不會(huì)放大圖片. "zoom"將圖片全屏, 但有可能圖片縮放不是等比例的. 默認(rèn) = "fit" 
 20.invertMouseWheel: 反轉(zhuǎn)鼠標(biāo)滾輪。默認(rèn)情況下,鼠標(biāo)向下滾動(dòng)將切換到下一張,向上切換到上一張 . 默認(rèn) = false 
 21.jQueryMobile: 指示 PhotoSwipe 是否集成進(jìn)了 jQuery Mobile 項(xiàng)目. 默認(rèn)情況下, PhotoSwipe will try and work this out for you 
 22.jQueryMobileDialogHash: jQuery Mobile的window,dialog頁(yè)面 所使用的hash標(biāo)簽。 默認(rèn)值 = "&ui-state=dialog" 
 23.loop: 相冊(cè)是否自動(dòng)循環(huán). 默認(rèn) = true 
 24.margin: 兩張圖之間的間隔,單位是像素. 默認(rèn) = 20 
 25.maxUserZoom: 最大放大倍數(shù). 默認(rèn) = 5.0 (設(shè)置為0將被忽略) 
 26.minUserZoom: 圖像最小的縮小倍數(shù). 默認(rèn) = 0.5 (設(shè)置為0將會(huì)忽略) 
 27.mouseWheelSpeed: 響應(yīng)鼠標(biāo)滾輪的靈敏度. 默認(rèn) = 500(毫秒) 
 28.nextPreviousSlideSpeed: 當(dāng)點(diǎn)擊上一張,下一張按鈕后,延遲多少毫秒執(zhí)行切換. 默認(rèn) = 0 (立即切換) 
 29.preventHide: 阻止用戶(hù)關(guān)閉 PhotoSwipe. 同時(shí)也會(huì)隱藏 工具欄上的"close"關(guān)閉按鈕. 在獨(dú)享的頁(yè)面使用 (示例是源碼中的 examples/08-exclusive-mode.html). 默認(rèn) = false 
 30.preventSlideshow: 阻止自動(dòng)播放模式. 同時(shí)也會(huì)隱藏工具欄里的播放按鈕. 默認(rèn) = false 
 31.slideshowDelay: 自動(dòng)播放模式下，多長(zhǎng)時(shí)間播放下一張. Default = 3000(毫秒) 
 32.slideSpeed: 圖片滑進(jìn)視圖的時(shí)間. 默認(rèn) = 250(毫秒) 
 33.swipeThreshold: 手指滑動(dòng)多少像素才觸發(fā)一個(gè)  swipe 手勢(shì)事件. 默認(rèn) = 50 
 34.swipeTimeThreshold: 定義觸發(fā)swipe(滑動(dòng))手勢(shì)的最大毫秒數(shù),太慢了則不會(huì)觸發(fā)滑動(dòng)，只會(huì)拖動(dòng)當(dāng)前照片的位置. 默認(rèn) = 250 
 35.slideTimingFunction: 滑動(dòng)時(shí)的 Easing function . 默認(rèn) = "ease-out" 
 36.zIndex: 初始的zIndex值. 默認(rèn) = 1000 
 37.enableUIWebViewRepositionTimeout: 檢查設(shè)備的方向是否改變。默認(rèn) = false 
 38.uiWebViewResetPositionDelay: 定時(shí)檢查設(shè)備的方向是否改變的時(shí)間 默認(rèn) = 500(毫秒) 
 39.preventDefaultTouchEvents: 阻止默認(rèn)的touch事件，比如頁(yè)面滾動(dòng)。 默認(rèn) = true 
 40.target: 必須是一個(gè)合法的DOM元素(如DIV)。默認(rèn)是window(全頁(yè)面)。而如果是某個(gè)低級(jí)別的DOM，則在DOM內(nèi)顯示，可能非全屏。   

自定義函數(shù)

getToolbar: function(){ 
 /*返回 要在Toolbar之中顯示的HTML字符串*/ 
 }, 
 getImageSource: function(el){ 
 /* 告訴 gallery如何獲取圖片的src, 
 默認(rèn)情況下,gallery假設(shè)你使用<a>標(biāo)簽包裝了<img>縮略圖，而<a>標(biāo)簽的href屬性即為完整圖片的URL。 
 此時(shí)可以使用本方法來(lái)返回對(duì)應(yīng)元素的圖片的路徑?？梢允歉鞣N各樣的。比如rel屬性什么的。有jQuery那就更簡(jiǎn)單了。 
 */ 
 return el.getAttribute('rel'); 
 }, 
 getImageCaption: function(el){ 
 /** 
 如同 getImageSource 方法一樣，此方法返回圖片的標(biāo)題，默認(rèn)情況下gallery查找圖片的alt 屬性。 
 */ 
 }, 
 getImageMetaData: function(el){ 
 /** 
 如果你監(jiān)聽(tīng)了 onDisplayImage,那么你可以通過(guò)此函數(shù)獲取額外的元信息.并在 onDisplayImage中使用 
 */ 
 return { 
  longDescription: el.getAttribute(el, 'data-long-description') 
 } 
}

針對(duì)android 手機(jī)一次點(diǎn)按，會(huì)引起一層關(guān)閉后,底上的層依然會(huì)觸發(fā)點(diǎn)擊事件的問(wèn)題，我們的解決方案如下:

// 在android 手機(jī)上多個(gè)層次觸發(fā)點(diǎn)擊,我們采用的是用定時(shí)器進(jìn)行攔截 
 
var event_timeout = 500;// 預(yù)防多次事件觸發(fā) 
// 阻止短時(shí)間內(nèi)連續(xù)事件 
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()){ 
 // 執(zhí)行其他操作 
 } else { 
 // else 就是拒絕操作啦,可以直接返回 false 之類(lèi)的 
 return false; 
 } 
 }); 
//示例 
$("body").live(specialClick,function(){ 
 if(preventMultiClick()){ 
 // 執(zhí)行其他操作 
 } 
 });

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論