仿百度首页登陆框拖拽效果（可视窗口内拖动）
生活随笔
收集整理的這篇文章主要介紹了
仿百度首页登陆框拖拽效果（可视窗口内拖动）
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
慕課網視頻地址： http://www.imooc.com/learn/60
<!doctype html> <html lang="en"><head><meta charset="UTF-8" /><title>Document</title><style type="text/css">* {padding: 0px;margin: 0px;}html,body {font-size: 12px;font-family: "微軟雅黑";width: 100%;height: 100%;}.main {text-align: right;line-height: 20px;margin-right: 40px;color: red;}div.mask {width: 100%;height: 100%;background: #000000;opacity: 0.8;position: absolute;top: 0px;left: 0px;display: none;z-index: 10;}.login {display: none;position: absolute;background: white;top: 0px;left: 0px;z-index: 11;width: 391px;border: 1px solid red;}.login a {text-decoration: none;}.login .title {height: 48px;line-height: 48px;color: black;font-size: 16px;border-bottom: 1px solid red;background: #f5f5f5;padding-left: 20px;cursor: move;}.login .close {width: 16px;height: 16px;position: absolute;top: 15px;right: 20px;background: url(img/close_def.png) no-repeat center center;border: 1px solid red;cursor: pointer;}.login .close:hover {background: url(img/close_hov.png) no-repeat center center;}.login .content {padding: 10px 20px;}.login .content div {padding-top: 15px;}.login .content div input {width: 100%;height: 40px;border: 1px solid red;font-size: 16px;color: black;text-indent: 35px;}.login .content div input[type='text'] {background: url(img/input_username.png) no-repeat 3px 0px;}.login .content div input[type='password'] {background: url(img/input_password.png) no-repeat 2px 0px;}.login .content div.now {height: 40px;padding: 0px;line-height: 40px;text-align: right;}.login .content div.sbm {height: 50px;padding: 0px;}.login .content div.sbm input {background: #3b7ae3;border: none;font-size: 16px;color: #fff;border-radius: 5px;display: block;}</style><script type="text/javascript">window.onload = function() {//獲取函數對象function G(id) {return document.getElementById(id);}function autocenter(el) {var bodyW = document.documentElement.clientWidth;var bodyH = document.documentElement.clientHeight;var elW = el.offsetWidth;var elH = el.offsetHeight;el.style.left = (bodyW - elW) / 2 + "px";el.style.top = (bodyH - elH) / 2 + "px";}var mouseoffsetX = 0;var mouseoffsetY = 0;var isdrag = false;G('title').onmousedown = function(e) {var e = e || window.event;mouseoffsetX = e.pageX - G('login').offsetLeft;mouseoffsetY = e.pageY - G('login').offsetTop;isdrag = true; //可拖動標志位};document.onmousemove = function() {var e = e || window.event;var mouseX = e.pageX; //鼠標當前位置var mouseY = e.pageY;var moveX = 0; //鼠標新位置var moveY = 0;if(isdrag == true) {moveX = mouseX - mouseoffsetX;moveY = mouseY - mouseoffsetY;//范圍限定 moveX>0&&moveX<(頁面寬度-浮層寬度)//范圍限定 moveY>0&&moveX<(頁面高度-浮層高度)var bodyW = document.documentElement.clientWidth;var bodyH = document.documentElement.clientHeight;var elW = G('login').offsetWidth;var elH = G('login').offsetHeight;var maxX = bodyW - elW; //left最大值var maxY = bodyH - elH; //top最大值moveX = Math.min(maxX, Math.max(0, moveX)); //這兩句是精華moveY = Math.min(maxY, Math.max(0, moveY));G('login').style.left = moveX + "px";G('login').style.top = moveY + "px";}}document.onmouseup = function() {isdrag = false;}G('lg').onclick = function() {G('mask').style.display = "block";G('login').style.display = "block";autocenter(G('login'));}G('close').onclick = function() {G('mask').style.display = "none";G('login').style.display = "none";}window.onresize = function() {autocenter(G('login'));}}</script></head><body onselectstart="return false"><div class="main"><a href="##" id="lg">登錄</a></div><div class="mask" id="mask"></div><div id="login" class="login"><div class="title" id="title"><span>立即登陸</span><a class="close" id="close"></a></div><div class="content"><div class="user_name"><input type="text" value="" placeholder="注冊用戶名" /></div><div class="pwd"><input type="password" value="" placeholder="登陸密碼" /></div><div class="now"><a href="#">忘記密碼</a></div><div class="sbm"><input type="submit" value="登陸" /></div><div class="now"><a href="#">立即注冊</a></div></div></div></body></html>總結
以上是生活随笔為你收集整理的仿百度首页登陆框拖拽效果（可视窗口内拖动）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： SDOI 2009 学校食堂
- 下一篇： 磁力链接转换为种子文件 magnet t