JavaScript實現(xiàn)相冊彈窗功能（zepto.js)
更新時間：2016年06月21日 14:25:35 作者：木耳休心
這篇文章主要介紹了JavaScript基于zepto.js實現(xiàn)相冊彈窗功能的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下
先看看彈窗效果，如下：
//放大圖片
$(page).on('click','.popupImage img',function () {
var that = $(this);
that.popupImage({
this:that,
width:"200px"
})
});
//相冊彈窗
$.fn.popupImage = function (obj) {
var $this = obj.this;
var sj_w = $this[0].naturalHeight;
var src = $this.attr('src');
var h = $('body').height();
var w = $('body').width();
var padding = 10;
var shadeW = w - padding*2;
var img = '',shade = '';
img = '<div class="popup-image" style="position:absolute; top:0; left:0; z-index: 999999; padding:10px '+padding+'px; width: '+w+'px; height:'+h+'px; line-height: '+h+'px; text-align: center;" >' +
'<img src="'+src+'" style="max-width: '+shadeW+'px"/></div>';
shade = '<div class="shade" style="position:absolute; top:0; left:0; width: '+w+'px; height:'+h+'px;background: #000; z-index: 999990; opacity: .8;"></div>';
$('body').append(shade);
$('body').append(img);
$('.popup-image').on('click',function () {
$('.popup-image').remove();
$('.shade').remove();
})
};
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
uniapp開發(fā)小程序的開發(fā)規(guī)范總結(jié)
uni-app 是一個使用 vue.js 開發(fā)跨平臺應(yīng)用的前端框架,下面這篇文章主要給大家介紹了關(guān)于uniapp開發(fā)小程序的開發(fā)規(guī)范,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-07-07
微信JS-SDK自定義分享功能實例詳解【分享給朋友/分享到朋友圈】
這篇文章主要介紹了微信JS-SDK自定義分享功能,結(jié)合實例形式分析了基于JS-SDK接口實現(xiàn)的分享給朋友及分享到朋友圈等功能的相關(guān)配置文件與數(shù)據(jù)操作技巧,需要的朋友可以參考下2016-11-11
微信小程序開發(fā)注意指南和優(yōu)化實踐(小結(jié))
這篇文章主要介紹了微信小程序開發(fā)注意指南和優(yōu)化實踐，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-06-06
這篇文章主要為大家詳細介紹了如何簡單實現(xiàn)bootstrap導航效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-02-02
這篇文章主要為大家介紹了如何使npm-scripts更好維護的配置方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-06-06
對象無length屬性時IE6/IE7中無法將其轉(zhuǎn)換成偽數(shù)組(ArrayLike)
對象無length屬性時IE6/7中無法將其轉(zhuǎn)換成偽數(shù)組(ArrayLike) 的解決方法，需要的朋友可以參考下。2011-07-07
問題產(chǎn)生需求：做OA時弄到 備忘這個功能，想以日歷的形式展現(xiàn)2012-01-01
select沒有只讀屬性，所以需要在select外面包含一個span，通過js來改變,需要的朋友可以參考下2014-04-04
JavaScript?映射器?array.flatMap()
這篇文章主要介紹了JavaScript?映射器?array.flatMap()，array.flatMap()是一個映射函數(shù)，它接收一個數(shù)組和一個映射函數(shù)，然后返回一個新的映射數(shù)組，下面進入文章了解具體內(nèi)容2022-02-02
本文主要介紹了three.js中物體的燈光與陰影設(shè)置，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-07-07