Div遮罩 Div居中 Div渐隐渐现

最新推荐文章于 2021-06-10 14:46:07 发布
最新推荐文章于 2021-06-10 14:46:07 发布
阅读量772 收藏
点赞数
分类专栏： web页面 文章标签： div function mozilla xhtml safari less

直接上代码

<!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=utf-8" />
 
<title>页面</title>
 
<style type="text/css">
 
* { margin:0px; 
 
padding:0px;}
 
#cover{position:absolute;top:0;left:0;z-index:100;visibility:hidden;background:#666;}
 
.shadow{position:absolute;top:0;left:0;z-index:200;visibility:hidden;}
 
#a_open,a_close{cursor:hand;cursor:pointer; color:red;}
 
</style>
 
</head>
 
<body>
 
<div id="cover" onClick="DecOpacity();"></div>
 
<a id="a_open" href="#" onClick="show('cover','contBox');return false;">来点我</a>
 
<div id="contBox" class="shadow" style="background:#FFF; width:400px; height:200px; padding:12px 9px;">
 
这里是内容 <a id="a_close" href="#" onClick="DecOpacity();return false;">关闭</a>
 
</div>
 
</body>
 
</html>
 
<script type="text/javascript">
 
function getPageSize(){
 


var xScroll, yScroll;
 


if (window.innerHeight && window.scrollMaxY) { 

xScroll = window.innerWidth + window.scrollMaxX;
 
yScroll = window.innerHeight + window.scrollMaxY;
 
} else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
 
xScroll = document.body.scrollWidth;
 
yScroll = document.body.scrollHeight;
 
} else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
 
xScroll = document.body.offsetWidth;
 
yScroll = document.body.offsetHeight;
 
}
 


var windowWidth, windowHeight;
 


// console.log(self.innerWidth);
 
// console.log(document.documentElement.clientWidth);
 
if (self.innerHeight) { // all except Explorer
 
if(document.documentElement.clientWidth){
 
windowWidth = document.documentElement.clientWidth; 
 
} else {
 
windowWidth = self.innerWidth;
 
}
 
windowHeight = self.innerHeight;
 
} else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
 
windowWidth = document.documentElement.clientWidth;
 
windowHeight = document.documentElement.clientHeight;
 
} else if (document.body) { // other Explorers
 
windowWidth = document.body.clientWidth;
 
windowHeight = document.body.clientHeight;
 
} 



// for small pages with total height less then height of the viewport
 
if(yScroll < windowHeight){
 
pageHeight = windowHeight;
 
} else { 
 
pageHeight = yScroll;
 
}
 
// console.log("xScroll " + xScroll)
 
// console.log("windowWidth " + windowWidth)
 
// for small pages with total width less then width of the viewport
 
if(xScroll < windowWidth){ 

pageWidth = xScroll;
 
} else {
 
pageWidth = windowWidth;
 
}
 
// console.log("pageWidth " + pageWidth)
 
arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight) 
 
return arrayPageSize;
 
}
 
var pageS=new Array();
 
pageS=getPageSize();
 
var contBox=document.getElementById("contBox");
 
var cover=document.getElementById("cover");
 
var tmpAlpha=0.0;
 
var tmpAlphaN=0.5;
 
function show(cover,id){
 
var objCover=document.getElementById(cover);
 
var objId=document.getElementById(id);
 
var scrollW = pageS[2]; 
 
var scrollH = pageS[3];   
 
var T=(scrollH-objId.offsetHeight)/2+document.body.scrollTop||document.documentElement.scrollTop;
 
var L=(scrollW-objId.offsetWidth)/2+document.body.scrollLeft||document.documentElement.scrollLeft;
 
objCover.style.width = scrollW+"px";
 
objCover.style.height= scrollH+"px";
 
objCover.style.visibility="visible";
 
objId.style.visibility="visible";
 
objId.style.top=T+"px";
 
objId.style.left=L+"px";
 
AddOpacity();
 
}
 
function hide(cover,id){
 
var objCover=document.getElementById(cover);
 
var objId=document.getElementById(id);
 
objCover.style.visibility="hidden";
 
objId.style.visibility="hidden";
 
}
 
function AddOpacity(){
 
contBox.style.opacity=tmpAlpha;
 
contBox.style.filter="alpha(opacity="+tmpAlpha*100+")";
 
cover.style.opacity=tmpAlpha;
 
cover.style.filter="alpha(opacity="+tmpAlpha*60+")";
 
tmpAlpha+=0.05;
 
if(tmpAlpha>=0.5){
 
cover.style.opacity = 0.5;
 
}
 
if(tmpAlpha>=1){
 
contBox.style.opacity = 1;
 
return;}else{
 
setTimeout("AddOpacity()",20);}
 
}
 
function DecOpacity(){
 
contBox.style.opacity=tmpAlphaN;
 
contBox.style.filter="alpha(opacity="+tmpAlphaN*100+")";
 
cover.style.opacity=tmpAlphaN;
 
cover.style.filter="alpha(opacity="+tmpAlphaN*60+")";
 
tmpAlphaN-=0.05;
 
if(tmpAlphaN<=0){
 
contBox.style.opacity = 0;
 
contBox.style.visibility="hidden";
 
cover.style.visibility="hidden";
 
tmpAlpha=0.0;
 
tmpAlphaN=0.5;
 
//clearTimeout()
 
return;}else{
 
setTimeout("DecOpacity()",20);}
 
}
 
</script>

 

lockelk
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jquery div提示框渐隐弹出与隐藏效果
12-09
jquery div提示框渐隐弹出与隐藏 *{margin:0;padding:0;font-size:12px;} input{width:120px;height:30px;cursor:pointer;} #note{position:absolute;width:400px;padding:20px;background:#eee;border:1px solid #ccc;left:40%;z-index:9999;display:none;} 软件开发网 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
渐隐div的一个特效（转）
junkai7043的专栏
02-25 705
<br /><br /><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /><html xmlns="http://www.w3.org/1999/xhtml"><br /><head><br /><meta http-equiv="Content-Type" content="text/html; char
Javascript实现div层渐隐效果的方法
10-24
主要介绍了Javascript实现div层渐隐效果的方法,涉及javascript操作页面元素与样式变化的相关技巧,需要的朋友可以参考下
Div渐隐渐现
hanjiangduzhuo的专栏
11-21 404
&lt;script type="text/javascript"&gt;    var i;    var j;    var sobjTimer=null;    var sobjTimer2=null;    function ShowSupport()    {        i=0;  //一定要在该处初始化        j=100;//一定要在该处初始化        dvZz.st...
div背景半透明，覆盖整个可视区域的遮罩层效果
12-30
html代码很简单 <div class=mask></div> 1 、半透明效果可以使用 css3 中的 opacity 属性，在低版本的IE浏览器中使用IE的alpha 滤镜。代码: .opacity{ opacity:0.3; filter: alpha(opacity=30); background-color:...
Js制作简单弹出层DIV在页面居中 中间显示遮罩的具体方法
01-19
这两天要用到正好练练手,比想象中碰到的问题要多,比如: ie6背景透明 ie6居中显示 还有对js对象的理解 openID=显示按钮,conID=需要显示的div,closeID=关闭按钮 解决了: 1.可以遮挡ie6下的select元素 但是在ie6下div...
jQuery实现的浮动层div浏览器居中显示效果
01-21
本文实例讲述了jQuery实现的浮动层div浏览器居中显示效果。分享给大家供大家参考，具体如下： 1.在页面的head中引入jQuery [removed][removed] 2.在页面的head中加入浮动层和遮罩层的样式 <style> #...
css遮罩全屏居中对齐的实现方式
09-22
本文通过实例代码给大家介绍了css遮罩全屏居中对齐的实现方式，代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧
html5+css3文字动画渐隐渐显显示
02-06
html5+css3文字动画渐隐渐显显示
CSS实现div淡入淡出
weixin_43732987的博客
02-01 8915
CSS实现div淡入淡出 css文件 #info{ display: none; top: 10%; left: 32%; width: 55%; height: 65%; background-color: white; z-index: 1002; overflow: auto; animation: anim 2s; } @keyframes anim { 0% {op...
CSS3实现文字渐隐效果
热门推荐
dududu01的专栏
07-21 1万+
div{ -webkit-animation: twinkling 1s infinite ease-in-out } .animated{ -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: bo
jquery-div提示框渐隐弹出与隐藏
cxu123321的博客
10-23 279
<!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> ...
html模糊渐显动画,如何实现div串的渐显渐隐？
weixin_39863741的博客
06-10 175
楼主这段代码主要有两个错误：1、只给第一个DIV绑定了事件解决方案：利用事件冒泡进行事件委托，给当前点击的DIV绑定事件2、没有更新curDiv和nextDiv一开始定义了curDiv和nextDiv后，实际上后面都没有更改这两个的值curDiv和nextDiv一直是第一个DIV和第二个DIV，所以点击事件中进行更新望采纳。window.onload = function(){var cur = ...
用js实现div的淡入淡出
lyf937175448的博客
09-05 5913
#box{                  width:100px;height:100px;background:red;opacity:0.3;position:absolute; }            var oDiv=document.getElementById("box");      var alpha=0.3;      var timer;
js控制div等对象渐隐
cqhvxha62565的博客
02-18 257
var pacity = 100, add = -10, delay = 30, timerID;function setMessageDivOpacity() {opacity += add;if (ie4) {div...
【每日一题】一个div块，设置其为两个效果，一个为渐隐效果，一个为点击空白处显示和隐藏
AngelCavalier的博客
03-07 137
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>div渐隐渐现</title> </head> <style> #t.
jquery弹出div遮罩层
最新发布
09-01
如果想要实现弹出div遮罩层，可以使用jQuery的相关功能来实现。 首先，需要在HTML文档中引入jQuery库，可以通过CDN或者下载并引入本地文件的方式。 然后，在HTML中创建一个div元素，作为遮罩层。可以通过给该元素...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值