相册弹窗(基于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 5446 Unknown Treasure lucas和CRT
Unknown Treasure Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://acm.hdu.edu.cn/showproblem.php?p ...
- Eclipse 开发WEB项目所遇问题 WebContent WebRoot
原文:http://blog.sina.com.cn/s/blog_525960510100jo0j.html 最近在做Web 项目时,新建了一个WEB 项目,如webdemo,eclipse默认的b ...
- java_jdbc_反射
package cn.itcast.Reflect; import java.lang.reflect.Constructor; import java.lang.reflect.Field; imp ...
- OC中字典:NSDictionary类是如何使用的
字典就是关键字及其定义(描述)的集合.Cocoa中的实现字典的集合NSDictionary在给定的关键字(通常是一个NSString)下存储一个数值(可以是任何类型的对象).然后你就可以用这个关键字来 ...
- [置顶] Objective-C开发环境介绍以及Cocoa,以及第一个程序
Objective-C 起源与发展 Brad J. Cox designed the Objective-C language in the early 1980 . 布兰德于1980年设计的 ...
- Linux上安装Squall
Squall是Storm之上的类SQL查询工具,能够将类SQL语句转换成topology,然后提交给Storm运行. 安装Squall前要先安装Java和sbt(simple build tool), ...
- symonfy 项目根目录下没有 bin/console 文件的解决方法
“Could not open input file: bin/console” Error comes when try to Run the Symfony Application 在采纳的答案中 ...
- mysql copy表或表数据常用的语句整理汇总
mysql copy表或表数据常用的语句整理汇总. 假如我们有以下这样一个表: id username password ----------------------------------- 1 a ...
- Google搜索技术
命令 双引号 把搜索词放在双引号中,代表完全匹配搜索,也就是说搜索结果返回的页面包含双引号中出现的所有的词,连顺序也必须完全匹配.bd和Google都支持这个指令. 减号 减号代表搜索不包含减号后面的 ...
- Python(2.7.6) 迭代器
除了对列表.集合和字典等进行迭代,还能对其他对象进行迭代:实现 __iter__ 方法的对象.例如, 文件对象就是可迭代的: >>> dir(file) ['__class__', ...