JavaScript實(shí)現(xiàn)相冊(cè)彈窗功能（zepto.js)

更新時(shí)間：2016年06月21日 14:25:35 作者：木耳休心

這篇文章主要介紹了JavaScript基于zepto.js實(shí)現(xiàn)相冊(cè)彈窗功能的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

先看看彈窗效果，如下：

//放大圖片
  $(page).on('click','.popupImage img',function () {
   var that = $(this);
   that.popupImage({
    this:that,
    width:"200px"
   })
  });

　　//相冊(cè)彈窗
 $.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();
  })

 };

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

您可能感興趣的文章:

相關(guān)文章

uniapp開發(fā)小程序的開發(fā)規(guī)范總結(jié)
uni-app 是一個(gè)使用 vue.js 開發(fā)跨平臺(tái)應(yīng)用的前端框架,下面這篇文章主要給大家介紹了關(guān)于uniapp開發(fā)小程序的開發(fā)規(guī)范,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-07-07
微信JS-SDK自定義分享功能實(shí)例詳解【分享給朋友/分享到朋友圈】
這篇文章主要介紹了微信JS-SDK自定義分享功能,結(jié)合實(shí)例形式分析了基于JS-SDK接口實(shí)現(xiàn)的分享給朋友及分享到朋友圈等功能的相關(guān)配置文件與數(shù)據(jù)操作技巧,需要的朋友可以參考下
2016-11-11
微信小程序開發(fā)注意指南和優(yōu)化實(shí)踐(小結(jié))
這篇文章主要介紹了微信小程序開發(fā)注意指南和優(yōu)化實(shí)踐，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2019-06-06
簡(jiǎn)單實(shí)現(xiàn)bootstrap導(dǎo)航效果
這篇文章主要為大家詳細(xì)介紹了如何簡(jiǎn)單實(shí)現(xiàn)bootstrap導(dǎo)航效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-02-02
一文詳解如何使npm-scripts更好維護(hù)的配置方法
這篇文章主要為大家介紹了如何使npm-scripts更好維護(hù)的配置方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-06-06
對(duì)象無(wú)length屬性時(shí)IE6/IE7中無(wú)法將其轉(zhuǎn)換成偽數(shù)組(ArrayLike)
對(duì)象無(wú)length屬性時(shí)IE6/7中無(wú)法將其轉(zhuǎn)換成偽數(shù)組(ArrayLike) 的解決方法，需要的朋友可以參考下。
2011-07-07
js日歷功能對(duì)象
問(wèn)題產(chǎn)生需求：做OA時(shí)弄到備忘這個(gè)功能，想以日歷的形式展現(xiàn)
2012-01-01
用js設(shè)置下拉框?yàn)橹蛔x的小技巧
select沒有只讀屬性，所以需要在select外面包含一個(gè)span，通過(guò)js來(lái)改變,需要的朋友可以參考下
2014-04-04
JavaScript?映射器?array.flatMap()
這篇文章主要介紹了JavaScript?映射器?array.flatMap()，array.flatMap()是一個(gè)映射函數(shù)，它接收一個(gè)數(shù)組和一個(gè)映射函數(shù)，然后返回一個(gè)新的映射數(shù)組，下面進(jìn)入文章了解具體內(nèi)容
2022-02-02
three.js中物體的燈光與陰影設(shè)置
本文主要介紹了three.js中物體的燈光與陰影設(shè)置，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2023-07-07