& & & & 复制代码代码如下:& &
相关经验教程
的原创经验被浏览，获得 ￥0.001 收益
的原创经验被浏览，获得 ￥0.001 收益
的原创经验被浏览，获得 ￥0.001 收益
的原创经验被浏览，获得 ￥0.001 收益
的原创经验被浏览，获得 ￥0.005 收益
的原创经验被浏览，获得 ￥0.001 收益
的原创经验被浏览，获得 ￥0.005 收益
的原创经验被浏览，获得 ￥0.001 收益
的原创经验被浏览，获得 ￥0.005 收益
的原创经验被浏览，获得 ￥0.005 收益
的原创经验被浏览，获得 ￥0.001 收益
的原创经验被浏览，获得 ￥0.001 收益
的原创经验被浏览，获得 ￥0.005 收益
的原创经验被浏览，获得 ￥0.001 收益
的原创经验被浏览，获得 ￥0.005 收益
的原创经验被浏览，获得 ￥0.005 收益
的原创经验被浏览，获得 ￥0.001 收益
的原创经验被浏览，获得 ￥0.005 收益
的原创经验被浏览，获得 ￥0.001 收益
的原创经验被浏览，获得 ￥0.005 收益
的原创经验被浏览，获得 ￥0.001 收益
的原创经验被浏览，获得 ￥0.005 收益
的原创经验被浏览，获得 ￥0.005 收益
的原创经验被浏览，获得 ￥0.005 收益
论文写作技巧追求美，向往美，为美而生，为美创造...
很多时候我们想去某某网站干点什么的时候，就会让我们先注册登录后才可以访问内容，而现在很多网站注册登录的时候都会有一种遮罩层的效果，就是背景是带有透明度的黑色遮罩，盖满整个网站，然后登录框弹出固定在屏幕的居中位置。那么，今天就练练这个实用而简单的效果吧。PS：这个是我学习后练习的demo！
首先，需要有一个按钮来模拟登录：
&button id="btnLogin"class="login-btn"&登录&/button&
然后呢，我们想通过点击这个按钮实现这样一个效果：
从上面这张图片，我们可以看到，灰色背景就是遮罩层，而浅蓝色的区域就是登陆框位置所在了。OK，下面先看一下HTML结构和css样式：
&div id="mask"&&/div&
&div id="login"&
//登陆框包裹层
&div id="loginCon"&
//表单内容
&div id="close"&点击关闭&/div&
//关闭按钮
我是登录框哟！
这里只是将HTML结构拿出来讲一下，但是下面我们是通过JS来创建它们的，所以这里只是为了方便我们理解，并不需要放在html文件里。
background:url(img/close.png) no-repeat;
width:30px;
height:30px;
cursor:pointer;
position:absolute;
right:5px;
text-indent:-999em;
background-color:#ccc;
opacity:<span style="color: #;
filter: alpha(opacity=70);
position:absolute;
z-index:<span style="color: #;
position:fixed;
z-index:<span style="color: #;
.loginCon{
position:relative;
width:<span style="color: #px;
height:<span style="color: #px;
background:lightblue;
border:3px solid #333;
text-align: center;
css样式中需要注意一下z-index属性，因为我们需要让遮罩层盖住除了登录框之外所有的页面内容，所以，需要确保登录框的层次最高，遮罩层次之，所以一般将这两个的z-index属性值设置为比较高的数值，但遮罩层要比登陆框少一层。然后还有一点就是遮罩层必须设置透明度，不然就太难看了，用户体验极其不好！
JS实现代码：
function dialog(){
//获取页面的高度和宽度
var sWidth=document.body.scrollWidth || document.documentElement.scrollW
var sHeight=document.body.scrollHeight || document.documentElement.scrollH
//获取页面的可视区域高度和宽度
var wHeight=document.documentElement.clientHeight || document.body.clientH
//创建遮罩层
var oMask=document.createElement("div");
oMask.id="mask";
oMask.style.height=sHeight+"px";
oMask.style.width=sWidth+"px";
document.body.appendChild(oMask);
//添加到body末尾
//创建登录框
var oLogin=document.createElement("div");
oLogin.id="login";
oLogin.innerHTML="&div class='loginCon'&&div id='close'&点击关闭&/div&我是登录框哟！&/div&";
document.body.appendChild(oLogin);
//获取登陆框的宽和高
var dHeight=oLogin.offsetH
var dWidth=oLogin.offsetW
//设置登陆框的left和top
oLogin.style.left=sWidth/2-dWidth/2+"px";
oLogin.style.top=wHeight/2-dHeight/2+"px";
//获取关闭按钮
var oClose=document.getElementById("close");
//点击关闭按钮和点击登陆框以外的区域都可以关闭登陆框
oClose.onclick=oMask.onclick=function(){
document.body.removeChild(oLogin);
document.body.removeChild(oMask);
window.onload=function(){
var oBtn=document.getElementById("btnLogin");
//点击登录按钮
oBtn.onclick=function(){
这种方法是通过JS在事件绑定里动态创建和移除这些标签，然后设置他们的 id 和 style 属性。当然，我们也可以将HTML结构先放在html文件里，默认情况下隐藏它们，然后在事件绑定里控制它们的显示与隐藏即可！
阅读(...) 评论()未注册过用户可以点击直接登录哦！
使用注册邮箱登录
选择画板...
你已经成功采集到
&|关闭窗口还没有任何记录...
鼠标移到文字上弹出提示层JS+CSS代码
来源：懒人建站
作者： 懒人建站
JS特效：鼠标移到文字上弹出提示层JS+CSS代码
鼠标移到文字上JS+CSS代码
本文链接：/js/texiao/42.html
(责任编辑：懒人建站)
鼠标移到文字上弹出提示层JS+CSS代码由懒人建站收集整理，您可以自由传播，请主动带上本文链接
就是免费分享，觉得有用就多来支持一下，没有能帮到您，懒人也只能表示遗憾，希望有一天能帮到您。
鼠标移到文字上弹出提示层JS+CSS代码-相关文章
评论列表（网友评论仅供网友表达个人看法，并不表明本站同意其观点或证实其描述）js 鼠标移下去弹出层效果 - JavaScript当前位置:& &&&js 鼠标移下去弹出层效果js 鼠标移下去弹出层效果&&网友分享于：&&浏览：15次js 鼠标移上去弹出层效果
把下面的代码存入一个js文件，然后在你需要显示层的标签中加入 title="body=[这里是南京***B公司历史记录喔~~~]"& if (typeof document.attachEvent!='undefined') {&& window.attachEvent('onload',init);&& document.attachEvent('onmousemove',moveMouse);&& document.attachEvent('onclick',checkMove); }else {&& window.addEventListener('load',init,false);&& document.addEventListener('mousemove',moveMouse,false);&& document.addEventListener('click',checkMove,false);}var oDv=document.createElement("div");var dvHdr=document.createElement("div");var dvBdy=document.createElement("div");var windowlock,boxMove,fixposx,fixposy,lockX,lockY,fixx,fixy,ox,oy,boxLeft,boxRight,boxTop,boxBottom,evt,mouseX,mouseY,boxOpen,totalScrollTop,totalScrollLboxOpen=ox=10;oy=10;lockX=0;lockY=0;function init() {&&& oDv.appendChild(dvHdr);&&& oDv.appendChild(dvBdy);&&& oDv.style.position="absolute";&&& oDv.style.visibility='hidden';&&& document.body.appendChild(oDv);&&& }function defHdrStyle() {}function defBdyStyle() {&&& dvBdy.style.border='1px solid #ccc';//层的边框&&& dvBdy.style.width='210px';&&& dvBdy.style.fontFamily='arial';&&& dvBdy.style.fontSize='14';&&& dvBdy.style.textAlign='left';&&& dvBdy.style.padding='30';&&& dvBdy.style.color='#000';&&& dvBdy.style.background='#fff';&&& dvBdy.style.filter='alpha(opacity=80)'; // IE&&& dvBdy.style.opacity='0.8'; // FF}function checkElemBO(txt) {if (!txt || typeof(txt) != 'string')if ((txt.indexOf('body')&-1)&&(txt.indexOf('[')&-1)&&(txt.indexOf('[')&-1))&&else&&}function scanBO(curNode) {&&&&& if (checkElemBO(curNode.title)) {&&&&&&&& curNode.boHDR=getParam('header',curNode.title);&&&&&&&& curNode.boBDY=getParam('body',curNode.title);&&&&&&&&&&& curNode.boCSSBDY=getParam('cssbody',curNode.title);&&&&&&&&&&& &&&&&&&&&&& curNode.boCSSHDR=getParam('cssheader',curNode.title);&&&&&&&&&&& curNode.IEbugfix=(getParam('hideselects',curNode.title)=='on')?true:&&&&&&&&&&& curNode.fixX=parseInt(getParam('fixedrelx',curNode.title));&&&&&&&&&&& curNode.fixY=parseInt(getParam('fixedrely',curNode.title));&&&&&&&&&&& curNode.absX=parseInt(getParam('fixedabsx',curNode.title));&&&&&&&&&&& curNode.absY=parseInt(getParam('fixedabsy',curNode.title));&&&&&&&&&&& curNode.offY=(getParam('offsety',curNode.title)!='')?parseInt(getParam('offsety',curNode.title)):10;&&&&&&&&&&& curNode.offX=(getParam('offsetx',curNode.title)!='')?parseInt(getParam('offsetx',curNode.title)):10;&&&&&&&&&&& curNode.fade=(getParam('fade',curNode.title)=='on')?true:&&&&&&&&&&& curNode.fadespeed=(getParam('fadespeed',curNode.title)!='')?getParam('fadespeed',curNode.title):0.04;&&&&&&&&&&& curNode.delay=(getParam('delay',curNode.title)!='')?parseInt(getParam('delay',curNode.title)):0;&&&&&&&&&&& if (getParam('requireclick',curNode.title)=='on') {&&&&&&&&&&&&&&& curNode.requireclick=&&&&&&&&&&&&&&& document.all?curNode.attachEvent('onclick',showHideBox):curNode.addEventListener('click',showHideBox,false);&&&&&&&&&&&&&&& document.all?curNode.attachEvent('onmouseover',hideBox):curNode.addEventListener('mouseover',hideBox,false);&&&&&&&&&&& }&&&&&&&&&&& else {// Note : if requireclick is on the stop clicks are ignored&&&&&&&&&&&&&& &&&&&&&&&&&&&& if (getParam('doubleclickstop',curNode.title)!='off') {&&&&&&&&&&&&&&&&&& document.all?curNode.attachEvent('ondblclick',pauseBox):curNode.addEventListener('dblclick',pauseBox,false);&&&&&&&&&&&&&& }&&& &&&&&&&&&&&&&& if (getParam('singleclickstop',curNode.title)=='on') {&&&&&&&&&&&&&&&&&& document.all?curNode.attachEvent('onclick',pauseBox):curNode.addEventListener('click',pauseBox,false);&&&&&&&&&&&&&& }&&&&&&&&&& }&&&&&&&&&&& curNode.windowLock=getParam('windowlock',curNode.title).toLowerCase()=='off'?false:&&&&&&&&&&& curNode.title='';&&&&&&&&&&& curNode.hasbox=1;&&&&&& }&&&&&& else&&&&&&&&& curNode.hasbox=2;& }function getParam(param,list) {&&& var reg = new RegExp('([^a-zA-Z]' + param + '|^' + param + ')\\s*=\\s*\\[\\s*(((\\[\\[)|(\\]\\])|([^\\]\\[]))*)\\s*\\]');&&& var res = reg.exec(list);&&&&&& if(res)&&&&&&& return res[2].replace('[[','[').replace(']]',']');&&& else&&&&&&& return '';}function Left(elem){&&& &&& var x=0;&&& if (elem.calcLeft)&&&&&&& return elem.calcL&&& var oElem=&&& while(elem){&&&&&&&& if ((elem.currentStyle)&& (!isNaN(parseInt(elem.currentStyle.borderLeftWidth)))&&(x!=0))&&&&&&&&&&&& x+=parseInt(elem.currentStyle.borderLeftWidth);&&&&&&&& x+=elem.offsetL&&&&&&&& elem=elem.offsetP&&&&& }&&& oElem.calcLeft=x;&&&&&& }function Top(elem){&&&& var x=0;&&&& if (elem.calcTop)&&&&&&&& return elem.calcT&&&& var oElem=&&&& while(elem){&&&&&&& &&&&&&&&& if ((elem.currentStyle)&& (!isNaN(parseInt(elem.currentStyle.borderTopWidth)))&&(x!=0))&&&&&&&&&&&& x+=parseInt(elem.currentStyle.borderTopWidth);&&&&&&&& x+=elem.offsetT&&&&&&&&&&&& elem=elem.offsetP&&&& }&&&& oElem.calcTop=x;&&&&&&& }var ah,function applyStyles() {&&& if(ab)&&&&&&& oDv.removeChild(dvBdy);&&& if (ah)&&&&&&& oDv.removeChild(dvHdr);&&& dvHdr=document.createElement("div");&&& dvBdy=document.createElement("div");&&& CBE.boCSSBDY?dvBdy.className=CBE.boCSSBDY:defBdyStyle();&&& CBE.boCSSHDR?dvHdr.className=CBE.boCSSHDR:defHdrStyle();&&& dvHdr.innerHTML=CBE.boHDR;&&& dvBdy.innerHTML=CBE.boBDY;&&& ah=&&& ab=&&& if (CBE.boHDR!='') {&&&&&&& &&&&&&& oDv.appendChild(dvHdr);&&&&&&& ah=&&& }&&& &&& if (CBE.boBDY!=''){&&&&&&& oDv.appendChild(dvBdy);&&&&&&& ab=&&& }&&& }var CSE,iterElem,LSE,CBE,LBE, totalScrollLeft, totalScrollTop, width,var ini=// Customised function for inner window dimensionfunction SHW() {&& if (document.body && (document.body.clientWidth !=0)) {&&&&& width=document.body.clientW&&&&& height=document.body.clientH&& }&& if (document.documentElement && (document.documentElement.clientWidth!=0) && (document.body.clientWidth + 20 &= document.documentElement.clientWidth)) {&&&&& width=document.documentElement.clientW& &&&&& height=document.documentElement.clientH& && }& && return [width,height];}var ID=function moveMouse(e) {&& //boxMove=&&& e?evt=e:evt=&&& CSE=evt.target?evt.target:evt.srcE&&& &&& if (!CSE.hasbox) {&&&&&& // Note we need to scan up DOM here, some elements like TR don't get triggered as srcElement&&&&&& iElem=CSE;&&&&&& while ((iElem.parentNode) && (!iElem.hasbox)) {&&&&&&&&& scanBO(iElem);&&&&&&&&& iElem=iElem.parentN&&&&&& }&&&&& &&& }&&& &&& if ((CSE!=LSE)&&(!isChild(CSE,dvHdr))&&(!isChild(CSE,dvBdy))){&&&&&&& &&&&&& if (!CSE.boxItem) {&&&&&&&&&&& iterElem=CSE;&&&&&&&&&&& while ((iterElem.hasbox==2)&&(iterElem.parentNode))&&&&&&&&&&&&&&&&&&& iterElem=iterElem.parentN&&&&&&&&&&& CSE.boxItem=iterE&&&&&&&&&&& }&&&&&&& iterElem=CSE.boxI&&&&&&& if (CSE.boxItem&&(CSE.boxItem.hasbox==1))& {&&&&&&&&&&& LBE=CBE;&&&&&&&&&&& CBE=iterE&&&&&&&&&&& if (CBE!=LBE) {&&&&&&&&&&&&&&& applyStyles();&&&&&&&&&&&&&&& if (!CBE.requireclick)&&&&&&&&&&&&&&&&&&& if (CBE.fade) {&&&&&&&&&&&&&&&&&&&&&&& if (ID!=null)&&&&&&&&&&&&&&&&&&&&&&&&&&& clearTimeout(ID);&&&&&&&&&&&&&&&&&&&&&&& ID=setTimeout("fadeIn("+CBE.fadespeed+")",CBE.delay);&&&&&&&&&&&&&&&&&&& }&&&&&&&&&&&&&&&&&&& else {&&&&&&&&&&&&&&&&&&&&&&& if (ID!=null)&&&&&&&&&&&&&&&&&&&&&&&&&&& clearTimeout(ID);&&&&&&&&&&&&&&&&&&&&&&& COL=1;&&&&&&&&&&&&&&&&&&&&&&& ID=setTimeout("oDv.style.visibility='visible';ID=",CBE.delay);&&&&&&&&&&&&&&&&&&&&&&& &&&&&&&&&&&&&&&&&&& }&&&&&&&&&&&&&&& if (CBE.IEbugfix) {hideSelects();}&&&&&&&&&&&&&&& fixposx=!isNaN(CBE.fixX)?Left(CBE)+CBE.fixX:CBE.absX;&&&&&&&&&&&&&&& fixposy=!isNaN(CBE.fixY)?Top(CBE)+CBE.fixY:CBE.absY;&&&&&&&&&&& &&&&&&&&&&&&&&& lockX=0;&&&&&&&&&&&&&&& lockY=0;&&&&&&&&&&&&&&& boxMove=&&&&&&&&&&&&&&& ox=CBE.offX?CBE.offX:10;&&&&&&&&&&&&&&& oy=CBE.offY?CBE.offY:10;&&&&&&&&&&& }&&&&&&& }&&&&&&& else if (!isChild(CSE,dvHdr) && !isChild(CSE,dvBdy) && (boxMove))&&& {&&&&&&&&&&& // The conditional here fixes flickering between tables cells.&&&&&&&&&&& if ((!isChild(CBE,CSE)) || (CSE.tagName!='TABLE')) {&&&&&&&&&&&&&& &&&&&&&&&&&&&& CBE=&&&&&&&&&&&&&& if (ID!=null)&&&&&&&&&&&&&&&&&&&&& clearTimeout(ID);&&&&&&&&&&&&&& fadeOut();&&&&&&&&&&&&&& showSelects();&&&&&&&&&&& }&&&&&&& }&&&&&&& LSE=CSE;&&& }&&& else if (((isChild(CSE,dvHdr) || isChild(CSE,dvBdy))&&(boxMove))) {&&&&&&& totalScrollLeft=0;&&&&&&& totalScrollTop=0;&&&&&&& &&&&&&& iterElem=CSE;&&&&&&& while(iterElem) {&&&&&&&&&&& if(!isNaN(parseInt(iterElem.scrollTop)))&&&&&&&&&&&&&&& totalScrollTop+=parseInt(iterElem.scrollTop);&&&&&&&&&&& if(!isNaN(parseInt(iterElem.scrollLeft)))&&&&&&&&&&&&&&& totalScrollLeft+=parseInt(iterElem.scrollLeft);&&&&&&&&&&& iterElem=iterElem.parentN&&&&&&&&&&& &&&&&&& }&&&&&&& if (CBE!=null) {&&&&&&&&&&& boxLeft=Left(CBE)-totalScrollL&&&&&&&&&&& boxRight=parseInt(Left(CBE)+CBE.offsetWidth)-totalScrollL&&&&&&&&&&& boxTop=Top(CBE)-totalScrollT&&&&&&&&&&& boxBottom=parseInt(Top(CBE)+CBE.offsetHeight)-totalScrollT&&&&&&&&&&& doCheck();&&&&&&& }&&& }&&& &&& if (boxMove&&CBE) {&&&&&&& // This added to alleviate bug in IE6 w.r.t DOCTYPE&&&&&&& bodyScrollTop=document.documentElement&&document.documentElement.scrollTop?document.documentElement.scrollTop:document.body.scrollT&&&&&&& bodyScrollLet=document.documentElement&&document.documentElement.scrollLeft?document.documentElement.scrollLeft:document.body.scrollL&&&&&&& mouseX=evt.pageX?evt.pageX-bodyScrollLet:evt.clientX-document.body.clientL&&&&&&& mouseY=evt.pageY?evt.pageY-bodyScrollTop:evt.clientY-document.body.clientT&&&&&&& if ((CBE)&&(CBE.windowLock)) {&&&&&&&&&&& mouseY & -oy?lockY=-mouseY-oy:lockY=0;&&&&&&&&&&& mouseX & -ox?lockX=-mouseX-ox:lockX=0;&&&&&&&&&&& mouseY & (SHW()[1]-oDv.offsetHeight-oy)?lockY=-mouseY+SHW()[1]-oDv.offsetHeight-oy:lockY=lockY;&&&&&&&&&&& mouseX & (SHW()[0]-dvBdy.offsetWidth-ox)?lockX=-mouseX-ox+SHW()[0]-dvBdy.offsetWidth:lockX=lockX;&&&&&&&&&&& &&&&&&& }&&&&&&& oDv.style.left=((fixposx)||(fixposx==0))?fixposx:bodyScrollLet+mouseX+ox+lockX+"px";&&&&&&& oDv.style.top=((fixposy)||(fixposy==0))?fixposy:bodyScrollTop+mouseY+oy+lockY+"px";&&&&&&& &&&&&&& &&& }}function doCheck() {&&& &&& if (&& (mouseX & boxLeft)&&& ||&&&& (mouseX &boxRight)&&&& || (mouseY & boxTop) || (mouseY & boxBottom)) {&&&&&&& if (!CBE.requireclick)&&&&&&&&&&& fadeOut();&&&&&&& if (CBE.IEbugfix) {showSelects();}&&&&&&& CBE=&&& }}function pauseBox(e) {&& e?evt=e:evt=&&& boxMove=&&& evt.cancelBubble=}function showHideBox(e) {&&& oDv.style.visibility=(oDv.style.visibility!='visible')?'visible':'hidden';}function hideBox(e) {&&& oDv.style.visibility='hidden';}var COL=0;var stopfade=function fadeIn(fs) {&&&&&&& ID=&&&&&&& COL=0;&&&&&&& oDv.style.visibility='visible';&&&&&&& fadeIn2(fs);}function fadeIn2(fs) {&&&&&&& COL=COL+&&&&&&& COL=(COL&1)?1:COL;&&&&&&& oDv.style.filter='alpha(opacity='+parseInt(100*COL)+')';&&&&&&& oDv.style.opacity=COL;&&&&&&& if (COL&1)&&&&&&&& setTimeout("fadeIn2("+fs+")",20);&&&&&&& }function fadeOut() {&&& oDv.style.visibility='hidden';&&& }function isChild(s,d) {&&& while(s) {&&&&&&& if (s==d)&&&&&&&&&&&&&&&&&& s=s.parentN&&& }&&&}var cSfunction checkMove(e) {&&& e?evt=e:evt=&&& cSrc=evt.target?evt.target:evt.srcE&&& if ((!boxMove)&&(!isChild(cSrc,oDv))) {&&&&&&& fadeOut();&&&&&&& if (CBE&&CBE.IEbugfix) {showSelects();}&&&&&&& boxMove=&&&&&&& CBE=&&& }}function showSelects(){&& var elements = document.getElementsByTagName("select");&& for (i=0;i& elements.i++){&&&&& elements[i].style.visibility='visible';&& }}function hideSelects(){&& var elements = document.getElementsByTagName("select");&& for (i=0;i& elements.i++){&& elements[i].style.visibility='hidden';&& }}把上面的代码存入一个js文件，然后在你需要显示层的标签中加入 title="body=[这里是南京***B公司历史记录喔~~~]"&
12345678910
12345678910
12345678910 上一篇：下一篇：文章评论相关解决方案 12345678910 Copyright & &&版权所有}