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

2024-10-03 18:12:42

先看看弹窗效果，如下：

//放大图片
  $(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实现仿手机QQ空间的大图查看组件ImageView.js详解

调用方式 :ImageView(index,imgData) --index参数为图片默认显示的索引值,类型为Number --imaData参数为图片url数组 ,类型为Array 使用之前要先引入 zepto.js 文件 ImageView.js具体代码如下: 复制代码代码如下: /* * ImageView v1.0.0 * --基于zepto.js的大图查看 * --调用方法 ImageView(index,imgDada) * --index 图片默认值显示索引,N
基于zepto.js实现手机相册功能

看完老师的视频做的一个手机相册,对我这种菜鸟来说还是直接上代码吧!里面用到17张小图,17张大图,还有animate.css和zepto.min.js ,都可以在网上找到. <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <!-- <meta name="viewport" content="w
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 sr
JS封装的模仿qq右下角消息弹窗功能示例

本文实例讲述了JS封装的模仿qq右下角消息弹窗功能.分享给大家供大家参考,具体如下: 在我们的日常开发中,或者生活中,经常需要用到弹出窗.这里我们就用js模拟一下qq消息一样的弹出窗. 直接贴代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htm
JS实现自定义弹窗功能

众所周知,浏览器自带的原生弹窗很不美观,而且功能比较单一,绝大部分时候我们都会按照设计图自定义弹窗或者直接使用注入layer的弹窗等等.前段时间在慕课网上看到了一个自定义弹窗的实现,自己顺便就学习尝试写了下,下面是主要的实现代码并添加了比较详细的注释,分享出来供大家参考.(代码用了ES6部分写法如需兼容低版本浏览器请把相关代码转成es5写法,后面有时间更新为一个兼容性较好的es5版本) HTML部分:(没什么内容放置一个按钮调用函数,js中调用实例即可供参考) <!DOCTYPE html
JS实现仿微信支付弹窗功能

先奉上效果图 html代码 <!DOCTYPE html> <html> <head> <title>仿手机微信支付输入密码界面效果</title> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1.0, width=device-width, user-scalable=no"
JavaScript+CSS相册特效实例代码

嗯就是这样一个例子,视频学到的一个特效,实际用处并不大,但是可以帮助理解JS语言和熟悉CSS3样式. 设计: 观察一张图片的变化,发现: 1.图片缩放(随机,并且不是同时运动) 1.从大到小 2.从小到大,透明度从1到0(在第一步运动完成后立马开始) 2.图片旋转(随机,并且不是同时运动的.需要在全部运动走完以后开始) 3. 因为每张图片是随机开始变换的,所以起始时间是不同的,这里可设置一个延迟器setTimeout,时间用random随机生成即可. 4. 中间需要用到自执行函数,因为setT
JavaScript实现换肤功能

一,js换肤的基本原理基本原理很简单,就是使用 JS 切换对应的 CSS 样式表文件.例如导航网站 Hao123 的右上方就有网页换肤功能.除了切换 CSS 样式表文件之外,通常的网页换肤还需要通过 Cookie 来记录用户之前更换过的皮肤,这样下次用户访问的时候,就可以自动使用上次用户配置的选项. 那么基本工作流程就出来了:访问网页--JS 读取 Cookie --如果没有,使用默认皮肤--如果有,使用指定皮肤:用户点击换肤选项--JS 控制替换对应的 CSS 样式表--将皮肤选项写进 Co
基于touch.js手势库+zepto.js插件开发图片查看器（滑动、缩放、双击缩放）

最近由于公司项目需要图片查看器,网上搜了一圈,感觉资料很少,所以决定基于百度的touch.js手势库+zepto.js自己写了一个小插件,实现了左右滑动,双指缩放,双击缩放功能,基本使用还行,但是有时候还是不太顺畅,后续会慢慢完善:写的不好的地方望各位能够给出好的建议,谢谢! 源码地址:https://github.com/GLwen/molong_photoSwipe.git 演示:http://runjs.cn/detail/iceaaogh molong.css *{padding:0;m
zepto.js中tap事件阻止冒泡的实现方法

本文实例讲述了zepto.js中tap事件阻止冒泡的实现方法.分享给大家供大家参考.具体如下: 最近在弄一个手机版的网站,本来想用jQuery Mobile,但文件太大了,所以用了zepto.js 由于移动网页中使用click事件会有延迟,所以就用上了zepto.js中的tap事件. 使用click事件可以使用stopPropagation来阻止冒泡,但tap使用该方法无效现在我需要实现这样一个效果:点击a.btn这个按钮,然后显示div.panel,当我点击非div.panel时隐藏div.
Javascript 实现计算器时间功能详解及实例（二）

Javascript 计算器: 系列文章: JS 实现计算器详解及实例代码(一) Javascript 实现计算器时间功能详解及实例(二) Javascript计算器 -> 添加时间在屏显区左上角添加时间显示效果图如下: 代码初始化 // 计算器初始化 Calculator.prototype.init = function () { this.addTdClick(); // 时间显示 this.showDate(); }; 时间显示 // 在屏显区左上角显示时间日期 Calculator

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

相关推荐

随机推荐