相册弹窗(基于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 ...
随机推荐
- Hdu 5444 Elven Postman dfs
Elven Postman Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://acm.hdu.edu.cn/showproblem.php?pid= ...
- HDU 5433 Xiao Ming climbing dp
Xiao Ming climbing Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://bestcoder.hdu.edu.cn/contests/ ...
- JFinal的Shiro权限管理插件--玛雅牛 / JFinalShiro
http://git.oschina.net/myaniu/jfinalshiroplugin JFinalShiroPlugin JFinal的Shiro插件,实现权限管理. 升级说明 1)支持JF ...
- ios开发——笔记篇
:开关 BOOL isopen = !isopen; //View @property (nonatomic, assign) BOOL open;//模型属性 self.group.open = ! ...
- [Effective C++ --019]设计class犹如设计type
前言 我们在编写程序的时候,无论哪一种语言,总是会告诉你这种语言应该有的类型.我们将它们直接拿来使用,可是从来没有考虑过这些类到底是怎么设计出来的! 所幸的是:在OOP中,每当我们定义一个新的clas ...
- 多边形节点编码python脚本
# -*- coding: cp936 -*-#本脚以最左边.Y值最大的点为起始点按顺时针为多边形节点编码,生成一个包含记录编码值和多边形FID字段的点要素类 #注意:#1.本脚本作为arcgis脚本 ...
- 2014年6月5日 深圳 IBM 安全解决方案会议通知
2014年6月5日 深圳 IBM 安全解决方案会议通知 http://gdtesting.com/news.php?id=191 时间: 2014年6月5日 地点: 深圳大中华喜来登 议程: IBM安 ...
- Python 基础【第九篇】运算
Python的运算符比较通俗和其他语言的几乎没什么区别 一.算数运算符 " + " 加法运算 >>> 1+3 4 加法运算扩展 "增强赋值操作" ...
- 关于原生AJAX和jQueryAJAX的编程
1.回顾传统Ajax开发步骤 ①:创建xmlHttpRequest对象 var xmlHttp = creatHttpRequest(); ②:绑定回调函数 xmlHttp.onreadystatec ...
- 使用开源库PhotoView
一.下载地址:https://github.com/chrisbanes/PhotoView 点击DownLoad ZIP,进行下载. 二.解压,然后复制PhotoView-master\librar ...