zoukankan      html  css  js  c++  java
  • jquery 点击图片弹出遮罩层查看大图

    <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%;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; 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; 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();
    });
    }
    );
    })
  • 相关阅读:
    最全最新java面试题系列全家桶(带答案)
    [多平台]pymo – 手机上的 GalGame 引擎
    Hyperledger Fabric-sdk-java
    Nginx、OpenResty和Kong的基本概念与使用方法
    nginx代理 tomcat获得真实用户IP
    nodejs+gulp+webpack基础知识
    开始写下自己的python的cocos2d, pyglet学习
    机器学习算法GBDT的面试要点总结-上篇
    Python 最常见的 170 道面试题解析:2019 最新
    VCL消息处理机制
  • 原文地址:https://www.cnblogs.com/mo-cha/p/6097668.html
Copyright © 2011-2022 走看看