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%;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 ...
随机推荐
- Android开发 TextView的开发记录
前言 此篇博客是记录一些TextView开发上一些少用的开发功能项.目前开发记录如下: 添加图片 文字滚动 添加省略号 实现长文的收起和展开功能 改变一个字符串里自定字符的颜色或者大小 效果字体(粗体 ...
- react之可控组件与不可控组件
一.不可控组件 <input type="text" defaultvalue="Hello React" /> 如上:defaultvalue的值 ...
- Java虚拟机性能管理神器 - VisualVM(8) 查找JAVA应用程序耗时的方法函数【转】
Java虚拟机性能管理神器 - VisualVM(8) 查找JAVA应用程序耗时的方法函数[转] 标签: javajvm监控工具性能优化 2015-04-07 16:47 1846人阅读 评论(0) ...
- python中用json存储列表字典等文件操作
JSON字符串用json.dumps, json.loads JSON文件名用json.dump, json.load 由于需要在脚本重启后依旧能够记住之前所使用的列表内容, 故采用json存储列表文 ...
- day2-元组、字典、文件操作
学习内容: 1. 元组操作 2. 字典操作 3. 文件操作 4. 深浅copy 1. 元组操作: 元组和列表非常相似,只不过元组不能在原处修改(它是不可变的),并且通常写成圆括号中的一系列项. # 元 ...
- 0906NOIP模拟测试赛后总结
我进前十辣.然而有10个大佬去学LCT了于是没有考试. Dybala神和exzkt神分-rank1,奶风神和林哥分-rank3,wc.miemeng和DuanYue神140分-rank5. 我.ooo ...
- Django实现简单的图书管理系统
目录 Django写图书管理系统 功能截图 创建Django项目 开始项目 配置文件 建立路由关系 开始写Django项目 编写核心逻辑函数 写前端页面 add_author.html add_boo ...
- htaccess apache重定向学习
1.推荐博客:http://www.cnblogs.com/adforce/archive/2012/11/23/2784664.html 2.测试工具:https://htaccess.madewi ...
- 菜鸟nginx源码剖析数据结构篇(五) 基数树 ngx_radix_tree_t[转]
菜鸟nginx源码剖析数据结构篇(五) 基数树 ngx_radix_tree_t Author:Echo Chen(陈斌) Email:chenb19870707@gmail.com Blog:Blo ...
- 《DSP using MATLAB》Problem 8.19
代码: %% ------------------------------------------------------------------------ %% Output Info about ...