遮罩层

图片放大镜注释详解

阅读更多关于图片放大镜注释详解

今天的练习是做一个网购网站常见的图片详情介绍的放大镜效果，简单来说就是图片中有对应的区域让你看到放大后的效果。关于布局：就是两组div，第一组大div放图片，小的是遮盖层。第二组是大图div显示框，里面放大张图片，超过部分隐藏，可以想象下是透过窗户看外面，你看到的只是一部分。思路：就是两边的比例，重点，比例，话不说，直接上代码。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> *{margin:0 ; padding:0;} #left{width:300px; height:300px; border:1px solid gold; position:relative; float:left; margin-right:20px; left:10px; top:10px;} #left img{width:300px; height:300px;} #mask{width:90px; height:90px; background:greenyellow; opacity: 0.5; position: absolute; top:0; left:0; display:none; cursor: move;} #big{width:600px; height:600px;

Div+Css实现屏蔽效果

阅读更多关于 Div+Css实现屏蔽效果

在做项目的过程中用到了Yahoo 的YUI控件，其中的datatable 很方便，但是有些时候要把点击table事件屏蔽，于是便想到了用div+Css的方法实现这一效果。【效果图】总而言之，就是当某一事件被触发时,例如按钮点击事件。使一个事先定义好的div 显示，并用Css控制位置，其中的z-index属性必须有，值赋的越大，说明此div层在重叠时，在最上面。其中要注意的地方：【遮罩层的大小】 1、用JS判断你的显示器分辨率，获取长与宽两个参数，将这两个参数赋给第二层的Div，作为他的长与宽的像素值，这样的话，无论在多大或多小的显示器上，都可以显示同样的效果 2、CSS样式表：这种方法，只能提前设置好遮罩层的长与宽了，但是就会出现一些问题：如果你的遮罩层设置的宽度、长度很大，那么在小显示器上就会出现浏览器的滚动条～～反之则会出现遮罩不上的问题因为做HTML模型，所以我用的第二种方法，有个不太合理解决的方式：我把浏览器的下方（横向的）滚动条给禁用掉了。代码是：在CSS样式表中写入 html,body { overflow-x:hidden;} 【遮罩层样式】 1、三个Div层的样式，position都要设为absolute;，因为只有设为absolute时， z-index：属性才会生效！ 2、半透明属性：filter:alpha(opacity=50);

兼容多浏览器的页面遮罩层实现

阅读更多关于兼容多浏览器的页面遮罩层实现

　　最近一直在整理工作中用的到的代码，将一些通用的内容整理积累出来。遮罩顾名思义就是遮住页面的东西，常见的用途就是等待页面请求加载过程中，阻止其他操作，防止重复操作，等待上一操作完成后再移除遮罩，有些图片查看也使用类此效果。 1 CL = Common.LightBox = { 2 elemnt: null, 3 init: function(){ 4 var html,height = '100%',position = 'fixed'; 5 if ($.browser.msie && ($.browser.version == "6.0") && !$.support.style) { 6 height = window.screen.availHeight + 'px'; 7 position = "absolute"; 8 } 9 if ($.browser.msie) { 10 html = '<div id="lightbox" style="left:0; background:rgb(150,150,150); top:0; width:100%; height:' + height + '; filter:alpha(opacity=30); -moz-opacity: 0.3; opacity: 0.3;zoom:1; position:' + position

3个遮罩层

阅读更多关于 3个遮罩层

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>Jquery遮罩层</title> <style type="text/css"> #BgDiv{background-color:#e3e3e3; position:absolute; z-index:99; left:0; top:0; display:none; width:100%; height:1000px;opacity:0.5;filter: alpha(opacity=50);-moz-opacity: 0.5;} #DialogDiv{position:absolute;width:400px; left:50%; top:50%; margin-left:-200px; height:auto; z-index:100;background-color:#fff;

点击遮罩层的背景关闭遮罩层

阅读更多关于点击遮罩层的背景关闭遮罩层

转载： https://blog.csdn.net/weixin_44542088/article/details/86513659 在模仿华为官方网页的练习当中我发现华为官网中有一个遮罩层是随便点击遮罩层的背景也能关闭掉遮罩层，但唯独点击内容区域不会关闭掉遮罩层。于是我开始模仿这个写案例，连内容也一模一样（因为这个练习就是要写出和华为关一样的效果或则比它更好的效果），一开始我是这样子写的（图1）图1 class=Select_Region_bj 我给了一个灰色半透明的背景样式，后来在Javascript中写onclick事件无论这么写，点击内容区也是会关闭掉遮罩层。我百思不得其解到底怎么样写才能点击内容区不会关闭遮罩层，后来下课期间我看见我同学他写的带能点击内容区不会关闭遮罩层。我问他你是这么写的，他告诉我：“把他们分离就可以的了。”我思考了一会，脑补：分离？怎么分离？补着补着补着就补出了背景和内容区分离。分离写（图2）图2 把背景层和内容区分开来写，不要在背景层中包裹内容，这样子点击内容区就不会关闭掉遮罩层了！分享一个经典编程课程资源群：来源： CSDN 作者： A00geek resource 链接： https://blog.csdn.net/geek555/article/details/104720823

阅读更多关于遮罩层

<html> <head> <meta charset="UTF-8"> <title></title> <style> * { margin: 0px; padding: 0px; } #mask { width: 100%; /*height: 500px;*/ background-color: black; opacity: 0.5; position: fixed; top: 0px; left: 0px; z-index: 990; } #login { width: 300px; height: 200px; position: fixed; /*top: 50px; left: 200px;*/ background-color: royalblue; z-index: 999; } #login-close { width: 50px; height: 50px; position: absolute; top: 10px; right: 10px; background-color: red; } </style> <link rel="stylesheet" type="text/css" href="css/sweetalert2.min.css" /> <script src="js/sweetalert2.min.js"></script> </head

JS+CSS简单实现DIV遮罩层显示隐藏

阅读更多关于 JS+CSS简单实现DIV遮罩层显示隐藏

1 <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > 2 < html xmlns ="http://www.w3.org/1999/xhtml" > 3 < head > 4 < title > DIV CSS遮罩层 </ title > 5 < script language ="javascript" type ="text/javascript" > 6 function showdiv() { 7 document.getElementById( " bg " ).style.display = " block " ; 8 document.getElementById( " show " ).style.display = " block " ; 9 } 10 function hidediv() { 11 document.getElementById( " bg " ).style.display = ' none ' ; 12 document.getElementById( " show " ).style.display = ' none ' ; 13 } 14 <

JS+CSS简单实现DIV遮罩层显示隐藏

阅读更多关于 JS+CSS简单实现DIV遮罩层显示隐藏

一个简单的遮罩层

阅读更多关于一个简单的遮罩层

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script type="text/javascript"> function show() { document.getElementById("xie").style.display = ""; document.getElementById("content1").style.display = ""; document.getElementById("xie").style.filter = "Alpha(Opacity=30)";//透明度 document.getElementById("xie").style.opacity = ".80";IE透明度 //document.getElementById("content1").innerHTML = "你的内容<input onclick='hide()' type='button' value='确定'/>"; } function hide() { document.getElementById("xie").style.display = "none"; document.getElementById(

HTML 遮罩层

阅读更多关于 HTML 遮罩层

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <html xmlns=" http://www.w3.org/1999/xhtml "> <head runat="server"> <meta http-equiv="content-type" content="text/html; charset=utf-8"></meta> <title>无标题页</title> <style type="text/css"> #cover { position:absolute; right:0px; bottom:0px; width:100%; height:100%; background-color:#D6E6FF; filter:alpha(opacity=55); -moz-opacity: 0.55; opacity: 0.55; display:none; z-index:5; } #tb_window { width:450px; height:220px; border:2px #6699CC solid; z-index:2; background:#FFFFFF;

订阅遮罩层