<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. h5页面在不同ios设备上的问题总结

    1.日期问题 对于yyyy-mm-dd hh:mm:ss 这种格式在ios系统不识别 时间格式化的时候,在浏览器端处理好好的,到了手机端,就变成NAN,或者null,这种情况,是ios系统不能转化这种 ...

  2. leetcode-95-不同的二叉搜索树(卡特兰数)

    题目描述: 方法一:动态规划 O(n^2) O(n) class Solution: def numTrees(self, n: int) -> int: dp = [0]*(n+1) dp[0 ...

  3. 莫烦pytorch学习笔记(八)——卷积神经网络(手写数字识别实现)

    莫烦视频网址 这个代码实现了预测和可视化 import os # third-party library import torch import torch.nn as nn import torch ...

  4. CF 1281B Azamon Web Services

    原题链接:http://codeforces.com/problemset/problem/1281/B 题目大意: 给你两个字符串 s 和 c ,最多经过一次变换,使s的字典序小于c,输出变换后的s ...

  5. yum 安装配置

    光盘挂载:mount /dev/cdrom /mnt/cdrom 配置文件路径:vim /etc/yum.repos.d/dvd.repo 配置文件内容:[dvd]name=dvdbaseurl=fi ...

  6. netty优化参考链接

    Netty百万级推送服务设计要点:http://www.infoq.com/cn/articles/netty-million-level-push-service-design-points/ 用N ...

  7. Python学习day07 - Python进阶(1) 内置方法

    figure:last-child { margin-bottom: 0.5rem; } #write ol, #write ul { position: relative; } img { max- ...

  8. ch5 vlsms

    Variabel Length Subnet Mask vlsms 较早的路由协议 ripv1 没有为子网准备的字段,子网信息会被丢失. 这意味着如果一个路由器运行着一个rip协议具有一个确定的子网掩 ...

  9. 对CNN感受野一些理解

    对CNN感受野一些理解 感受野(receptive field)被称作是CNN中最重要的概念之一.为什么要研究感受野呐?主要是因为在学习SSD,Faster RCNN框架时,其中prior box和A ...

  10. 跟我一起了解koa之在koa中使用redis

    第一步安装中间件 cnpm i koa-generic-session koa-redis 第二步引入中间件 在中间件中写入session 浏览器中会存储数据 第三步关于Redis来读取和存储数据 读 ...