jquery 遮罩层显示img
如果点击iframe中的image显示整个页面的遮罩层,可参考如下:
http://blog.csdn.net/shiaijuan1/article/details/70160714
具体思路就是,顶层添加dom对象,用来显示信息,默认隐藏,需要时在iframe中调用,宽高设置为100%。
实现如下:
//遮罩层
.showmask {
position: fixed;//position设置为fixed或者absolute或者relative,z-index才生效,且z-index值越大越显示到顶层
z-index:;//fixed固定定位,相对于浏览器窗口
width: 100%;//relative相对定位,相对于其正常位置进行定位,比如left:20px,相对于其正常位置向左偏移20个像素
height: 100%;
background-color: silver;
top: 0px;
left: 0px;
opacity: 0.5;//遮罩透明度
} .showmasklayer {
position: absolute;//绝对定位,相对于该元素之外的第一个父元素进行定位
z-index:;
top: 0px;
left: 0px;
min-width: 100%;
min-height: 100%;
display: flex;//多列布局
justify-content: center;//设置元素在主轴(横轴)上的对其方式
align-items: center;//当前行侧轴(纵轴)方向上的对齐方式
}
//关闭按钮
.showmaskclose {
background-color: red;
color: white;
border: 2px solid gray;
position: fixed;
z-index:;
top: 0px;
right: 0px;
cursor: pointer;
height: 30px;
width: 30px;
font-size: large;
font-weight: bold;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
}
这儿调整一下,为了解决,部分图片像素过大,浏览器无法展示全部,又没有加入拖动及滚动条等:
.showmask {
position: fixed;
z-index:;
width: 100%;
height: 100%;
background-color: silver;
top: 0px;
left: 0px;
opacity: 0.5;
} .showmasklayer {
position: absolute;
z-index:;
top: 0px;
left: 0px;
/*min-width: 100%; 这里默认显示100%,不能超过100%
min-height: 100%;*/
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
} .showmasklayer img {
max-width: 100%;/*图片最大宽高都是100%*/
max-height: 100%;
} .showmaskclose {
background-color: red;
color: white;
border: 2px solid gray;
position: fixed;
z-index:;
top: 0px;
right: 0px;
cursor: pointer;
height: 30px;
width: 30px;
font-size: large;
font-weight: bold;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
}
iframe中调用如下:
$(function () {
$("#image").on("click", function () {
//判断是否已经添加过遮罩层dom
if ($(".showmaskclose", window.top.document).length == 0) {
//附加遮罩层dom
$("body", window.top.document).append("<div class='showmaskclose'>×</div>").append("<div class='showmask'></div>").append("<div class='showmasklayer'></div>")
//这儿双击遮罩showmask/showmasklayer时候,会导致showmasklayer图片成选中状态,这儿可以调整为如下,参照:www.w3cui.com?p=141:
//.append("<div class='showmasklayer' unselectable='on' style='-moz-user-select:none;' onselectstart='return false;'></div>");
//附加后绑定事件
$(".showmaskclose", window.top.document).on("click", function () { htsHide(); })
$(".showmask", window.top.document).on("dblclick", function () { htsHide(); })
$(".showmasklayer", window.top.document).on("dblclick", function () { htsHide(); })
//添加图片
$(".showmasklayer", window.top.document).append("<img src='" + this.src + "' />")
}
else {
//遮罩层dom显示
$(".showmaskclose", window.top.document).show();//可通过css设置display为none和block控制显示和隐藏
$(".showmask", window.top.document).show();
$(".showmasklayer", window.top.document).show();
//切换图片
$(".showmasklayer > img", window.top.document).attr('src', this.src);
}
});
});
function htsHide() {
//遮罩层隐藏
$(".showmask", window.top.document).hide();
$(".showmaskclose", window.top.document).hide();
$(".showmasklayer", window.top.document).hide();
}
以上的js在双击showmask关闭时,重新打开,时而会出现一个类似于showmask选中状态的东西,体验不好,可以每次关闭后移除,下次点击时添加,如下:
$(function () {
$("#image").on("click", function () {
//添加遮罩层
$("body", window.top.document).append("<div class='showmaskclose'>×</div>").append("<div class='showmask'></div>").append("<div class='showmasklayer'></div>")
//绑定遮罩层事件
$(".showmaskclose", window.top.document).on("click", function () { htsHide(); })
$(".showmask", window.top.document).on("dblclick", function () { htsHide(); })
$(".showmasklayer", window.top.document).on("dblclick", function () { htsHide(); })
$(".showmasklayer", window.top.document).append("<img src='" + this.src + "' />")
});
});
function htsHide() {
//移除遮罩层
$(".showmaskclose", window.top.document).remove();
$(".showmask", window.top.document).remove();
$(".showmasklayer", window.top.document).remove();
}
呵呵,升级一下,加入图像的旋转功能,主要是通过css样式调整实现:
css:
.showmask {
position: fixed;
z-index:;
width: 100%;
height: 100%;
background-color: silver;
top: 0px;
left: 0px;
opacity: 0.5;
} .showmasklayer {
position: absolute;
z-index:;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
} .showmasklayer img {
max-width: 100%;
max-height: 100%;
} .showmaskrotate {/*实现旋转的按钮*/
background-color: Highlight;
color: white;
border: 2px solid gray;
position: fixed;
z-index:;
top: 0px;
right: 40px;
cursor: pointer;
height: 30px;
width: 30px;
font-size: large;
font-weight: bold;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
} .showmaskclose {
background-color: red;
color: white;
border: 2px solid gray;
position: fixed;
z-index:;
top: 0px;
right: 0px;
cursor: pointer;
height: 30px;
width: 30px;
font-size: large;
font-weight: bold;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
}
js,rotate实现:
/**
* jquery-rotate v0.1.0
* Very lightweight jquery rotate plugin using CSS 3 Transformation
* https://github.com/schickling/jquery-rotate*/
(function ($) { $.fn.extend({
rotate: function (deg) { // cache dom element
var $this = $(this); // make deg random if not set
if (deg === null) {
deg = Math.floor(Math.random() * 359);
} // rotate dom element
$this.css({
'-webkit-transform': 'rotate(' + deg + 'deg)',
'-moz-transform': 'rotate(' + deg + 'deg)',
'-ms-transform': 'rotate(' + deg + 'deg)',
'-o-transform': 'rotate(' + deg + 'deg)',
'transform': 'rotate(' + deg + 'deg)'
}); // make chainable
return $this;
}
}); })(jQuery);
js,调用img遮罩:
function htsHide() {
$(".showmaskclose", window.top.document).remove();
$(".showmaskrotate", window.top.document).remove();
$(".showmask", window.top.document).remove();
$(".showmasklayer", window.top.document).remove();
}
oper = {
View: function (imagepath) {
$("body", window.top.document).append("<div class='showmaskclose'>×</div><div class='showmaskrotate'>⌒</div>").append("<div class='showmask'></div>").append("<div class='showmasklayer'></div>")
var tIndex = 0;//控制旋转次数
$(".showmaskclose", window.top.document).on("click", function () { htsHide(); })
$(".showmaskrotate", window.top.document).on("click", function () { $('.showmasklayer > img', window.top.document).rotate(-90 * ++tIndex); })//实现旋转功能,每次逆时针旋转90度
$(".showmask", window.top.document).on("dblclick", function () { htsHide(); })
$(".showmasklayer", window.top.document).on("dblclick", function () { htsHide(); })
$(".showmasklayer", window.top.document).append("<img src='" + imagepath + "' style='max-height:100%;max-width:100%;'/>")
}
}
jquery 遮罩层显示img的更多相关文章
- jQuery遮罩层插件
在网页上常常遇到须要等待非常久的操作,比方导出报表等.为了预防用户点击其它操作或者多次点击同个功能,须要用遮罩层把页面或者操作区盖住.防止用户进行下一步操作.同一时候能够提高界面友好度,让用户知道操作 ...
- jQuery遮罩层登录对话框
用户登录是许多网站必备的功能.有一种方式就是不管在网站的哪个页面,点击登录按钮就会弹出一个遮罩层,显示用户登录的对话框.这用方式比较灵活方便.而现在扫描二维码登录的方式也是很常见,例如QQ.微信.百度 ...
- jQuery遮罩层的实现
遮罩层其实就是一个占据整个页面的半透明效果的页面元素,一般用div实现.页面中实现遮罩层,无非就是为了让用户只能操作弹出窗口的内容,而不允许操作弹出窗口外的内容. 在实现时,我使用了两个div,一个遮 ...
- JS+CSS简单实现DIV遮罩层显示隐藏【转藏】
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- JS+CSS简单实现DIV遮罩层显示隐藏
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- z-index设置后导致遮罩层显示跳动问题
如图,1,3为top,bottom div,2为iscroll,4为遮罩层,如果1设置z-index后,不设置遮挡不住2,遮罩层4弹出会卡顿,既不设置z-index,又能遮挡iscroll的办法是在h ...
- jquery遮罩层
(function () { //遮罩层实现 zhe zhao ceng kexb 2016.2.24 $.extend($.fn, { mask: function (msg, maskDivCla ...
- jQuery遮罩层效果
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- 页面用一个遮罩层显示加载,加载完后隐藏该div
<div id="background" class="background" style="display: none; "> ...
随机推荐
- Crawling is going on - Beta版本测试报告
[Crawling is going on - Beta版本] 测试报告 文件状态: [] 草稿 [√] 正式发布 [] 正在修改 报告编号: 当前版本: 2.0.2 编写人: 周萱.刘昊岩.居玉皓 ...
- 【转】c++面试基础
1,关于动态申请内存 答:内存分配方式三种: (1)从静态存储区域分配:内存在程序编译的时候就已经分配好,这块内存在程序的整个运行期间都存在. 全局变量,static变量. (2)在栈上创建:在执行函 ...
- lintcode-16-带重复元素的排列
带重复元素的排列 给出一个具有重复数字的列表,找出列表所有不同的排列. #### 样例 给出列表 [1,2,2],不同的排列有: [ [1,2,2], [2,1,2], [2,2,1] ] 挑战 使用 ...
- iOS-JS调用OC代码
监听时间点击 改变当前浏览器窗口地址 在js里调用OC代码,需要在网页上写一个协议,不是http协议 然后在OC的webView shouldStartloadWithRequest
- 原生js移动端字体自适应方案
自从进入新公司之后,就一直采用800的方案,也就是判断屏幕尺寸,大于800px是一种html字体处理方案,另一种方案是小于800px的html字体处理方案, 代码如下: (function(doc, ...
- C# 开发者最经常犯的 8 个错误
在和C#新手一起工作的时候,我注意到他们经常重复一些错误.这些错误,当你指出来的时候很容易理解.然而,如果一个开发者没有意识到这些错误,将会影响正在开发的软件的质量和效率,因此,我决定总结8个常见的错 ...
- React & event-pooling & bug
React & event-pooling & bug event-pooling https://reactjs.org/docs/events.html#event-pooling ...
- [计算机网络-应用层] FTP协议
文件传输协议:FTP 如下图所示:用户通过一个FTP用户代理与FTP交互.该用户首先提供远程主机的主机名,使本地主机的FTP客户机进程建立一个到远程主机FTP服务器进程的TCP连接.然后,该用户提供用 ...
- hdu 2768 Cat vs. Dog (二分匹配)
Cat vs. Dog Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total ...
- Creator开源游戏、插件、教程、视频汇总
Creator开源游戏.插件.教程.视频汇总 来源 http://forum.cocos.com/t/creator/44782 王哲首席客服 17-03-17 4 史上最全,没有之一. ...