相册弹窗(基于zepto.js)

//放大图片
$(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)的更多相关文章
- 加减号改变input[type=number]的数值,基于[zepto.js]
通过点击加减号可以更改input的数值,样式如下图: 具体的html代码如下: <div class="xh-lxx-cart-count1"> <span cl ...
- 上传图片(基于zepto.js)
效果如下: <div class="otherPic"> <div id="showOtherImage"></div> & ...
- 省市选择(基于zepto.js)
效果如下: <div class="clList overflow-h mt75"> <select class="pull-left cl-35 se ...
- zepto.js 处理Touch事件(实例)
处理Touch事件能让你了解到用户的每一根手指的位置,在touch事件触发的时候产生,可以通过touch event handler的event对象取到,如果基于zepto.js开发,一般是通过eve ...
- zepto.js swipe实现触屏tab菜单
今天我们来说下zepto.js,有兴趣的朋友可以先进这个网站“http://zeptojs.com/” ,这个可以说是手机里的jquery,但是它取消了hover,加上了swipe及tap这两个触屏功 ...
- zepto.js 处理Touch事件
处 理Touch事件能让你了解到用户的每一根手指的位置,在touch事件触发的时候产生,可以通过touch event handler的event对象取到,如果基于zepto.js开发,一般是通过ev ...
- 怎么使用zepto.js的tap事件引起的探索
前言: 在使用zepto.js之前,你首先要知道它是什么?为什么要使用它?以及它和jquery有什么区别? ①:简单来说zepto是一个轻量级的针对现代高级浏览器的JavaScript库, 它与j ...
- zepto.js的touch模块
touch库实现了什么和引入背景 touch模块是基于zepto.js的. click事件在移动端上会有 300ms 的延迟,同时因为需要 长按 , 双触击 等富交互,所以我们通常都会引入类似 ze ...
- Zepto.js touch,tap增加 touch模块深入分析
1. touch库实现了什么和引入背景 click事件在移动端上会有 300ms 的延迟,同时因为需要 长按 , 双触击 等富交互,所以我们通常都会引入类似 zepto 这样的库.zepto 中tou ...
随机推荐
- Android模拟器avd的创建、使用和调试相关命令
1.创建AVD命令:android-sdk-windows\tools目录下面有android命令 android list 列出当前系统中已安装的Android版本以及已安装的AVD(Androi ...
- iOS-制作Framework
步骤 打开Xcode,创建新工程.手下留情,请先看图! 在TARGETS下选中工程,在Build Settings下更改几个参数. 更改参数 在Architectures下增加armv7s,并选中.将 ...
- C++ (P70—P96)
1 类的成员默认为私有模型 2 类的声明内不允许对数据成员进行初始化 3 类的成员函数,如果在类外定义,只需在函数类型之前加上inline就为内联函数了,如果在类内定义函数则该函数自动成为内联成员函数 ...
- Android_ViewFlipper
xml: <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:t ...
- 【转】Git代码提交最佳实践
GIT Commit Good Practice The following document is based on experience doing code development, bug ...
- 关于SWT常用组件(按钮,复选框,单选框(Button类))
Button是SWT中最常用的组件.Button类的继承关系图: Button类的构造方法是newe Button(Composite parent,int style)它有两个参数: 第一个参数:是 ...
- 关于常用的git命令列表
我博客园中所写的git内容几乎都是看的蒋鑫老师的<git权威指南>这本书实在太好了. 常用的Git命令. git add 添加到暂存区 git add interactive 交互式添 ...
- [原]Unity3d中奇怪的编译错误
整理项目,重新build时出现一些问题,这些代码在原项目中都是可以运行的. 错误信息如下: Assets/XXXXX.cs(79,35): error CS0103: The name `NNNNNN ...
- 针对SharePointFarm场时安装部署OWA的步骤
下面文章列出针对SharePointFarm场时安装部署OWA的步骤: http://blogs.technet.com/b/meamcs/archive/2013/03/27/office-web- ...
- hadoop-2.5安装与配置
安装之前准备4台机器:bluejoe0,bluejoe4,bluejoe5,bluejoe9 bluejoe0作为master,bluejoe4,5,9作为slave bluejoe0作为nameno ...