<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"><</div><div id="right">></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">×</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 点击图片弹出遮罩层查看大图的更多相关文章
-
jQuery点击图片弹出大图遮罩层
使用jQuery插件HoverTreeShow弹出遮罩层显示大图 效果体验:http://hovertree.com/texiao/hovertreeshow/ 在开发HoverTreeTop项目的产 ...
-
jQuery点击图片弹出放大可拖动图片查看
CSS代码: .popup-bigic { position: absolute; ; ; background: #eee; overflow: hidden; ; } .popup-bigic . ...
-
jQuery点击图片弹出放大特效下载
效果体验:http://hovertree.com/texiao/jqimg/1/ 效果图: 代码如下: <!DOCTYPE html> <html> <head> ...
-
jquery特效(7)—弹出遮罩层且内容居中
上周写了几个小特效,其中有个点击按钮弹出遮罩层的特效,下面来看最终实现的效果: 由于是测试的程序,所以我未加关闭的按钮. 一.主体程序 <!DOCTYPE html> <html&g ...
-
jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例
本文实例讲述了jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能.分享给大家供大家参考,具体如下: 弹出层:两种方式 一是打开网页就自动弹出层二是点击弹出 <!DOCTYPE html ...
-
Css动画形式弹出遮罩层,内容区上下左右居中于不定宽高的容器中
<!DOCTYPE html> <html> <head> </head> <body id="body"> <! ...
-
移动端和PC端弹出遮罩层后,页面禁止滚动的解决方法及探究
PC端解决方案 pc端的解决思路就是在弹出遮罩层的时候取消已经存在的滚动条,达到无法滚动的效果. 也就是说给body添加overflow:hidden属性即可,IE6.7下不会生效,需要给html增加 ...
-
JQuery弹出层,点击按钮后弹出遮罩层,有关闭按钮
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...
-
JQuery弹出层,点击按钮后弹出遮罩层,有关闭按钮【转】
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...
随机推荐
-
React.js 官网入门教程 分离文件 操作无法正常显示HelloWord
对着React官网的教程练习操作,在做到分离文件练习时,按照官网步骤来却怎么也无法正常显示HelloWord. 经测试,html文件中内容改为: <!DOCTYPE html><ht ...
-
在浏览器的JavaScript里new Date().toUTCString()后,传递给C# DateTime().TryParse()会发生什么?
Format 1. Sun, 09 Oct 2016 13:24:35 GMT Format 2. Sun, 9 Oct 2016 13:36:09 UTC Format 1 是在IE里面产生的(Wi ...
-
setOnKeyListener响应两次问题
1.Android一次按下操作定义了两个事件,ACTION_DOWN和ACTION_UP,即按下和松手两个动作. 2.除了判断是什么按键被按下,还应该判断按键是up还是down 3.调用eve ...
-
code[vs]3301 Square words
暴力枚举+最长公共子序列 #include <iostream> #include <cstring> using namespace std; int dp[510][510 ...
-
Java 多线程之龟兔赛跑(文件夹——读取文件——时间)
版权声明:本文为博主原创文章,未经博主允许不得转载. 描述: 乌龟和兔子(各自是一个Java线程)在我们的电脑上赛跑,我们为它们指定一个跑道(本地文件系统上的一个目录,该目录包含子目录).跑的规则是读 ...
-
sqlite编译
1.下载代码:http://www.sqlite.org/download.html ,windows下下载sqlite-amalgamation-xxx.zip和sqlite-dll-win32-x ...
-
MySQL闪回原理与实战
本文将介绍闪回原理,给出笔者的实战经验,并对现存的闪回工具作比较. DBA或开发人员,有时会误删或者误更新数据,如果是线上环境并且影响较大,就需要能快速回滚.传统恢复方法是利用备份重搭实例,再应用去除 ...
-
作业2——英语学习APP的案例分析
英语学习APP的案例分析 很多同学有误解,软件工程课是否就是理论课?或者是几个牛人拼命写代码,其他人打酱油的课?要不然就是学习一个程序语言,搞一个职业培训的课?都不对,软件工程有理论,有实践,更重要的 ...
-
CentOS系统资源常用命令
系统: # uname -a # 查看内核/操作系统/CPU信息 # cat /etc/issue # cat /etc/redhat-release # 查看操作系统版本 # cat /proc ...
-
spring data jpa 2.0
参考: https://www.cnblogs.com/zeng1994/p/7575606.html