zoukankan      html  css  js  c++  java
  • 相册弹窗(基于zepto.js)

     1     //放大图片
     2         $(page).on('click','.popupImage img',function () {
     3             var that = $(this);
     4             that.popupImage({
     5                 this:that,
     6                 "200px"
     7             })
     8         });
     9 
    10   //相册弹窗
    11     $.fn.popupImage = function (obj) {
    12         var $this = obj.this;
    13         var sj_w = $this[0].naturalHeight;
    14         var src = $this.attr('src');
    15         var h = $('body').height();
    16         var w = $('body').width();
    17         var padding = 10;
    18         var shadeW = w - padding*2;
    19         var img = '',shade = '';
    20         
    21         img = '<div class="popup-image" style="position:absolute; top:0; left:0; z-index: 999999; padding:10px '+padding+'px;  '+w+'px; height:'+h+'px; line-height: '+h+'px; text-align: center;" >' +
    22             '<img src="'+src+'" style="max- '+shadeW+'px"/></div>';
    23         shade = '<div class="shade" style="position:absolute; top:0; left:0;   '+w+'px; height:'+h+'px;background: #000; z-index: 999990; opacity: .8;"></div>';
    24 
    25         $('body').append(shade);
    26         $('body').append(img);        
    27 
    28         $('.popup-image').on('click',function () {
    29             $('.popup-image').remove();
    30             $('.shade').remove();
    31         })
    32 
    33     };
  • 相关阅读:
    Missing Ranges
    springboot整合quartz
    Quartz01
    springboot整合jap
    springboot集成redis
    springboot整合drui、mybatis、pagehelper
    springboot模板
    SpringBoot入门
    Java注解简介
    Git02(ssh key的配置和使用、idea配置并使用Git)
  • 原文地址:https://www.cnblogs.com/zhangxusong/p/5603487.html
Copyright © 2011-2022 走看看