|
|
马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。
您需要 登录 才可以下载或查看，没有帐号？立即注册
x
另外如果你不是javascrput的高手，你可以不必去写ID，只用class就可以。当客户端程序员写完程序，需要调整时候，你可以在利用他的ID进行控制。
破洛洛文章简介：道理很复杂.有两种完成路子:一种是经由过程元素创立和删除，一种是经由过程显现和埋没，其他的详细要做成甚么模样，就留给CSS来把持了。
实例：CSS+JS弹出层效果,兼容一切扫瞄器http://www.poluoluo.com/jzxy/201009/93884.html
在事情过程当中常常碰到做弹出的层效果，有的必要在元素右下弹出，有的必要弹出在扫瞄器正两头，有的必要弹出后再拖拽，有的必要背景要变暗，有的必要弹出的层跟从鼠标挪动……
网上此类效果实在良多，有javascript原生的，有基于框架写的,但本人很多多少时分用不到那末初级的效果，以是就把这些功效都分隔来一步一步完成。
实在道理很复杂.有两种完成路子:一种是经由过程元素创立和删除，一种是经由过程显现和埋没，其他的详细要做成甚么模样，就留给CSS来把持了。上面从最复杂的入手下手（不基于框架）
1、最复杂的弹出
用到的javascript代码以下：
- [/code][code]functionshow(){varoShow=document.getElementById(show);oShow.style.display=block;varoClose=document.createElement("span");oClose.innerHTML="×";oShow.appendChild(oClose);oClose.onclick=function(){oShow.style.display=none;oShow.removeChild(this);}}
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/><metaname="description"content="前端思索"/><metaname="keywords"content="前端思索"/><title>最复杂的弹出层：前端思索</title><style>*{margin:0;padding:0px;}body{padding:30px;}#show{width:300px;height:200px;display:none;padding:1px;position:relative;border:1pxsolid#4c77aa;background:#f2f7fd;margin-left:70px;zoom:1;}#showh3{background:#4c77aa;color:#fff;font-size:14px;padding:5px;}#showspan{position:absolute;right:3px;top:3px;display:block;cursor:pointer;color:#fff;font-weight:bold;}#showp{padding:5px;}#text{font-size:12px;text-indent:2em;line-height:20px;}</style><scripttype="text/javascript">functionshow(){varoShow=document.getElementById(show);oShow.style.display=block;varoClose=document.createElement("span");oClose.innerHTML="×";oShow.appendChild(oClose);oClose.onclick=function(){oShow.style.display=none;oShow.removeChild(this);}}</script></head><body><ahref="#">请猛击我</a><divid="show"><h3>弹出层题目栏</h3><pid="text">这里是弹出层内容，内容能够是笔墨、图片等，能够是iframe传出去，也能够用jQuery的load()传出去。若有甚么分歧理的或能够改善的，人人能够给我留言，配合进修。</p></div></body></html>
[Ctrl+A全体选择提醒：你可先修正部分代码，再按运转]
2、弹出层―到扫瞄器中心
用到的javascript代码以下：
- [/code][code]functionshow(){variWidth=document.documentElement.clientWidth;//猎取扫瞄器宽度variHeight=document.documentElement.clientHeight;//猎取扫瞄器高度varoShow=document.getElementById(show);oShow.style.display=block;oShow.style.left=(iWidth-302)/2+"px";//居中横坐标oShow.style.top=(iHeight-202)/2+"px";//居中纵坐标varoClose=document.createElement("span");oClose.innerHTML="×";oShow.appendChild(oClose);oClose.onclick=function(){oShow.style.display=none;oShow.removeChild(this);}}
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/><metaname="description"content="前端思索"/><metaname="keywords"content="前端思索"/><title>弹出层―到扫瞄器中心：前端思索</title><style>*{margin:0;padding:0px;}body{padding:30px;}#show{width:300px;height:200px;display:none;padding:1px;position:absolute;border:1pxsolid#4c77aa;background:#f2f7fd;zoom:1;}#showh3{background:#4c77aa;color:#fff;font-size:14px;padding:5px;}#showspan{position:absolute;right:3px;top:3px;display:block;cursor:pointer;color:#fff;font-weight:bold;}#showp{padding:5px;}#text{font-size:12px;text-indent:2em;line-height:20px;}</style><scripttype="text/javascript">functionshow(){variWidth=document.documentElement.clientWidth;variHeight=document.documentElement.clientHeight;varoShow=document.getElementById(show);oShow.style.display=block;oShow.style.left=(iWidth-302)/2+"px";oShow.style.top=(iHeight-202)/2+"px";varoClose=document.createElement("span");oClose.innerHTML="×";oShow.appendChild(oClose);oClose.onclick=function(){oShow.style.display=none;oShow.removeChild(this);}}</script></head><body><ahref="#">请猛击我（我会弹到两头）</a><divid="show"><h3>弹出层题目栏</h3><pid="text">这里是弹出层内容，内容能够是笔墨、图片等，能够是iframe传出去，也能够用jQuery的load()传出去。若有甚么分歧理的或能够改善的，人人能够给我留言，配合进修。</p></div></body></html>
[Ctrl+A全体选择提醒：你可先修正部分代码，再按运转]
3、弹出层―到扫瞄器中心―背景变暗
用到的javascript代码以下：
- [/code][code]functionshow(){variWidth=document.documentElement.clientWidth;variHeight=document.documentElement.clientHeight;varbgObj=document.createElement("div");//创立背景层bgObj.setAttribute("id","bgbox");bgObj.style.width=iWidth+"px";bgObj.style.height=Math.max(document.body.clientHeight,iHeight)+"px";document.body.appendChild(bgObj);//将创立的层拔出body中varoShow=document.getElementById(show);oShow.style.display=block;oShow.style.left=(iWidth-302)/2+"px";oShow.style.top=(iHeight-202)/2+"px";varoClosebtn=document.createElement("span");oClosebtn.innerHTML="×";oShow.appendChild(oClosebtn);functionoClose(){oShow.style.display=none;oShow.removeChild(oClosebtn);document.body.removeChild(bgObj);}oClosebtn.onclick=oClose;bgObj.onclick=oClose;}
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/><metaname="description"content="前端思索"/><metaname="keywords"content="前端思索"/><title>弹出层―到扫瞄器中心―背景变暗：前端思索</title><style>*{margin:0;padding:0px;}body{padding:30px;}#show{width:300px;height:200px;display:none;padding:1px;position:absolute;border:1pxsolid#4c77aa;background:#f2f7fd;z-index:11;zoom:1;}#showh3{background:#4c77aa;color:#fff;font-size:14px;padding:5px;}#showspan{position:absolute;right:3px;top:3px;display:block;cursor:pointer;color:#fff;font-weight:bold;}#showp{padding:5px;}#text{font-size:12px;text-indent:2em;line-height:20px;}#bgbox{position:absolute;left:0;top:0;background:#000;filter:alpha(opacity=30);opacity:0.3;z-index:10}</style><scripttype="text/javascript">functionshow(){variWidth=document.documentElement.clientWidth;variHeight=document.documentElement.clientHeight;varbgObj=document.createElement("div");bgObj.setAttribute("id","bgbox");bgObj.style.width=iWidth+"px";bgObj.style.height=Math.max(document.body.clientHeight,iHeight)+"px";document.body.appendChild(bgObj);varoShow=document.getElementById(show);oShow.style.display=block;oShow.style.left=(iWidth-302)/2+"px";oShow.style.top=(iHeight-202)/2+"px";functionoClose(){oShow.style.display=none;document.body.removeChild(bgObj);}varoClosebtn=document.createElement("span");oClosebtn.innerHTML="×";oShow.appendChild(oClosebtn);oClosebtn.onclick=oClose;bgObj.onclick=oClose;}</script></head><body><ahref="#">请猛击我（我会弹到两头，同时背景变暗）</a><divid="show"><h3>弹出层题目栏</h3><pid="text">这里是弹出层内容，内容能够是笔墨、图片等，能够是iframe传出去，也能够用jQuery的load()传出去。若有甚么分歧理的或能够改善的，人人能够给我留言，配合进修。</p></div></body></html>
[Ctrl+A全体选择提醒：你可先修正部分代码，再按运转]
4、弹出层―到扫瞄器中心―背景变暗―撑持键盘[Esc]加入
键盘事务的javascript代码以下：
- [/code][code]functiongetEvent(){returnwindow.event||arguments.callee.caller.arguments[0];//取得事务Event工具，用于兼容IE和FireFox}document.onkeyup=function(){varevent=getEvent();if(event.keyCode==27){oClose();}}
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/><metaname="description"content="前端思索"/><metaname="keywords"content="前端思索"/><title>弹出层―到扫瞄器中心―背景变暗―撑持键盘[Esc]加入：前端思索</title><style>*{margin:0;padding:0px;}body{padding:30px;}#show{width:300px;height:200px;display:none;padding:1px;position:absolute;border:1pxsolid#4c77aa;background:#f2f7fd;z-index:11;zoom:1;}#showh3{background:#4c77aa;color:#fff;font-size:14px;padding:5px;}#showspan{position:absolute;right:3px;top:3px;display:block;cursor:pointer;color:#fff;font-weight:bold;}#showp{padding:5px;}#text{font-size:12px;text-indent:2em;line-height:20px;}#bgbox{position:absolute;left:0;top:0;background:#000;filter:alpha(opacity=30);opacity:0.3;z-index:10}</style><scripttype="text/javascript">functionshow(){variWidth=document.documentElement.clientWidth;variHeight=document.documentElement.clientHeight;varbgObj=document.createElement("div");bgObj.setAttribute("id","bgbox");bgObj.style.width=iWidth+"px";bgObj.style.height=Math.max(document.body.clientHeight,iHeight)+"px";document.body.appendChild(bgObj);varoShow=document.getElementById(show);oShow.style.display=block;oShow.style.left=(iWidth-302)/2+"px";oShow.style.top=(iHeight-202)/2+"px";varoClosebtn=document.createElement("span");oClosebtn.innerHTML="×";oShow.appendChild(oClosebtn);functionoClose(){oShow.style.display=none;oShow.removeChild(oClosebtn);document.body.removeChild(bgObj);}oClosebtn.onclick=oClose;bgObj.onclick=oClose;functiongetEvent(){returnwindow.event||arguments.callee.caller.arguments[0];}document.onkeyup=function(){varevent=getEvent();if(event.keyCode==27){oClose();}}}</script></head><body><ahref="#">请猛击我（弹出层―到扫瞄器中心―背景变暗―撑持键盘[Esc]加入）</a><divid="show"><h3>弹出层题目栏</h3><pid="text">这里是弹出层内容，内容能够是笔墨、图片等，能够是iframe传出去，也能够用jQuery的load()传出去。若有甚么分歧理的或能够改善的，人人能够给我留言，配合进修。</p></div></body></html>
[Ctrl+A全体选择提醒：你可先修正部分代码，再按运转]
4、弹出层―到扫瞄器中心―背景变暗―撑持键盘[Esc]加入―撑持鼠标拖动
鼠标拖动的javascript代码以下：
- [/code][code]varmoveX=0;varmoveY=0;varmoveTop=0;varmoveLeft=0;varmoveable=false;vardocMouseMoveEvent=document.onmousemove;vardocMouseUpEvent=document.onmouseup;titleBar=document.getElementById(titlebar);titleBar.onmousedown=function(){varevt=getEvent();moveable=true;moveX=evt.clientX;moveY=evt.clientY;moveTop=parseInt(oShow.style.top);moveLeft=parseInt(oShow.style.left);document.onmousemove=function(){if(moveable){varevt=getEvent();varx=moveLeft+evt.clientX-moveX;vary=moveTop+evt.clientY-moveY;if(x>0&&(x+302<iWidth)&&y>0&&(y+202<iHeight)){oShow.style.left=x+"px";oShow.style.top=y+"px";}}};document.onmouseup=function(){if(moveable){document.onmousemove=docMouseMoveEvent;document.onmouseup=docMouseUpEvent;moveable=false;moveX=0;moveY=0;moveTop=0;moveLeft=0;}};}
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/><metaname="description"content="前端思索"/><metaname="keywords"content="前端思索"/><title>5、弹出层―到扫瞄器中心―背景变暗―撑持键盘[Esc]加入―撑持鼠标拖动：前端思索</title><style>*{margin:0;padding:0px;}body{padding:30px;}#show{width:300px;height:200px;display:none;padding:1px;position:absolute;border:1pxsolid#4c77aa;background:#f2f7fd;z-index:11;zoom:1;}#showh3{background:#4c77aa;color:#fff;font-size:14px;padding:5px;cursor:move}#showspan{position:absolute;right:3px;top:3px;display:block;cursor:pointer;color:#fff;font-weight:bold;}#showp{padding:5px;}#text{font-size:12px;text-indent:2em;line-height:20px;}#bgbox{position:absolute;left:0;top:0;background:#000;filter:alpha(opacity=30);opacity:0.3;z-index:10}</style><scripttype="text/javascript">functionshow(){variWidth=document.documentElement.clientWidth;variHeight=document.documentElement.clientHeight;varbgObj=document.createElement("div");bgObj.setAttribute("id","bgbox");bgObj.style.width=iWidth+"px";bgObj.style.height=Math.max(document.body.clientHeight,iHeight)+"px";document.body.appendChild(bgObj);varoShow=document.getElementById(show);oShow.style.display=block;oShow.style.left=(iWidth-302)/2+"px";oShow.style.top=(iHeight-202)/2+"px";varoClosebtn=document.createElement("span");oClosebtn.innerHTML="×";oShow.appendChild(oClosebtn);functionoClose(){oShow.style.display=none;document.body.removeChild(bgObj);oShow.removeChild(oClosebtn);}oClosebtn.onclick=oClose;bgObj.onclick=oClose;functiongetEvent(){returnwindow.event||arguments.callee.caller.arguments[0];}document.onkeyup=function(){varevent=getEvent();if(event.keyCode==27){oClose();}}varmoveX=0;varmoveY=0;varmoveTop=0;varmoveLeft=0;varmoveable=false;vardocMouseMoveEvent=document.onmousemove;vardocMouseUpEvent=document.onmouseup;titleBar=document.getElementById(titlebar);titleBar.onmousedown=function(){varevt=getEvent();moveable=true;moveX=evt.clientX;moveY=evt.clientY;moveTop=parseInt(oShow.style.top);moveLeft=parseInt(oShow.style.left);document.onmousemove=function(){if(moveable){varevt=getEvent();varx=moveLeft+evt.clientX-moveX;vary=moveTop+evt.clientY-moveY;if(x>0&&(x+302<iWidth)&&y>0&&(y+202<iHeight)){oShow.style.left=x+"px";oShow.style.top=y+"px";}}};document.onmouseup=function(){if(moveable){document.onmousemove=docMouseMoveEvent;document.onmouseup=docMouseUpEvent;moveable=false;moveX=0;moveY=0;moveTop=0;moveLeft=0;}};}}</script></head><body><ahref="#">请猛击我（弹出层―到扫瞄器中心―背景变暗―撑持键盘[Esc]加入―撑持鼠标拖动）</a><divid="show"><h3id="titlebar">弹出层题目栏</h3><pid="text">这里是弹出层内容，内容能够是笔墨、图片等，能够是iframe传出去，也能够用jQuery的load()传出去。若有甚么分歧理的或能够改善的，人人能够给我留言，配合进修。</p></div></body></html>
[Ctrl+A全体选择提醒：你可先修正部分代码，再按运转]
接待人人多提改善定见或倡议，配合进修和切磋
</p>
一个样式规则由一个选择器后跟一个声明块组成，声明块是一个大容器,由大括号中间的部分组成,声明块中间的空间会被忽略。 |
|
|Archiver|手机版|仓酷云
鄂ICP备14007578号-2
发表于 2015-1-15 23:22:59
收藏
转播
分享
淘帖
顶
踩
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
照妖镜
楼主
窥视卡
雷达卡
发表于 2015-3-11 03:26:02