一、css+js简单弹窗:
当鼠标放在上方登录时,弹出下方黑色方框:
<!doctype html>
<html> <head> <meta charset="utf-8"> <title>无标题文档</title> <script type="text/javascript"></script> <style> .class_dl a{ 27px; position: absolute; top: 0px; right: 28px; color: #787878; font-size: 10px; text-decoration: none; } .class_dl{ 20px; height:9px; right: -545px; position: relative; top: 20px; }
/*隐藏文本框的设置*/ #inform{ position: absolute; top: 21px; 160px;
height: 194px;
z-index: 10; background-color: #2b2b2b; /* box-shadow:0px 0px 0px #000; 外阴影*/ display: none; list-style-position:inside; margin-left: -100px; border-radius:4px; } #inform ul li{ list-style-type: none; height: 21px; } .tan1,.tan2,.tan3,.tan4,.tan5{ 17px; height: 17px; } .tan5{ background: url(wangyiyun/img/toplist.png) no-repeat 0px 0px; 17px; height: 17px; position: relative; top: 3px; left: -24px; } .tan1{ background: url(wangyiyun/img/toplist.png) no-repeat -21px -20px; position: relative; top: 2px; left: -24px; } .tan2{ background: url(wangyiyun/img/toplist.png) no-repeat -21px -41px; position: relative; top: 3px; left: -22px; } .tan3{ background: url(wangyiyun/img/toplist.png) no-repeat 0px -21px; position: relative; top: 4px; left: -23px; } .tan4{ background: url(wangyiyun/img/toplist.png) no-repeat 0px -42px; position: relative; top: 3px; left: -25px; } #inform a{ color: #cccccc; font-size: 10px; position: relative; top: -17px; left: 10px; } #inform hr{ 150px; margin-left: -36px; background-color:#232323; height:1px; border:none; } </style> </head> <body> <div class="class_dl"> //弹出的内容
// 加事件,鼠标移到上面时调用showInform内的方法,鼠标离开弹出页面时调用hiddenInform内的方法 <a class="claass_divdian" href="#" onMouseOver="showInform()" onMouseOut="hiddenInform()" >登录</a>
// 加事件,鼠标移到上面时调用showInform内的方法---鼠标离开弹出页面时调用hiddenInform1内的方法 <div id="inform" onMouseOver="showInform()" onMouseOut="hiddenInform1()"> <ul> <li> <div class="tan5"></div> <a href="#" class="tana1"> 手机号登录 </a> </li> <hr> <li> <div class="tan1"></div> <a href="#" class="tana1"> 微信登录 </a> </li> <hr> <li> <div class="tan2"></div> <a href="#" class="tana1"> QQ登录 </a> </li> <hr> <li> <div class="tan3"></div> <a href="#" class="tana1"> 新浪微博登录 </a> </li> <hr> <li> <div class="tan4"></div> <a href="#" class="tana1"> 网易邮箱帐号登录 </a> </li> </ul> </div> </div> </body> </html> <script> //隐藏弹窗 function showInform(){ document.getElementById("inform").style.display='block'; //document.getElementById("inform").css("display","block"); } // 隐藏悬浮层 function hiddenInform(event){ var informDiv = document.getElementById('inform'); var event = evt || window.Event; var x=evt.clientX; var y=evt.clientY; alert(x); var divx1 = informDiv.offsetLeft; var divy1 = informDiv.offsetTop; if(x > divx1){ document.getElementById('inform').style.display='none'; } var divx2 = informDiv.offsetLeft + informDiv.offsetWidth; var divy2 = informDiv.offsetTop + informDiv.offsetHeight; if( x < divx1 || x > divx2 || y < divy1 || y > divy2){ document.getElementById('inform').style.display='none'; } } function hiddenInform1(){ document.getElementById('inform').style.display='none'; } </script>
toplist.png:
二、css+js弹出简单登录框
当鼠标点击登录时,弹出登录框页面进行操作:
操作前效果:
操作后效果:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <script type="text/javascript"></script> <style> /*设置文本框的宽高和边框的宽度及颜色*/ .class_4{ 980px; height: 500px; background-color: #fff; border: 1px solid #d3d3d3; margin: auto; } /*立即登录背景图*/ .neikuang{ 807px; height: 270px; margin: 0 auto; background:url(wangyiyun/img/youneirong/mymusic.png) no-repeat 0px 0px; position: relative; top: 103px; } /*立即登录背景图*/ .neikuang1{ 173px; height: 29px; padding-top: 104px; margin: 0 auto; background:url(wangyiyun/img/youneirong/mymusic.png) no-repeat -332px -265px; position: relative; top: 197px; left: 164px; } /*立即登录鼠标移到到上方时的图片*/ .neikuang1:hover{ background:url(wangyiyun/img/youneirong/mymusic.png) no-repeat 1px -273px; 173px; height: 29px; } /*弹出框*/ #tanchuang{ position: fixed; top: 140px; left: 415px; visibility: hidden; overflow: hidden; border:1px solid #CCC; background-color:#FFFFFF; border-radius:6px; box-shadow:0px 5px 16px #000; } .tanchuang1{ 530px; height: 40px; border: 1px solid #ccc; background: #2d2d2d; border-radius:4px; } .denglu_1{ float: left; position: relative; top: 10px; left: 16px; } .denglu_1 b{ color: #ffffff; } /* 关闭时的图片设置*/ .denglu_2{ float: right; position: relative; 12px; height: 13px; background: url(wangyiyun/img/youneirong/layer.png) no-repeat 0px -93px; top: 14px; left: -19px; } .denglu_2 span{ color: #888888; } /* 内置图片设置*/ .tanchuang2{ 299px; height: 208px; float: left; border-right: 1px dashed #ccc; margin-top: 41px; background: url(wangyiyun/img/youneirong/platform.png) no-repeat 45px 0px; } .tanchuang_input{ 225px; height: 30px; } .tanchuangin{ background: #418fd9; position: relative; top: 130px; left:33px; text-align: center; border-radius:3px; border: 1px solid #3984ce; } .tanchuanginput{ background: #f6f6f6; position: relative; top: 141px; left:33px; border-radius:3px; text-align: center; border: 1px solid #c4c4c4; } .tanchuang3{ 228px; height: 208px; float: left; margin-top: 40px; } .tanchuangnei{ text-decoration: none; position: relative; top: -39px; left: 50px; color: #333333; } .tanchuang3 li{ margin-top: -8px; list-style-type: none; font-size: 13px; } /* 设置图标的背景图及位置*/ .li1,.li3,.li2,.li4{ 41px; height: 47px; position: relative; top: -10px; left: -13px; } .li1{ background: url(wangyiyun/img/logo.png) no-repeat -148px -664px; } .li2{ background: url(wangyiyun/img/logo.png) no-repeat -188px -664px; } .li3{ background: url(wangyiyun/img/logo.png) no-repeat -229px -664px; } .li4{ background: url(wangyiyun/img/logo.png) no-repeat -269px -664px; } </style> </head> <body> <div class="class_4"> <div class="neikuang"> <div class="neikuang1" onclick="showPopup(528,325)"></div> </div> </div> <div id="tanchuang"> <div class="tanchuang1"> <div class="denglu_1"> <b>登录</b> </div> <div class="denglu_2" onclick="hidePopup()"> </div> </div> <div class="tanchuang2"> <a href="#"><input type="button" class="tanchuang_input tanchuangin" value="手机号登录"></a> <a href="#"><input type="button" class="tanchuang_input tanchuanginput" value="注册"></a> </div> <div class="tanchuang3"> <ul> <li class="nnli"> <div class="li1 neili"></div> <a href="#" class="tanchuangnei">微信登录</a> </li> <li> <div class="li2 neili"></div> <a href="#" class="tanchuangnei">QQ登录</a> </li> <li> <div class="li3 neili"></div> <a href="#" class="tanchuangnei">微博登录</a> </li> <li> <div class="li4 neili"></div> <a href="#" class="tanchuangnei">网易邮箱账号登录</a> </li> </ul> </div> </div> </body> </html> <script> var baseText = null; // 获取点击事件的高宽 function showPopup(w,h){ // 获取操作对象的id var popUp = document.getElementById("tanchuang"); // 设置获取对象的上距离 popUp.style.top = "140px"; // 设置获取对象的左距离 popUp.style.left = "415px"; // 设置获取对象的宽度(像素) popUp.style.width = w + "px"; // 设置获取对象的高度(像素) popUp.style.height = h + "px"; // 设置获是否显示对象 popUp.style.visibility = "visible"; } //创建一个删除方法 function hidePopup(){ // 获取操作对象的id var popUp = document.getElementById("tanchuang"); // 设置对象隐藏 popUp.style.visibility = "hidden"; } </script>
mymusic.png:
layer.png:
platform.png:
logo.png: