1. <div class="photobox">
    <ul>
    <li data-date="'+data[i].id+'">
    <div class="imgbox">
    <img src="..."/>
    </div>
    </li>
    <li>......</li>
    <li>......</li>
    </ul>
    </div>
    //图片预览功能
    $('.photobox').on('click','li .imgbox img',function(){
    var sta = $(this).parents('li').attr('data-date');
    $.get(
    'http://...../get?access_token=...&img_id='+sta+'',function(data){
    var imge = '<div class="fa" style="height:100%;width:100%;z-index:999999;background-color:rgba(70,70,70,.6);position:fixed;top:0">' +
    '</div>';
    var showImg = '<img class="show" style="position:fixed;top:0;left: 0;right:0;bottom:0;margin:auto;z-index:1000000;width: 40%;" src="' + data.images[0] + '" alt="please wait">';
    $('body').append(imge);
    $('.fa').append(showImg);
    $('.fa').append('<div id="left">&lt;</div><div id="right">&gt;</div>');
    $('#left,#right').css({
    'font-size':'30px',
    'color':'#FFF',
    'position':'absolute',
    'top':'50%',
    'margin-top':'-20px',
    'cursor':'pointer',
    'z-index':10000001
    });
    $('#left').css('left','5px');
    $('#right').css('right','5px');
    //追加点击消失图片
    $('.fa').append('<span id="none" style="font-size: 30px;z-index: 10000001;position: fixed;cursor: pointer;color: #ffffff;right: 10px">&times;</span>');
    $('.fa').append('<div id="ye" style="color:#FFFFFF;width: 100px;text-align: center;position: absolute;left: 50%;margin-left: -50px;z-index: 10000001;top:12px"><span>1</span>/<span>'+data.images.length+'</span></div>');
    var i = 0; //声明初值
    //左右滑动切换图片
    $('#right').click(function(){
    i++;
    if(i >= data.images.length){
    $('.fa').remove();
    }
    $('.fa img').attr('src',data.images[i]);
    $('.fa #ye span:first-child').text(i+1);
    });
    $('#left').click(function(){
    i--;
    if(i<0){
    $('.fa').remove();
    }
    $('.fa img').attr('src',data.images[i]);
    $('.fa #ye span:first-child').text(i+1);
    });
    //点击消失图片
    $('#none').click(function(){
    $('.fa').remove();
    });
    }
    );
    })

jquery 点击图片弹出遮罩层查看大图的更多相关文章

  1. jQuery点击图片弹出大图遮罩层

    使用jQuery插件HoverTreeShow弹出遮罩层显示大图 效果体验:http://hovertree.com/texiao/hovertreeshow/ 在开发HoverTreeTop项目的产 ...

  2. jQuery点击图片弹出放大可拖动图片查看

    CSS代码: .popup-bigic { position: absolute; ; ; background: #eee; overflow: hidden; ; } .popup-bigic . ...

  3. jQuery点击图片弹出放大特效下载

    效果体验:http://hovertree.com/texiao/jqimg/1/ 效果图: 代码如下: <!DOCTYPE html> <html> <head> ...

  4. jquery特效(7)—弹出遮罩层且内容居中

    上周写了几个小特效,其中有个点击按钮弹出遮罩层的特效,下面来看最终实现的效果: 由于是测试的程序,所以我未加关闭的按钮. 一.主体程序 <!DOCTYPE html> <html&g ...

  5. jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例

    本文实例讲述了jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能.分享给大家供大家参考,具体如下: 弹出层:两种方式 一是打开网页就自动弹出层二是点击弹出 <!DOCTYPE html ...

  6. Css动画形式弹出遮罩层,内容区上下左右居中于不定宽高的容器中

    <!DOCTYPE html> <html> <head> </head> <body id="body"> <! ...

  7. 移动端和PC端弹出遮罩层后,页面禁止滚动的解决方法及探究

    PC端解决方案 pc端的解决思路就是在弹出遮罩层的时候取消已经存在的滚动条,达到无法滚动的效果. 也就是说给body添加overflow:hidden属性即可,IE6.7下不会生效,需要给html增加 ...

  8. JQuery弹出层,点击按钮后弹出遮罩层,有关闭按钮

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...

  9. JQuery弹出层,点击按钮后弹出遮罩层,有关闭按钮【转】

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...

随机推荐

  1. ActiveMQ 基础

    Apache ActiveMQ是Apache软件基金会所研发的开放源代码消息中间件:由于ActiveMQ是一个纯Java程序,因此只需要操作系统支持Java虚拟机,ActiveMQ便可执行.它能很好地 ...

  2. 理清Java中try-catch-finally带return的执行顺序

    前言:try-catch-finally带return和异常时,它们之间执行顺序问题是留下来的一个小疑问,今天搞清楚它们 第一种情况:无异常 //1.try-catch-finally都带有retur ...

  3. call和apply的应用

    相同点 都能够改变方法的执行上下文(执行环境),将一个对象的方法交给另一个对象来执行,并且是立即执行 var arrayLike = { 0: 'item1', 1: 'item2', 2: 'ite ...

  4. 从三层架构到Spring框架

    首先是软件的应用分层架构 标准三层架构: 1:数据访问层:实现了数据的持久化 2:业务逻辑层:对逻辑的实现及处理,实际上不可能在表示层对数据不做任何处理,但是尽可能的将逻辑分为一层 3:表示层:数据的 ...

  5. 05-python 学习第五天,简易聊天工具(shelve模块练习)

    需求:1.有两个用户,一个是mychat.py,另一个是youchat.py2.通过执自己的文件,可以看到对方输入的内容,实现连个命令行窗口之间聊天的功能.3.通过shelve 持久化写入和和读取功能 ...

  6. springboot项目中进行并发测试

    一 利用工具包: <dependency> <groupId>org.springframework.boot</groupId> <artifactId&g ...

  7. BMP 图片格式

     BMP根据颜色深度,可以分为2(1位).16(4位).256(8位).65536(16位)和1670万(24位)以及32位含有alpha通道.8位图像可以是 索引彩色图像外,也可以是灰阶图像,而索引 ...

  8. Python学习之--函数/生成器/装饰器

    Function,函数,主要是为了:1提高代码的复用程度,2将程序模块化. 定义函数 在Python中,使用def 用来定义函数,一般函数的定义如下: def name(arg1,arg2,....) ...

  9. 将ERF格式转换成PCAP格式

    在研究网络流量分析的时候,wireshark默认采用pcap格式.对于用Endace DAG捕捉卡捕获的数据包,一般来说,都是erf格式的.一般来说,此种格式包含了更多了链路层信息.而我们采用wire ...

  10. vue:父子组件间通信,父组件调用子组件方法进行校验子组件的表单

    参考: ElementUI多个子组件表单的校验管理:https://www.jianshu.com/p/541d8b18cf95 Vue 子组件调用父组件方法总结:https://juejin.im/ ...