//放大图片
$(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. Android模拟器avd的创建、使用和调试相关命令

    1.创建AVD命令:android-sdk-windows\tools目录下面有android命令  android list 列出当前系统中已安装的Android版本以及已安装的AVD(Androi ...

  2. iOS-制作Framework

    步骤 打开Xcode,创建新工程.手下留情,请先看图! 在TARGETS下选中工程,在Build Settings下更改几个参数. 更改参数 在Architectures下增加armv7s,并选中.将 ...

  3. C++ (P70—P96)

    1 类的成员默认为私有模型 2 类的声明内不允许对数据成员进行初始化 3 类的成员函数,如果在类外定义,只需在函数类型之前加上inline就为内联函数了,如果在类内定义函数则该函数自动成为内联成员函数 ...

  4. Android_ViewFlipper

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

  5. 【转】Git代码提交最佳实践

      GIT Commit Good Practice The following document is based on experience doing code development, bug ...

  6. 关于SWT常用组件(按钮,复选框,单选框(Button类))

    Button是SWT中最常用的组件.Button类的继承关系图: Button类的构造方法是newe Button(Composite parent,int style)它有两个参数: 第一个参数:是 ...

  7. 关于常用的git命令列表

    我博客园中所写的git内容几乎都是看的蒋鑫老师的<git权威指南>这本书实在太好了. 常用的Git命令. git add  添加到暂存区 git add interactive  交互式添 ...

  8. [原]Unity3d中奇怪的编译错误

    整理项目,重新build时出现一些问题,这些代码在原项目中都是可以运行的. 错误信息如下: Assets/XXXXX.cs(79,35): error CS0103: The name `NNNNNN ...

  9. 针对SharePointFarm场时安装部署OWA的步骤

    下面文章列出针对SharePointFarm场时安装部署OWA的步骤: http://blogs.technet.com/b/meamcs/archive/2013/03/27/office-web- ...

  10. hadoop-2.5安装与配置

    安装之前准备4台机器:bluejoe0,bluejoe4,bluejoe5,bluejoe9 bluejoe0作为master,bluejoe4,5,9作为slave bluejoe0作为nameno ...