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 相关文章推荐
表单项的name命名为submit、reset引起的问题
Dec 22 Javascript
一些常用弹出窗口/拖放/异步文件上传等实用代码
Jan 06 Javascript
原生javascript实现无间缝滚动示例
Jan 28 Javascript
html文本框提示效果的示例代码
Jun 28 Javascript
详解javascript跨浏览器事件处理程序
Mar 27 Javascript
jQuery中iframe的操作(点击按钮新增窗口)
Apr 20 Javascript
jQuery实现根据生日计算年龄 星座 生肖
Nov 23 Javascript
详解angularjs中的隔离作用域理解以及绑定策略
May 31 Javascript
浅析Javascript中双等号(==)隐性转换机制
Oct 27 Javascript
详解Vue的ref特性的使用
Jan 24 Javascript
js实现特别简单的钟表效果
Sep 14 Javascript
如何用JS实现简单的数据监听
May 06 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
Symfony页面的基本创建实例详解
2015/01/26 PHP
php while循环控制的简单实例
2016/05/30 PHP
PHP+Mysql+Ajax实现淘宝客服或阿里旺旺聊天功能(前台页面)
2017/06/16 PHP
PHP实现表单提交数据的验证处理功能【防SQL注入和XSS攻击等】
2017/07/21 PHP
PHP封装XML和JSON格式数据接口操作示例
2019/03/06 PHP
Javascript Select操作大集合
2009/05/26 Javascript
模拟电子签章盖章效果的jQuery插件源码
2013/06/24 Javascript
javascript模拟订火车票和退票示例
2014/04/24 Javascript
JS中处理时间之setUTCMinutes()方法的使用
2015/06/12 Javascript
分享15个大家都熟知的jquery小技巧
2015/12/02 Javascript
jquery表格datatables实例解析 直接加载和延迟加载
2016/08/12 Javascript
微信小程序 教程之列表渲染
2016/10/18 Javascript
JS实现根据密码长度显示安全条功能
2017/03/08 Javascript
老生常谈angularjs中的$state.go
2017/04/24 Javascript
javascript性能优化之分时函数的介绍
2018/03/28 Javascript
JavaScript中如何调用Java方法
2020/09/16 Javascript
python操作xml文件详细介绍
2014/06/09 Python
Python测试人员需要掌握的知识
2018/02/08 Python
Python+selenium 获取一组元素属性值的实例
2018/06/22 Python
python3安装speech语音模块的方法
2018/12/24 Python
Python中的相关分析correlation analysis的实现
2019/08/29 Python
Python线程障碍对象Barrier原理详解
2019/12/02 Python
解决pyPdf和pyPdf2在合并pdf时出现异常的问题
2020/04/03 Python
python用TensorFlow做图像识别的实现
2020/04/21 Python
基于django micro搭建网站实现加水印功能
2020/05/22 Python
Visual Studio code 配置Python开发环境
2020/09/11 Python
德购商城:德国进口直邮商城
2017/06/13 全球购物
瑞典度假品牌:OAS
2019/05/28 全球购物
高三励志标语
2014/06/05 职场文书
毕业生代领毕业材料的授权委托书
2014/09/29 职场文书
2014年党员个人剖析材料
2014/10/08 职场文书
保密工作整改报告
2014/11/06 职场文书
党员证明信
2015/06/19 职场文书
2016年清明节红领巾广播稿
2015/12/17 职场文书
2016年母亲节广告语
2016/01/28 职场文书
java中重写父类方法加不加@Override详解
2021/06/21 Java/Android