//放大图片
$(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. 有关AES加密的问题

    遇到一个项目,需要用AES加密密码,android的已经写好了,java源码: private static final String AES_OPTIONS = "AES/ECB/PKCS ...

  2. 【55】让自己熟悉Boost

    1.网址:http://boost.org 2.有很多C++组织和网站,但是Boost库有两个优势:a.和标准委员会关系密切:b.加入C++标准的各种功能的测试场.

  3. PHP 环境塔建与数据类型转换

    手动塔建PHP开发环境 安装php c:\apps\php 安装apache c:\apps\apache 1.配制apache 配制c:\apps\apache\conf\httpd.conf Do ...

  4. [原创]javascript prototype 对象 函数 <精简的美丽......>

    精简的美丽...... javascript prototype 对象 函数 在javascript中我们都知道创建一个对象使用如下代码var x = {}对象可以拥有属性和方法var x = {   ...

  5. PAT 1010

    1010. Radix (25) Given a pair of positive integers, for example, 6 and 110, can this equation 6 = 11 ...

  6. 【大坑】DataGridView多线程更新修改Cell单元格卡死

    最新发现是Column的AutoSizeMode设置为AllCell调整宽度而造成的卡顿,还有就是在现在里面使用Invoke用匿名函数闭包的形式访问For循环的i变量值会不正确导致找不到索引而造成卡顿 ...

  7. DEM渲染洼地淹没图(转)

    http://blog.csdn.net/kikitamoon/article/details/18700555 首先要准备基础数据,一张DEM栅格图. 然后将掩膜水位以下的数据提取出来以备后用.这里 ...

  8. c++下new与delete基础用法

    delete 释放new分配的单个对象指针指向的内存 delete[] 释放new分配的对象数组指针指向的内存那么,按照教科书的理解,我们看下下面的代码: ]; delete a; //方式1 del ...

  9. JFinal极速开发实战-业务功能开发-通用表单验证器

    提交表单数据时,需要经过前端的验证才能提交到后台,而后台的验证器再做一道数据的校验,成功之后才能进入action进行业务数据的处理. 在表单数据的验证中,数据类型的验证还是比较固定的.首先是对录入数据 ...

  10. C++的三大特性之一继承

    一.继承的相关基本概念 1.继承的定义     在C++中,可以使用继承来使新类得到已定义的一些类中的特性,这就好比与孩子从父亲母亲得到遗传类似,所以我们称原有的类为基类或父类,用原有类来生成新的类的 ...