<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. DRF 序列化组件单增

    目录 自定义序列化(矬) Serializer类(方式繁琐) 底层序列化类 UserSerializer 视图序列化步骤 底层反序列化类 UserCreatSerializer 视图反序列化步骤 Mo ...

  2. vmware centos 扩容

    1.停止后vmware 扩容 2.centos 增加分区 #增加分区fdisk /dev/sda 操作 /dev/sda 的分区表 p 查看已分区数量(我看到有两个 /dev/sda1 /dev/sd ...

  3. Python(四)基础篇之「文件对象&错误处理」

    [笔记]Python(四)基础篇之「文件对象&错误处理」 2016-12-08 ZOE    编程之魅  Python Notes: ★ 如果你是第一次阅读,推荐先浏览:[重要公告]文章更新. ...

  4. CF #575 Div3

    // 比赛链接:https://codeforces.com/contest/1196 // CF 2019.7.24 // 本想Div3手速场上分,结果卡在C题,掉了不少分. // 自闭了这么久,今 ...

  5. Pandas系列-读取csv/txt/excel/mysql数据

    本代码演示: pandas读取纯文本文件 读取csv文件 读取txt文件 pandas读取xlsx格式excel文件 pandas读取mysql数据表 import pandas as pd 1.读取 ...

  6. Activiti流程定义语言

    1.流程(process) bpmn文件一个流程的根元素.一个流程就代表一个工作流. 2.顺序流(sequenceFlow) 顺序流是连接两个流程节点的连线,代表一个节点的出口.流程执行完一个节点后, ...

  7. Luogu P2149 [SDOI2009]Elaxia的路线(最短路+记忆化搜索)

    P2149 [SDOI2009]Elaxia的路线 题意 题目描述 最近,\(Elaxia\)和\(w**\)的关系特别好,他们很想整天在一起,但是大学的学习太紧张了,他们必须合理地安排两个人在一起的 ...

  8. JS播放视频代码

    <div class="col-md-8"> <div id="moviecontainer"></div> </di ...

  9. 移动端video视频播放问题

    1.视频播放后自动全屏 video添加playsinline  webkit-playsinline属性 2.安卓暂停或播放完毕不能滑动 通过js判断机型,安卓去掉controls属性,ios保留co ...

  10. JavaScript RegExp 对象的三种方法

    JavaScript RegExp 对象有 3 个方法:test().exec() 和 compile().(1) test() 方法用来检测一个字符串是否匹配某个正则表达式,如果匹配成功,返回 tr ...