相册弹窗(基于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 ...
 
随机推荐
- struts中的helloword(1)
			
注:文章中的所有图片均在附件中明白表明 首先要安装jdk1.6以及tomcat6和myeclipse 对于这些配置的安装 这里不再细细说明 其次是下载struts2 第一步:去struts21 ...
 - poj 3984 迷宫问题 bfs
			
学会这道水题之后我懂得了不少哈,首先水题也能学到不少知识,尤其像我这样刚入门的小菜鸟,能学到一些小技巧. 然后就是可以从别人的代码里学到不一样的思路和想法. 这题就是求最短的路径,首先想到就是用bfs ...
 - 【问题汇总】ListView的FooterView设置可见性的问题
			
ListView的FooterView一般用来给用户展示一些提示信息. 正常情况下,是这么使用的.代码例如以下: // footer footerLayout = new PullLoadingLay ...
 - 进程环境之C程序的存储空间布局
			
从历史上讲,C程序一直由下面几部分组成: 正文段.这是由CPU执行的机器指令部分.通常,正文段是可共享的,所以即使是频繁执行的程序(如文本编辑器.C编译器和shell等)在存储器中也只需有一个副本,另 ...
 - 十、Socket之UDP编程
			
UDP基础知识 UDP(User Datagram Protocol,用户数据报协议)是一个简单的.面向数据报的无连接协议,提供了快速但不一定可靠的传输服务. UDP与TCP相比主要有以下区别. 1. ...
 - iOS 本地自动打包工具
			
1.为什么要自动打包工具? 每修改一个问题,测试都让你打包一个上传fir , 你要clean -> 编译打包 -> 上传fir -> 通知测试.而且打包速度好慢,太浪费时间了.如果有 ...
 - 大设计时代:针对超大网页布局的一些思考和建议 [Aseoe]
			
对于有些设计项目来说,老套的设计模式并不奏效,你需要设计的大点,要比以往设计的元素还要大,因此就非常适合采用超大网页布局.无论是采用大块大块的背景照片还是背景视频,超大网页布局的效果非常显著:极具视觉 ...
 - C++ (P70—P96)
			
1 类的成员默认为私有模型 2 类的声明内不允许对数据成员进行初始化 3 类的成员函数,如果在类外定义,只需在函数类型之前加上inline就为内联函数了,如果在类内定义函数则该函数自动成为内联成员函数 ...
 - NekoHTML and Dom4j
			
http://pro.ctlok.com/2010/07/java-read-html-dom4j-nekohtml.html package com.ctlok.pro; import java.i ...
 - Java多线程中的join()方法
			
一.join()方法介绍 join() 定义在Thread.java中.join()方法把指定的线程加入到当前线程,可以将两个交替执行的线程合并为顺序执行的线程.比如在线程B中调用了线程A的join( ...