JavaScript实现相册弹窗功能(zepto.js)
作者:木耳休心 时间:2024-04-19 10:42:49
先看看弹窗效果,如下:
//放大图片
$(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();
})
};
标签:js,相册,弹窗
0
投稿
猜你喜欢
组件:Adodb.Stream 用法介绍
2008-10-09 12:39:00
Python Django框架介绍之模板标签及模板的继承
2021-11-05 01:36:56
Python unittest单元测试框架及断言方法
2023-10-29 12:07:48
pytest中的fixture基本用法
2023-07-14 12:26:45
XMLHTTP中setRequestHeader的参数问题
2008-09-30 10:48:00
pandas 如何分割字符的实现方法
2021-04-17 11:28:46
关于Python3的import问题(pycharm可以运行命令行import错误)
2022-11-11 11:34:11
基于OpenCv实现的人脸识别(附Python完整代码)
2022-08-10 21:49:27
Python+LyScript实现自定义反汇编
2021-02-07 11:57:47
python 批量添加的button 使用同一点击事件的方法
2022-10-11 20:13:46
Python实现的银行系统模拟程序完整案例
2023-03-15 21:00:26
OracleEXP和IMP用法和介绍
2010-07-28 13:18:00
用Python写个新年贺卡生成器
2023-08-26 00:56:45
如何查询Top N及Top(M―N)记录?
2009-11-11 20:03:00
用户"sa"登陆失败 SQLServer 错误18456的解决方法
2024-01-18 18:04:37
Pycharm插件(Grep Console)自定义规则输出颜色日志的方法
2023-04-21 19:20:50
如何基于Python Matplotlib实现网格动画
2023-07-31 04:17:37
MySQL主从复制的原理及配置方法(比较详细)
2024-01-28 18:21:02
python matplotlib.pyplot.plot()参数用法
2023-07-13 17:39:48
详解Python做一个名片管理系统
2021-03-17 05:56:17