javascript 弹出层居中效果的制作- Javascript

当前位置: 首页 > 图文教程 > 网络编程 > Javascript > javascript 弹出层居中效果的制作

Javascript: 手把手教你做超酷的条形码效果; pjblog中的UBBCode.js; 一个跟随鼠标的图片放大效果，与FF兼容; 学习jquery之一; javascript英文日期（有时间）选择器; 几行代码轻松搞定jquery实现flash8类似的连接效果; 搜集了几个不错的下拉菜单效果; 无间断滚动的新闻文章列表，兼容IE、Firefox和Opera，符合W3C标准。可作Marquee; 一个js实现的所谓的滑动门; OfflineSave离线保存代码再次发布使用说明; css静态滤镜 + A:Hover 效果; js+ajax实现的A*游戏路径算法整理; JSON 学习之完全手册图文; Javascript & DHTML 实例编程（教程）（四）初级实例篇2—动画; jQuery基础学习技巧总结; jQuery 中关于CSS操作部分使用说明; 经常用的图片在容器中的水平垂直居中实例; 比较不错的一款图片广告效果; 用javascript实现的汉字简繁转换; javascript实现的文字加密解密

No. « ‹ 204 205 206 207 › »

技术文章搜索

关键字

Javascript 中的 javascript 弹出层居中效果的制作

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-10-10 浏览: 350 ::

收藏到网摘: n/a

javascript 检测浏览器类型和版本的代码 javascript 遮照层效果

做一个带拖动的弹出层效果(像提示框那种) ,看了下代码与实现效果，值得学习应用。问题:做一个带拖动的弹出层效果(像提示框那种)
先写了一半,明天继续奋斗:

点击运行可以看到效果:

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

点击右下角的"OPEN"

点击运行可以看到效果:

<!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" />
<meta name="author" content="Stri" />
<title>javascript 弹出层居中效果的制作</title>
<style type="text/css">
* { padding:0; margin:0; list-style:none; }
body { font-family:Verdana, Geneva, sans-serif; font-size:14px; }
#a { width:380px; height:80px; border:5px solid #d3d3d3; background-color:#f7f7f7; position:absolute; padding:10px; z-index:9999; }
a.btn { display:block; width:80px; cursor:pointer; background-color:#f7f7f7; padding:2px 0px; border:1px solid #d5d5d5; vertical-align:middle; text-align:center; margin:50px auto 5px; text-decoration:none; }
a:hover { background-color:#333; color:#fff; font-weight:bold; }
#aa { position:fixed; bottom:20px; right:10px; }
</style>
<script language="javascript" type="text/javascript">
var drg=true;
var ns=(document.all) ? false : true;
function divcenter()
{remove();
var c=document.createElement("div");
document.body.appendChild(c);
c.setAttribute("id","a"); c.setAttribute("dragable","dragable"); c.onmousedown=foo; var divId=document.getElementById("a"); divId.innerHTML+="出现代码异常!<br>错误编号:0015;";
divId.style.left=(document.documentElement.clientWidth-divId.clientWidth)/2+document.documentElement.scrollLeft+"px";
setTimeout(function(){divId.style.top=(document.documentElement.clientHeight-divId.clientHeight)/2+document.documentElement.scrollTop-50+"px";},100);
}
//移除
function remove(){ if(document.getElementById("a")) {document.body.removeChild(document.getElementById("a")); }}
function foo(){ if(drg){ if(document.getElementById("a")!=null) { obj=document.getElementById("a"); document.onmousedown=m_d; document.onmouseup=m_u; } } else { document.onmousemove=no_f; document.onmousedown=no_f; document.onmouseup=no_f; }
}
function m_d(e){ document.onmousemove=m_m; x=(ns)?e.pageX:event.x; y=(ns)?e.pageY:event.y; cx=obj.offsetLeft-x; cy=obj.offsetTop-y; }
function m_m(e){ drg=false; x=(ns)?e.pageX:event.x; y=(ns)?e.pageY:event.y; obj.style.left=(cx+x)+"px"; obj.style.top=(cy+y)+"px"; }
function m_u(){ drg=true; document.onmousedown=no_f; document.onmousemove=no_f; document.onmouseup=no_f; }
function no_f(){ return false;}
</script>
</head>
<body>
<a href="javascript:void(0);" onclick="divcenter();" id="aa">open</a>
<script type="text/javascript">
x:for(var i=1; i<100;i++){
var a=document.createElement("div");
a.innerHTML=""+i+"";
document.body.appendChild(a);}
</script>
</body>
</html>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

关于每一步的理解,最后解释.毕竟代码还没完全整理
被从中间扩展缓冲的效果算法难住了!
*****************OK,也不算难****************
就是让div的left和top属性随着width一起渐变就行了

点击运行可以看到效果:

<!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" />
<meta name="author" content="Stri" />
<title>javascript 弹出层居中效果的制作</title>
<style type="text/css">
* { padding:0; margin:0; list-style:none; }
body { font-family:Verdana, Geneva, sans-serif; font-size:14px; }
#a { width:380px; height:80px; border:5px solid #d3d3d3; background-color:#f7f7f7; position:absolute; padding:10px; z-index:9999; }
a.btn { display:block; width:80px; cursor:pointer; background-color:#f7f7f7; padding:2px 0px; border:1px solid #d5d5d5; vertical-align:middle; text-align:center; margin:50px auto 5px; text-decoration:none; }
a:hover { background-color:#333; color:#fff; font-weight:bold; }
#aa { position:fixed; bottom:20px; right:10px; }
</style>
<script language="javascript" type="text/javascript">
var drg=true;
var ns=(document.all) ? false : true;
function divcenter()
{remove();
var c=document.createElement("div");
document.body.appendChild(c);
c.setAttribute("id","a"); c.setAttribute("dragable","dragable"); c.onmousedown=foo; var divId=document.getElementById("a"); divId.innerHTML+="出现代码异常!<br>错误编号:0015;";
//divId.style.left=(document.documentElement.clientWidth-divId.clientWidth)/2+document.documentElement.scrollLeft+"px";
//setTimeout(function(){divId.style.top=(document.documentElement.clientHeight-divId.clientHeight)/2+document.documentElement.scrollTop-50+"px";},100);
h_w(300,80);
}
//移除
function remove(){ if(document.getElementById("a")) {document.body.removeChild(document.getElementById("a")); }}
function foo(){ if(drg){ if(document.getElementById("a")!=null) { obj=document.getElementById("a"); document.onmousedown=m_d; document.onmouseup=m_u; } } else { document.onmousemove=no_f; document.onmousedown=no_f; document.onmouseup=no_f; }
}
function m_d(e){ document.onmousemove=m_m; x=(ns)?e.pageX:event.x; y=(ns)?e.pageY:event.y; cx=obj.offsetLeft-x; cy=obj.offsetTop-y; }
function m_m(e){ drg=false; x=(ns)?e.pageX:event.x; y=(ns)?e.pageY:event.y; obj.style.left=(cx+x)+"px"; obj.style.top=(cy+y)+"px"; }
function m_u(){ drg=true; document.onmousedown=no_f; document.onmousemove=no_f; document.onmouseup=no_f; }
function no_f(){ return false;} function h_w(a,b){ divId=document.getElementById("a"); divId.style.width="0px"; divId.style.height="0px"; var s=function(){ var w=parseInt(divId.style.width); if(w<a){ divId.style.width=w+Math.ceil((a-w)/20)+"px"; divId.style.left=(document.documentElement.clientWidth-divId.clientWidth)/2+document.documentElement.scrollLeft+"px";} else {clearInterval(st); divId.style.width=a+"px";} } var t=function(){ var h=parseInt(divId.style.height); if(h<b){ divId.style.height=h+Math.ceil((b-h)/10)+"px"; divId.style.top=(document.documentElement.clientHeight-divId.clientHeight)/2+document.documentElement.scrollTop-10+"px";} else {clearInterval(tt); divId.style.height=b+"px";} } var st = window.setInterval(s,1); var tt=window.setInterval(t,1);
}
</script>
</head>
<body>
<a href="javascript:void(0);" onclick="divcenter();" id="aa">提交</a>
<script type="text/javascript">
x:for(var i=1; i<100;i++){
var a=document.createElement("div");
a.innerHTML=""+i+"";
document.body.appendChild(a);}
</script>
</body>
</html>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

javascript 检测浏览器类型和版本的代码 javascript 遮照层效果

Javascript 中的 javascript 弹出层居中效果的制作

评论 (0) All