標籤：bottom 左右 回調 非同步 官網 tle china border photo
<!doctype html><html><head><title>QQ空間圖片瀏覽代碼</title><script src="layer/jquery.js?v=1.83.min"></script><script src="layer/layer.min.js"></script><style>html{background-color:#E3E3E3; font-size:14px; color:#000; font-family:‘微軟雅黑‘}a,a:hover{ text-decoration:none;}pre{font-family:‘微軟雅黑‘}.box{padding:20px; background-color:#fff; margin:50px 100px; border-radius:5px;}.box a{padding-right:15px;}#about_hide{display:none}.layer_text{background-color:#fff; padding:20px;}.layer_text p{margin-bottom: 10px; text-indent: 2em; line-height: 23px;}.button{display:inline-block; *display:inline; *zoom:1; line-height:30px; padding:0 20px; background-color:#56B4DC; color:#fff; font-size:14px; border-radius:3px; cursor:pointer; font-weight:normal;}.imgs img{width:300px;padding:0 30px 30px;}</style></head><body><div class="box"> <h2 style="padding-bottom:20px;">layer1.8相簿模組，點擊下述圖片試試</h2> <div id="imgs" class="imgs"> <img src="images/1.jpg" layer-pname="IC - 1"> <img src="images/2.jpg" layer-pname="IC - 2"> <img src="images/3.jpg" layer-pname="IC - 3"> <img src="images/4.jpg" layer-pname="IC - 4"> </div></div><script>;!function(){layer.use(‘extend/layer.ext.js‘, function(){ //初始載入即調用，所以需放在ext回調裡 layer.ext = function(){ layer.photosPage({ html:‘<div style="padding:20px;">這裡傳入自訂的html<p>相簿支援左右方向鍵，支援Esc關閉</p><p>另外還可以通過非同步返回json實現相簿。更多用法詳見官網。</p><p>‘+ unescape("%u7D20%u6750%u5BB6%u56ED%20-%20sc.chinaz.com") +‘</p><p id="change"></p></div>‘, title: ‘快捷模式-擷取頁面元素包含的所有圖片‘, id: 100, //相簿id，可選 parent:‘#imgs‘ }); };});}();</script></body></html>
layer.js實現相簿預覽
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
