JavaScript实现相册弹窗功能(zepto.js)


Posted in Javascript onJune 21, 2016

先看看弹窗效果,如下: 

JavaScript实现相册弹窗功能(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();
  })

 };

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
使两个iframe的高度与内容自适应,且相等
Nov 20 Javascript
Extjs 几个方法的讨论
Jan 28 Javascript
Javascript创建Silverlight Plugin以及自定义nonSilverlight和lowSilverlight样式
Jun 28 Javascript
js获取本机的外网/广域网ip地址完整源码
Aug 12 Javascript
jQuery中outerHeight()方法用法实例
Jan 19 Javascript
js实现从右向左缓缓浮出网页浮动层广告的方法
May 09 Javascript
jquery实现华丽的可折角广告代码
Sep 02 Javascript
MVC+jQuery.Ajax异步实现增删改查和分页
Dec 22 Javascript
jquery实现点击页面回到顶部
Nov 23 Javascript
原生js简单实现放大镜特效
May 16 Javascript
ActiveX控件的使用-js实现打印超市小票功能代码详解
Nov 22 Javascript
bootstrap 弹出框modal添加垂直方向滚轴效果
Jul 09 Javascript
省市选择的简单实现(基于zepto.js)
Jun 21 #Javascript
JavaScript实现移动端滑动选择日期功能
Jun 21 #Javascript
bootstrap学习笔记之初识bootstrap
Jun 21 #Javascript
Javascript实现图片加载从模糊到清晰显示的方法
Jun 21 #Javascript
Javascript类型系统之String字符串类型详解
Jun 21 #Javascript
JS模仿腾讯图片站的图片翻页按钮效果完整实例
Jun 21 #Javascript
JS实现简单的右下角弹出提示窗口完整实例
Jun 21 #Javascript
You might like
PHP中extract()函数的定义和用法
2012/08/17 PHP
php学习笔记之面向对象
2014/11/08 PHP
php实现的RSS生成类实例
2015/04/23 PHP
php中文语义分析实现方法示例
2019/09/28 PHP
JS 页面自动加载函数(兼容多浏览器)
2009/05/18 Javascript
JS 参数传递的实际应用代码分析
2009/09/13 Javascript
juqery 学习之三 选择器 可见性 元素属性
2010/11/25 Javascript
最好用的省市二级联动 原生js实现你值得拥有
2013/09/22 Javascript
JavaScript中instanceof与typeof运算符的用法及区别详细解析
2013/11/19 Javascript
深入理解JavaScript中的对象
2015/06/04 Javascript
jquery模拟alert的弹窗插件
2015/07/31 Javascript
jquery实现表单验证简单实例演示
2015/11/23 Javascript
把JavaScript代码改成ES6语法不完全指南(分享)
2017/09/10 Javascript
js实现上传并压缩图片效果
2018/01/10 Javascript
详解JavaScript 为什么要有 Symbol 类型?
2019/04/03 Javascript
js中arguments对象的深入理解
2019/05/14 Javascript
小程序click-scroll组件设计
2019/06/18 Javascript
使用ThinkJs搭建微信中控服务的实现方法
2019/08/08 Javascript
vue+canvas实现移动端手写签名
2020/05/21 Javascript
Python实现批量检测HTTP服务的状态
2016/10/27 Python
python timestamp和datetime之间转换详解
2017/12/11 Python
python使用锁访问共享变量实例解析
2018/02/08 Python
python字典快速保存于读取的方法
2018/03/23 Python
详谈python中冒号与逗号的区别
2018/04/18 Python
Python实现的简单读写csv文件操作示例
2018/07/12 Python
对Python 除法负数取商的取整方式详解
2018/12/12 Python
在Pandas中处理NaN值的方法
2019/06/25 Python
Python3打包exe代码2种方法实例解析
2020/02/17 Python
高中毕业生自我鉴定
2013/11/03 职场文书
警示教育活动总结
2014/05/05 职场文书
机关保密承诺书
2014/06/03 职场文书
计算机应用专业毕业生求职信
2014/06/03 职场文书
离职报告范文
2014/11/04 职场文书
初二英语教学反思
2016/02/15 职场文书
微信小程序用户授权最佳实践指南
2021/05/08 Javascript
浅谈MySQL之select优化方案
2021/08/07 MySQL