//放大图片
$(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();
}) };

相册弹窗(基于zepto.js)的更多相关文章

  1. 加减号改变input[type=number]的数值,基于[zepto.js]

    通过点击加减号可以更改input的数值,样式如下图: 具体的html代码如下: <div class="xh-lxx-cart-count1"> <span cl ...

  2. 上传图片(基于zepto.js)

    效果如下: <div class="otherPic"> <div id="showOtherImage"></div> & ...

  3. 省市选择(基于zepto.js)

    效果如下: <div class="clList overflow-h mt75"> <select class="pull-left cl-35 se ...

  4. zepto.js 处理Touch事件(实例)

    处理Touch事件能让你了解到用户的每一根手指的位置,在touch事件触发的时候产生,可以通过touch event handler的event对象取到,如果基于zepto.js开发,一般是通过eve ...

  5. zepto.js swipe实现触屏tab菜单

    今天我们来说下zepto.js,有兴趣的朋友可以先进这个网站“http://zeptojs.com/” ,这个可以说是手机里的jquery,但是它取消了hover,加上了swipe及tap这两个触屏功 ...

  6. zepto.js 处理Touch事件

    处 理Touch事件能让你了解到用户的每一根手指的位置,在touch事件触发的时候产生,可以通过touch event handler的event对象取到,如果基于zepto.js开发,一般是通过ev ...

  7. 怎么使用zepto.js的tap事件引起的探索

    前言:   在使用zepto.js之前,你首先要知道它是什么?为什么要使用它?以及它和jquery有什么区别? ①:简单来说zepto是一个轻量级的针对现代高级浏览器的JavaScript库, 它与j ...

  8. zepto.js的touch模块

     touch库实现了什么和引入背景 touch模块是基于zepto.js的. click事件在移动端上会有 300ms 的延迟,同时因为需要 长按 , 双触击 等富交互,所以我们通常都会引入类似 ze ...

  9. Zepto.js touch,tap增加 touch模块深入分析

    1. touch库实现了什么和引入背景 click事件在移动端上会有 300ms 的延迟,同时因为需要 长按 , 双触击 等富交互,所以我们通常都会引入类似 zepto 这样的库.zepto 中tou ...

随机推荐

  1. 【32】确定你的public继承塑模出Is-A关系

    1.public继承表示Is-A关系,也就是满足里氏代换.与之相对应的,private继承表示根据某物实现出,不满足里氏代换.子类对象初始化父类引用,编译通不过. 2.考虑下面的需求,企鹅继承鸟,Bi ...

  2. 使用Go语言两三事

    使用Go语言两三事,在网上看到的总结的很不错哦,转自http://www.cnblogs.com/sevenyuan/archive/2013/02/27/2935887.html 一.channel ...

  3. iOS-推送通知

    推送通知可以做3件事:(1)文字信息(2)一种声音 (3)一个徽章的标记号(第几条消息..) 推送通知流程  (app应用程序--->iOS 设备--->APNS(apple服务器)--- ...

  4. android学习日记19--四大组件之BroadcastReciver(广播接收者)

    二.BroadcastReciver(广播接收者) 1.简述 BroadcastReciver位于android.content包下,主要用于对广播消息(Intent)的过滤并响应的控件.可以理解为全 ...

  5. android133 360 06 一键锁频,清楚数据

    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools= ...

  6. iOS给背景添加点击事件

    当点击背景的时候出发事件,或者跳转界面或者产生其他的响应 -(void)viewDidLoad { UIImageView * imageView  = [UIImageView alloc]init ...

  7. 在android的spinner中,实现取VALUE值和TEXT值

    为了实现在android的spinner实现取VALUE值和TEXT值,我尝试过好些办法,在网上查的资料,都是说修改适配器,刚开始我也是通过修改适配器的方法来做的,但是如果一个activity有多个s ...

  8. javascript原型链简单的理解

    在JavaScript中,一共有两种类型的值,原始值和对象值.每个对象都有一个内部属性[prototype],我们通常称之为原型.原型的值可以是一个对象,也可以是null.当然也可能是一个值,如果它的 ...

  9. 关于Git的暂存区这个概念的理解.

    Git中的暂存区成为stage或者是index.可以理解成一个"提交任务".Git暂存区是Git最成功的设计之一,但是也是最难理解的. 暂存区是一个介于工作区和版本库的中间状态.当 ...

  10. js动态生成按钮,页面用DIV简单布局

    今天朋友让我忙帮给写个页面,由于时间紧破,所以没有完善,暂时先贴出来,以后有时间了在做修改 <!DOCTYPE html><html><head><title ...