首页 > 代码库 > 原生js实现拖拽弹框的效果
原生js实现拖拽弹框的效果
研究了一上午，模仿了拖拽弹框的效果，小有成就
<script type="text/javascript">
function getByClass(classname,parent){
var par=parent||document,
eles=par.getElementsByTagName("*"),
needArr=[];
for(var i=0;i<eles.length;i++){
if(eles[i].className==classname){
needArr.push(eles[i]);
}
}
return needArr;
}
var oDom=document.getElementById("dialogin_html");
var oTarget=getByClass("dialog-tit",oDom)[0];
window.onload=drag;
function drag(){
oTarget.onmousedown=fnDown;
}
function fnDown(event){
var e=event||window.event,
difX=e.clientX-oDom.offsetLeft,
difY=e.clientY-oDom.offsetTop;
document.onmousemove=function(e){
var e=e||window.event,
x=e.clientX-difX,
y=e.clientY-difY,
docuW=document.body.clientWidth||document.documentElement.clientWidth,
docuH=document.body.clientHeight||document.documentElement.clientHeight;
if(x<0){
x=0;
}
if(y<0){
y=0;
}
if(x>docuW-oDom.offsetWidth){
x=docuW-oDom.offsetWidth;
}
if(y>docuH-oDom.offsetHeight){
y=docuH-oDom.offsetHeight;
}
oDom.style.left=x+"px";
oDom.style.top=y+"px";
document.title=e.clientX-difX+":"+(e.clientY-difY);
}
document.onmouseup=function(){
document.onmousemove=null;
document.onmouoseup=null;
}
}
</script>
以上是大致的js代码，具体代码如下：
<!DOCTYPE html ><html ><head><meta charset="utf-8" /><title>无标题文档</title><style type="text/css">/** * Created by caojiangtao on 14-10-13. */@charset "utf-8";/****************************** common- 2014-09-13 caojiangtao jt_cao007@qq.com*******************************//*reset*/body, h1, h2, h3, h4, h5, h6, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td, figure, select { margin: 0; padding: 0; font-family: Verdana,"Lantinghei SC", "Hiragino Sans GB", "Microsoft Yahei", Helvetica, arial, \5b8b\4f53, sans-serif;}h1, h2, h3, h4, h5, h6, button, input, select, textarea { font-size: 100%; font-weight: normal;}body{ background: #fff}address, cite, dfn, em, var,i{ font-style: normal}code, kbd, pre, samp { font-family: courier new, courier, monospace}small { font-size: 12px}ul, ol { list-style: none}a { text-decoration: none}sup { vertical-align: text-top}sub { vertical-align: text-bottom}legend { color: #000}fieldset, img { border: 0}table { border-collapse: collapse; border-spacing: 0}.f_l{ float: left;}.f_r{ float: right;}input::-moz-focus-inner, button::-moz-focus-inner { border:0; padding:0; outline:0}.none{ display:none!important;}iframe { vertical-align: top;}s { text-decoration: none;}button { border: 0 none;}article, aside, footer, header, hgroup, nav, section, figure, figcaption, video { display: block;}input { outline: none; border: 0;}.cf { zoom: 1;}.cf:after { content: ‘‘; display: block; clear: both; height: 0; overflow: hidden; visibility: hidden;}.relative{position: relative;}.absolute{ position: absolute}input, img, label, select { vertical-align: middle;}.b { font-weight: bold;}.fw_no { font-weight: normal}.text_under { text-decoration: underline;}.curs { cursor: pointer;}.w-1000 { width: 1000px; margin: 0 auto;}.flex{ position:fixed!important; top:0; left:0; width:100%; background: #fff!important; z-index: 900!important; border-bottom: 1px solid #e8e8e8; -webkit-box-shadow: rgba(0,0,0,.1) 0 1px 5px; -moz-box-shadow: rgba(0,0,0,.1) 0 1px 5px; box-shadow: rgba(0,0,0,.1) 0 1px 5px;}.loginflex{ position: fixed; left:50%; margin-left: 312px; top:0px; z-index: 1000;}.index-title { font-size: 48px; text-align: center; color: #000; line-height: 80px;}.w-1000{width:1000px; }/*h1~h6*/.h1-title{ font-size: 24px; color: #35b558; line-height: 80px;}.h2-title, h2.h2-title{ font-size: 20px; color: #333;}.color-red{color: #ff5c00!important;}/*公用按钮*/.greenbtn { display: inline-block; color: #fff; /*padding:10px 50px;*/ border-radius: 3px; font-size: 18px; background: #35b558; -webkit-transition-duration: 0.8s; transition-duration: 0.8s; -webkit-transition-property: background; transition-property: background; -webkit-transform: translateZ(0); transform: translateZ(0);}.greenbtn:hover, .greenbtn:focus, .greenbtn:active { background:#66d178; color:#fff;}.orange-color{ color: #ff6600;}.orinagebtn{ background: #ff5c00; color: #fff; padding:5px 20px; border-radius: 3px; -webkit-transition-duration: 0.8s; transition-duration: 0.8s; -webkit-transition-property: background; transition-property: background; -webkit-transform: translateZ(0); transform: translateZ(0);}.orinagebtn:hover, .orinagebtn:focus, .orinagebtn:active { background:#ff8530; /*color:#000;*/}.garybtn:hover, .garybtn:focus, .garybtn:active { background:#ff7600; color:#000;}.mar-t10{ margin-top:10px!important;}.mar-t20{ margin-top:20px!important;}.mar-t30{ margin-top:30px!important;}.mar-t40{ margin-top:40px!important;}.mar-t50{ margin-top:50px!important;}.mar-t60{ margin-top:60px!important;}.mar-t70{ margin-top:70px!important;}.mar-t80{ margin-top:80px!important;}.mar-t90{ margin-top:90px!important;}.mar-l20{ margin-left: 20px!important; }.mar-l25{ margin-left: 25px!important; }.mar-l40{ margin-left: 40px!important; }.mar-l30{ margin-left: 30px!important; }.mar-r20{ margin-right: 20px!important; }.mar-r25{ margin-right: 25px!important; }.mar-r30{ margin-right: 30px!important; }.mar-r40{ margin-right: 40px!important; }.mar-b10{ margin-bottom: 10px!important; }.mar-b15{ margin-bottom: 15px!important; }.mar-b40{ margin-bottom: 40px!important; }.mar-b30{ margin-bottom: 30px!important; }/**********header*******/#header{height:40px; margin: 0 auto; padding:10px 0; position: relative; }#header .logo{ float: left;width:113px;}#header .loginbox, #header .loginbox_event{float:right; text-align: right; line-height: 40px; font-size: 12px; color:#333; display: inline-block;}#header .loginbox i.tag-icon, #header .loginbox_event i.tag-icon{ background:url("../images/icon.png") 0px -22px no-repeat;width:13px;height:13px;display: inline-block; float: left; margin: 14px 10px 0 0}#header .loginbox em,#header .loginbox_event em{ padding:0px 10px; float: left;}#header .loginbox .sj-icon, #header .loginbox_event .sj-icon{width:13px;height:7px; left:50%; margin-left: -6.5px; top: -7px;}#header .loginbox .user-center, #header .loginbox_event .user-center{ display: none; width:110px; top:40px; left:50%; margin-left:-65px; position: absolute; text-align: center; background: #333; z-index: 2200; color: #fff; font-size: 12px; padding: 10px 0px;}#header .loginbox .user-center a, #header .loginbox_event .user-center a{height:26px; line-height: 26px; display: block; font-size: 12px; color: #ddd;}#header .loginbox .user-center a:hover, #header .loginbox_event .user-center a:hover{ background: #444;}#header .loginbox span,#header .loginbox .user-name, #header .loginbox_event span,#header .loginbox_event .user-name{ cursor: pointer; display: inline-block; float: left;}#header .loginbox .user-name .vip-icon > img , #header .loginbox_event .user-name .vip-icon > img { width: 40px; height: 15px; margin-right: 5px;}#header .loginbox .user-name p img, #header .loginbox_event .user-name p img{width:10px;height:6px; margin-left: 5px; -webkit-transition: -webkit-transform 0.2s ease-in; -moz-transition: -moz-transform 0.2s ease-in; -o-transition: -o-transform 0.2s ease-in; transition: transform 0.2s ease-in;}.rotate{ -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);}#header .loginbox span a,#header .loginbox span a:hover, #header .loginbox_event span a,#header .loginbox_event span a:hover{ color:#333;}/*loading*/#loading{width:100%;height:2px; overflow: hidden; background: #f3f3f3;}#loading .loading-length{width:0px;height:2px; overflow:hidden; background:#35b558; background:-webkit-gradient(linear ,10% 10%,100% 100%, color-stop(0.14,rgb(53,181,80)), color-stop(0.5,rgb(138,202,140)), color-stop(1,rgb(45,133,202)) );}.greencolor{ color: #35b558!important;}/*nav*/#navbox{height:42px; position: relative; z-index: 1100; background: #fff; background:rgba(255,255,255,0.9); border-bottom: 1px solid #e8e8e8; -webkit-box-shadow: rgba(0,0,0,.1) 0 1px 5px; -moz-box-shadow: rgba(0,0,0,.1) 0 1px 5px; box-shadow: rgba(0,0,0,.1) 0 1px 5px;}.navpositon{height:42px;width: 100%;}#navbox .learnav-content{ display:none;width:100%;height:160px; background: #343536; background:rgba(52,53,54,0.95); position: absolute; z-index: 1000; top:43px; }#navbox .learnav-content .content-one{width:1000px; margin: 0 auto;height:130px; display: none;}#navbox .learnav-content .content-one a,#navbox .learnav-content .content-one span{ display: inline-block; margin-right: 20px; color: #fff; font-size: 12px;}#navbox .learnav-content .content-one ul{ margin-top: 30px;}#navbox .learnav-content .content-one li{ margin-bottom: 15px; line-height: 17px;height:17px;}#navbox .learnav-content .content-one .hybox{width:33.3%; float: left; margin-top:15px;}#navbox .learnav-content .hybox h4{ font-size: 22px; color: #ddd;}#navbox .learnav-content .hybox h4 span{ color: #35b558; font-size: 22px;}#navbox .learnav-content .hybox p{ font-size: 12px; color: #bbb; padding: 5px 0px;}#navbox .learnav-content .content-one .content-one-h2{ font-size: 12px; line-height: 17px; height:17px; color: #fff; margin-top: 30px; }#navbox .learnav-content .content-one .content-one-h2 a{ float: right; color: #ddd}#navbox .learnav-content .content-one a{ font-size: 12px; color: #ddd;}#navbox .learnav-content .content-one a:hover{ color: #35b558!important;}#navbox .learnav-content .content-one .hybox a{ color: #35b558; font-size: 14px;}#navbox .learnav-content .content-one dl{ margin-top: 20px;}#navbox .learnav-content .content-one dd{ width:100px; float: left; margin-right: 60px; text-align: center}#navbox .learnav-content .content-one dd a:hover{ text-decoration: none;}#navbox .learnav-content .content-one dd a:hover img{ opacity: 0.8;}#navbox .learnav-content .content-one dd h3, #navbox .learnav-content .content-one dd h2{ text-align: center; font-size: 12px; margin-top: 5px; width:120px;}#navbox .learnav-content .content-one a:hover{ color: #35b558; text-decoration:none; }#navbox .nav{height:42px; position: relative}#navbox .nav .navbox{width:540px;}#navbox .nav a{ display: inline-block; padding: 0px 22px; font-size:14px; color: #333; line-height: 44px; }#navbox .nav a:nth-child(1){ padding: 0px; margin-right: 22px; }#navbox .nav a.on{ background: url("../images/abc.png") center bottom no-repeat; background-size: 13px 7px; -webkit-background-size: 13px 8px; -moz-background-size:13px 7px;}#navbox .nav .searchbox{width:40px;height:30px; overflow: hidden; position: absolute; z-index: 10;right:0; top:5.5px; border-radius: 3px; /*background: #e2e2e2;*/font-size: 12px; }#navbox .nav .searchbox input{height:30px; background: none;width:170px; }#navbox .nav .searchbox i{ background: url("../images/icon.png") 0 0 no-repeat;width:22px;height:22px; float: left; margin: 6px 10px 0px 10px; cursor:pointer;}/*footer*/#footer{ background: #222; padding-top: 30px; text-align: center;}#footer .jkinfor-block { margin-bottom: 30px; display: inline-block; }#footer .jkinfor-block .jkinfor{width:645px; float: left; text-align: left;}#footer .jkinfor dl{ width:130px; margin-right: 30px; color: #dadada; float: left;}#footer .jkinfor dl dt{font-size: 14px; }#footer .jkinfor dl dd{ font-size: 12px; margin-top: 13px;}#footer .jkinfor a{ color: #dadada; padding-left: 5px;}#footer .jkinfor a:hover{ color: #dadada;}#footer .search-share{width:305px;float:right; }#footer .search-share .searchbox{ width:305px;height:30px; }#footer .search-share .searchbox input{ background: #333;width:215px;height:30px; padding:0px 10px; color: #fff; font-size: 12px; float: left;}#footer .search-share .searchbox button{width:70px;height:30px; float: left; line-height: 30px; text-align: center; font-size: 14px; color: #fff; background: #444; cursor: pointer; border:none; outline: none;}#footer .search-share .share{ margin-top: 15px;}#footer .search-share .share a{ width:32px;height:32px; display: inline-block; float: left; margin-right: 10px;}#footer .search-share .share a.sina-icon{ background: url("../images/icon.png") -23px 0px no-repeat;}#footer .search-share .share a.sina-icon:hover{ background-position: -23px -40px;}#footer .search-share .share a.qq-icon{ background: url("../images/icon.png") -23px -82px no-repeat;}#footer .search-share .share a.qq-icon:hover{ background-position: -23px -122px;}#footer .partners { width:1000px; color: #777; font-size: 12px; margin:0 auto 10px auto; text-align: left; display: inline-block; line-height: 150%; }#footer .partners .partners-friend-tit { float: left; width: 65px; }#footer .partners .partners-friend-body { float: right; width: 935px }#footer .partners a{ padding:0px 5px 0px 0px; color: #777; font-size: 12px; display: inline-block; }#footer .partners span{ float: right;}#footer .partners a:hover{ }#footer .copyright{ font-size: 12px; color: #777; width:100%; margin: 0 auto; padding-bottom: 10px; width: 1000px; text-align: left;}.gotop{position: fixed; left: 50%; margin-left: 510px; bottom: 50px; width: 34px; text-align: center; z-index: 2000;}.gotop span{ cursor: pointer; }.gotop span.top{ display: block; background: url("../images/gotop.jpg") 0 0px no-repeat; background-size: 34px 103px;width:34px;height:34px;}.gotop span.top:hover{background: url("../images/gotop2.jpg") 0 0px no-repeat; background-position: 0px 0px ;background-size: 34px 103px;-webkit-background-size: 34px 103px;-moz-background-size:34px 103px;}.gotop span.erwma{ position:relative;display: block; background: url("../images/gotop.jpg") 0 -34px no-repeat; background-size: 34px 103px;width:34px;height:34px;}.gotop span.erwma img{ width:126px;height:159px; position: absolute; z-index: 2100; left:-126px; top:-70px; display: none}.gotop a.diaocha{display: block; background: url("../images/gotop.jpg") 0 -68px no-repeat; background-size: 34px 103px;width:34px;height:34px;}.gotop span.erwma:hover{background: url("../images/gotop2.jpg") 0 -34px no-repeat; background-size: 34px 103px;-webkit-background-size: 34px 103px;-moz-background-size:34px 103px;}.gotop a.diaocha:hover{background: url("../images/gotop2.jpg") 0 -68px no-repeat; background-size: 34px 103px;-webkit-background-size: 34px 103px;-moz-background-size:34px 103px;}#page-nav{ text-align: right; margin-top: 45px;}#page-nav a{ display: inline-block;width:32px;height:32px; border:none; margin-left: 3px; line-height: 32px;text-align: center; font-size: 12px; background: #f3f3f3; color: #333;}#page-nav a.prev,#page-nav a.next{width:70px;}#page-nav a.on{ background: #35b558; color: #fff;}#page-nav a:hover{ background: #35b558; color: #fff;}#page-nav a.last{ color: #cacaca!important;}.lesson-flex{position: fixed!important;left:50%; margin-left: -500px; z-index: 300; }/*块级显示*/.lesson-list ul{width:790px; margin-top: 25px;}.lesson-list ul li{width:240px;height:238px; float: left; margin-right: 23px; background: #ccc; margin-bottom: 24px;}.lesson-list .lessonimg-box{width:240px;height:130px;position: relative}.lesson-list .lessonimg-box .lessonimg{width:240px;height:130px;}.lesson-list .lessonimg-box .free-icon{height:22px;width:38px;display: inline-block;position: absolute; top:-2px;right:8px; z-index: 101; background: url("../images/icon.png") -58px -43px no-repeat; }.right-45{right:45px!important;}.lesson-list .lessonimg-box .hot-icon{height:22px;width:38px;display: inline-block;position: absolute; top:-2px;right:13px; z-index: 21; background: url("../images/icon.png") -58px -70px no-repeat;}.lesson-list .lesson-infor{ padding: 10px; position:relative; z-index: 200; /*height:152px;*/height:88px;overflow: hidden; background: #fff;}.lesson-list .lesson-hover{background: #f3f3f3!important;}.lesson-list .lesson-infor h5, .lesson-list .lesson-infor .lesson-info-h2 { font-size:14px; color: #333; line-height: 18px; margin-bottom: 12px;height:36px; overflow: hidden;}.lesson-list .lesson-infor h5 a, .lesson-list .lesson-infor .lesson-info-h2 a{ color: #333; }.lesson-list .lesson-infor h5 a:hover, .lesson-list .lesson-infor .lesson-info-h2 a:hover{ color: #333; }.lesson-list .lesson-infor p{ color: #808080;font-size: 12px; line-height: 18px;height:0;overflow: hidden; opacity: 0; margin-bottom: 10px; display: none;}.lesson-list .lesson-infor .timeandicon{ font-size: 12px; color: #808080; position: relative;}.lesson-list .lesson-infor .timeandicon dl{width:140px;float: left; }.lesson-list .lesson-infor .timeandicon dl dd{ font-size: 12px;}.lesson-list .lesson-infor .timeandicon .time-icon{ background: url("../images/clok.png") 0px 0px no-repeat; width:14px;height:14px; display: block; float: left; margin-right:8px; background-size: 14px 14px; }.lesson-list .lesson-infor .timeandicon .learn-number{ float: right; display: none;}.lesson-list .lesson-infor .zhongji{ display: none;}.mar-b8{margin-bottom:8px;}.lesson-infor .timeandicon .xinhao-icon{ background: url("../images/one-ji.png") 0px 0px no-repeat; background-size:14px 14px; width:14px;height:14px; display: block; float: left; margin-right:8px;}.lesson-infor .timeandicon .xinhao-icon2{ background: url("../images/tow-ji.png") 0px 0px no-repeat; background-size:14px 14px; width:14px;height:14px; display: block; float: left; margin-right:8px;}.lesson-infor .timeandicon .xinhao-icon3{ background: url("../images/three-ji.png") 0px 0px no-repeat; background-size:14px 14px; width:14px;height:14px; display: block; float: left; margin-right:8px;}.lesson-list .lesson-infor .lessonicon-box{ position: absolute; right:0px; text-align: right; bottom: 4px;}.lesson-list .lesson-infor .lessonicon-box a{ display: inline-block;width:16px;height:16px; margin-left: 3px;}.lesson-list .lesson-infor .lessonicon-box a img{ display: block;width:16px;height:16px;}/*.lesson-list .lesson-infor .lessonicon-box a.android{background:url("../images/icon.png") 0px -88px no-repeat; }*//*.lesson-list .lesson-infor .lessonicon-box a.ios{background:url("../images/icon.png") 0px -106px no-repeat; }*//*.lesson-list .lesson-infor .lessonicon-box a.java{background:url("../images/icon.png") -101px 0px no-repeat; }*//*.lesson-list .lesson-infor .lessonicon-box a.html5{background:url("../images/icon.png") -101px -21px no-repeat; }*//*.lesson-list .lesson-infor .lessonicon-box a.cocos2d{background:url("../images/icon.png") -101px -42px no-repeat; }*//*.lesson-list .lesson-infor .lessonicon-box a.python{background:url("../images/icon.png") -99px -61px no-repeat; }*//*.lesson-list .lesson-infor .lessonicon-box a.flash{background:url("../images/icon.png") -99px -82px no-repeat; }*//*.lesson-list .lesson-infor .lessonicon-box a.typescript{background:url("../images/icon.png") -99px -103px no-repeat; }*/.lesson-list .lessonplay{ background: #000; background:rgba(0,0,0,0.15);width:100%;height:100%; z-index: 100; position: absolute;left:0; top:0; opacity:0; }.lesson-list .lessonplay .playericon{ position: absolute; z-index:120;width:40px;height:40px; display: block; left: 50%;margin-left: -20px;top:50%; margin-top: -20px; background: url("../images/player_icon.png") 0 0 no-repeat; cursor: pointer; background-size: 40px 40px; }/*面包屑导航 */.crumbs {height:48px; line-height: 48px; font-size: 12px; color:#bbb; overflow: hidden;}.crumbs a,.crumbs span{ color: #bbb; }.crumbs em{margin:0px 3px; display: inline-block;}.crumbs a:hover{color: #35b558;}/*网站公共表单样式*/.jkxy-form{ width: 100%; height: 100%; display: inline-block;}.jkxy-form .boder-r{ border-right: 1px dashed #ebebeb;}.jkxy-form .form-l{ float: left; width: 400px; display: inline-block;}.form-l .form-dom{ display: inline-block;}.form-dom .form-tit{ float: left; margin: 0; padding: 0; width: 100px; font-size: 12px; line-height: 30px; text-align: right;}.form-dom .form-tit > i{ line-height: 30px; padding-right: 3px; color: #ff3300;}.form-dom .form-input{ float: left; width: 300px;}.form-input .greenbtn{ padding: 10px 50px;}.form-dom .form-tip{ height: 30px; line-height: 30px;}.form-c{ float: left; width: 100%; display: inline-block;}.form-r { float: right; width: 210px; display: inline-block;}.form-r > p{ font-size: 14px; color: #999; line-height: 180%;}.reg-url{ font-size: 14px; color: #ff5c00;}.login-url{ font-size: 14px; color: #ff5c00;}.login-url-arrow{ padding-top: 5px; margin-left: 5px; width: 16px; height: 16px; display: inline-block; vertical-align: middle; background: url("../images/common/arrow-red.png") no-repeat;}.jkxy-input{ margin: 0; padding-left: 5px; padding-top: 3px; width: 220px; line-height: 25px; vertical-align: middle; font-size: 14px; border-radius: 2px; border: 1px solid #ccc;}.jkxy-textarea{ padding: 5px; width: 350px; height: 100px; font-size: 14px; line-height: 150%; border-radius: 2px; border: 1px solid #ccc;}.jkxy-checkbox{ float: left; height: 40px; margin-left: 10px; margin-right: 3px; vertical-align: baseline;}.jkxy-select{ padding: 0.5em 0.5em; color: #333; font-size: 14px; border: 1px solid #ccc;}.jkxy-checkcode{ width: 80px;}.form-tip-succ{ font-size: 12px; color: green;}.form-tip-error{ font-size: 12px; color: red;}.form-tip-warn{ font-size: 12px; color: #ff5c00;}span.form-icon-succ{ width: 16px; height: 16px; display: inline-block; background: url(‘../images/common/tip_succ.png‘) no-repeat;}span.form-icon-error{ width: 16px; height: 16px; display: inline-block; background: url(‘../images/common/tip_error.png‘) no-repeat;}.form-autologin{ padding: 0; font-size: 12px; color: #999; vertical-align: top;}.form-autologin > input{ vertical-align: text-top;}.form-agreement{ font-size: 12px; color: #999;}.form-forgetpwd{ float: right; margin-right: 75px; font-size: 12px; color: #999; text-decoration: underline;}/*落地页面的提示框，类似在头顶的小条幅，点击“X”消失*/.web-tip-warning{ width: 100%; color: rgb(174,157,73); background: #fbf2ce;}.web-tip-warning p a{color: #FF5C00;}.web-tip-normal{ width: 100%; color: #666; background: #f3f3f3;}.web-tip-normal p a{color: #35b558;}.web-tip-normal > p > i.icon-close{ float: right; width: 16px; height: 16px; display: inline-block; cursor: pointer;}.web-tip-warning > p, .web-tip-normal > p{ margin: 0 auto; padding: 0.6em 0em 0.6em 0em; width: 1000px; font-size: 12px;}/*弹窗的样式*/.dialog{ margin: 0 auto; width: 650px; height: auto; display: inline-block; text-align: center; background: #FFF; border-radius: 3px;}.dialog .dialog-box{ }.dialog .dialog-box .dialog-tit{ padding-top: 15px; width: 100%; height: 40px; background-color: #ddd; cursor:move;}.dialog-tit > span.poptit{ float: left; margin-left: 20px; font-size: 18px; color: #35b558;}.dialog-tit > span.popclose{ float: right; margin-right: 20px; width: 16px; height: 16px; cursor: pointer; background: url("../images/common/icon-delete.png");}.dialog .dialog-box .dialog-body{ margin: 30px auto; display: inline-block; text-align: left;}/*warning*/.waring-success{background:#35b558; }.waring-failure{background:#ff8d1d;}.waring-sub{ background:#2d85ca;}#warning{position:fixed;top:-40px;left:50%; z-index: 60000;opacity:0; padding:5px 20px; line-height: 40px; border-bottom-right-radius: 5px;border-bottom-left-radius: 5px; font-size:18px; font-weight: 400;color: #fff; text-align: center;}/*登录离线*/.login-offline{ margin: 0 auto; width: 572px; text-align: center;}.login-offline .login-offline-green{ font-size: 18px; color: #35b558;}.login-offline .login-offline-relogin{ font-size: 14px; color: #999;}.login-offline .login-offline-relogin > a{ color: #FF5C00; text-decoration: underline;}.login-offline-bottom{ border-top: 1px dashed #e8e8e8;}.login-offline-bottom .offline-danxin{ float: left; margin-left: 20px; margin-right: 55px; font-size: 14px; color: #999;}.login-offline-bottom .offline-service{ float: left; font-size: 14px; color: #999;}.login-offline-bottom .offline-danxin > a, .login-offline-bottom .offline-service > a{ color: #2d85ca; text-decoration: underline;}/*free-vip*/ .free-vip{background: #35b558;height:70px;width:100%; color: #fff;}.free-vip strong{ font-weight:normal;font-size:24px; font-weight: normal; line-height: 70px;}.free-vip a.greenbtn{ width:140px;height:40px; display: block; line-height: 40px; font-size: 18px; background: #28a24a; color: #fff; text-align: center; float: right; margin-top:15px; border-radius:3px;} .free-vip a.greenbtn:hover{ background:#66d178;} .freevip-infor{margin-top: 100px;} .freevip-infor li{width:290px;height:180px; float: left; margin-right: 65px;} .freevip-infor li img{ width:48px; float: left; margin-top: 3px;} .freevip-infor li div{ margin-left: 68px;} .freevip-infor li strong{ font-size: 20px; font-weight: normal; color: #333;} .freevip-infor li p{ font-size: 12px; color: #666; line-height: 24px;}.triangle-bl { width: 0; height: 0; border-bottom: 20px solid #f3f3f3; border-right: 20px solid transparent;}.triangle-br { width: 0; height: 0; border-bottom: 20px solid #f3f3f3; border-left: 20px solid transparent;}.small-buyvipbtn{ margin: 0; padding-left: 5px; padding-right: 5px; padding-top: 2px; padding-bottom: 2px; background: #ff5c00; border-radius: 3px; color: #fff; font-size: 12px; text-align: center;}.small-buyvipbtn-noclick{ background: #35b558; color: #fff; cursor: default;}/*支付-弹窗提示*/.pay-dialog > p{ font-size: 14px; color: #999;}.pay-dialog .pay-btn-box{}.pay-btn-box .orinagebtn{ margin-right: 20px; display: inline-block; color: #fff; padding:10px 40px; border-radius: 3px; font-size: 18px; background: #ff5c00; -webkit-transition-duration: 0.8s; transition-duration: 0.8s; -webkit-transition-property: background; transition-property: background; -webkit-transform: translateZ(0); transform: translateZ(0);}.pay-btn-box .orinagebtn:hover, .pay-btn-box .orinagebtn:focus, .pay-btn-box .orinagebtn:active { background:#ff7600; color:#000;}.pay-btn-box .greybtn{ display: inline-block; color: #999; padding:10px 40px; border-radius: 3px; font-size: 18px; background: #e8e8e8; -webkit-transition-duration: 0.8s; transition-duration: 0.8s; -webkit-transition-property: background; transition-property: background; -webkit-transform: translateZ(0); transform: translateZ(0);}.pay-btn-box .greybtn:hover, .pay-btn-box .greybtn:focus, .pay-btn-box .greybtn:active { background:#ff7600; color:#000;}.pay-dialog-fail > p{ font-size: 12px; color: #999; line-height: 200%;}.pay-dialog-fail > p.pay-fail-h1{ font-size: 18px; color: #35b558;}#login-user{ color: #35b558; }/*warningpop*/#warningpop{width:600px; background: #000; background:rgba(0,0,0,0.4); margin:0 auto; padding: 15px 15px 1px 15px; border-radius: 3px; display: none; }#warningpop .text{padding:10px;font-size: 14px; color: #666; text-align: center; background: #fff; margin-bottom: 15px;}#warningpop .text .close-img{cursor:pointer; width:20px;height:20px;float: right;}#warningpop .title{height:15px; margin-bottom: 10px;}#warningpop .popclose{width:15px;height:15px; float: right; cursor: pointer;}.gotop span.news{ width:34px;height:34px; background: #ff3c00; color: #fff; text-align: center; line-height: 34px; font-size: 18px; display: block}/* 技术问答未登录提示框 */.jkxy-subask-nologin{ text-align: center; padding: 3em 2em; background: #fff; font-size: 14px; margin-top: 20px; border: 1px solid #ccc;}.jkxy-subask-nologin > a{ color: #35b558; padding: 0 3px;}/*Orginal Style from ethanschoonover.com/solarized (c) Jeremy Hull <sourdrums@gmail.com> @date 2014-11-03 cntnn11 修改代码块背景色，增加border-radius:5px;*/.hljs { display: block; overflow-x: auto; padding: 0.5em; background: #fffbf1; color: #657b83; -webkit-text-size-adjust: none; border-radius: 3px; } .hljs-comment, .hljs-template_comment, .diff .hljs-header, .hljs-doctype, .hljs-pi, .lisp .hljs-string, .hljs-javadoc { color: #93a1a1; } /* Solarized Green */ .hljs-keyword, .hljs-winutils, .method, .hljs-addition, .css .hljs-tag, .hljs-request, .hljs-status, .nginx .hljs-title { color: #859900; } /* Solarized Cyan */ .hljs-number, .hljs-command, .hljs-string, .hljs-tag .hljs-value, .hljs-rules .hljs-value, .hljs-phpdoc, .hljs-dartdoc, .tex .hljs-formula, .hljs-regexp, .hljs-hexcolor, .hljs-link_url { color: #2aa198; } /* Solarized Blue */ .hljs-title, .hljs-localvars, .hljs-chunk, .hljs-decorator, .hljs-built_in, .hljs-identifier, .vhdl .hljs-literal, .hljs-id, .css .hljs-function { color: #268bd2; } /* Solarized Yellow */ .hljs-attribute, .hljs-variable, .lisp .hljs-body, .smalltalk .hljs-number, .hljs-constant, .hljs-class .hljs-title, .hljs-parent, .hljs-type, .hljs-link_reference { color: #b58900; } /* Solarized Orange */ .hljs-preprocessor, .hljs-preprocessor .hljs-keyword, .hljs-pragma, .hljs-shebang, .hljs-symbol, .hljs-symbol .hljs-string, .diff .hljs-change, .hljs-special, .hljs-attr_selector, .hljs-subst, .hljs-cdata, .css .hljs-pseudo, .hljs-header { color: #cb4b16; } /* Solarized Red */ .hljs-deletion, .hljs-important { color: #dc322f; } /* Solarized Violet */ .hljs-link_label { color: #6c71c4; } .tex .hljs-formula { background: #eee8d5; }.ask-text img { max-width: 100%; }/*筛选列表头部*/.lesson-tx{background: #f3f3f3;height:189px; border:1px solid #f3f3f3;}.lesson-tx .leftimg{width: 80px; margin-right: 20px;}.lesson-tx .tx-infor{width:900px;}.lesson-tx .tx-infor h1{font-size: 24px;color: #333; margin-bottom: 15px; font-weight: bold;height:30px;overflow: hidden;}.lesson-tx .tx-infor p{font-size: 12px;color: #666; line-height: 18px;height:54px; overflow: hidden;}.lesson-tx .tx-nav{width:100%;height:30px; margin-top: 15px;}.lesson-tx .tx-nav li{ float:left; text-align: center;width:33.33%; box-sizing: border-box;font-size: 18px; color: #333; line-height: 30px;}.lesson-tx .tx-nav li a{ color: #333;}.lesson-tx .tx-nav li a:hover{color: #35b558;}.lesson-tx .tx-sj { width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid #fff; bottom:-17px; position: absolute; z-index: 300; left:157px;}.lesson-tx .tx-lb { width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid #fff; bottom:-17px; position: absolute; z-index: 300; left:490px;}.lesson-tx .tx-ljt { width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid #fff; bottom:-17px; position: absolute; z-index: 300; left:825px;}#B-blacklayer{width:100%;position: absolute; top:0;left:0; z-index: 6000; display: block; background: #000;background:rgba(0,0,0,0.4)!important; }#browser{width:570px;height:240px; padding: 60px 40px; background: #fff; border-radius: 3px; position:fixed; left:50%;margin-left: -325px; top:50%;margin-top:-190px; z-index: 7000;}#browser .b-title{ color: #35b558; font-size: 20px; text-align: center;}#browser .b-title strong{ color: #35b558; font-size: 24px; text-align: center;}#browser p{ color: #666; font-size: 12px; line-height: 22px; margin:30px 0px 70px 0;}#browser .downloading{ text-align: center;}#browser .downloading a{ display: inline-block; margin:0px 20px}::selection { background:#35b558; color: #fff; }::-moz-selection { background:#35b558; color: #fff; }::-webkit-selection { background:#35b558; color: #fff; }/*没有数据时显示的内容*/.no-contnet-block{ width: 100%; text-align: center; }.no-contnet-block .no-contnet-box{ margin: 0 auto; width: 600px; height: auto; }.no-contnet-block .no-contnet-box .no-content-img{ float: left; width: 75px; height: 75px; }.no-contnet-block .no-contnet-box .no-content-img img{ width: 100%; }.no-contnet-block .no-contnet-box .no-content-h3{ float: left; margin-left: 36px; padding: 0; width: 440px; text-align: left; }.no-contnet-block .no-contnet-box .no-content-h3 .no-content-textbig{ font-size: 16px; color: #666; line-height: 230%; }.no-contnet-block .no-contnet-box .no-content-h3 .no-content-text{ font-size: 12px; color: #999; line-height: 140%; }</style></head><body> <div id="dialogin_html" class="dialog" style="width: 650px; height: 380px; z-index: 9999; top: 100.5px; left: 349.5px; position: fixed;"><div class="dialog-box"><div class="dialog-tit"><span class="poptit">登录</span><span class="popclose"></span></div><div class="dialog-body"><div class="jkxy-form"><form id="loginForm" novalidate="novalidate"><input type="hidden" value="54fc8b689ab4e4516fde14c4155a158e" name="verifypwd" id="verifypwd" class="verifypwd"><div class="boder-r form-l"><div class="form-dom"><div class="form-tit"><i>*</i>用户名：</div><div class="form-input"><input type="text" placeholder="请填写用户名" name="username" id="username" class="jkxy-input required" aria-required="true"><span></span><div class="form-tip form-tip-succ"></div></div></div><div class="form-dom"><div class="form-tit"><i>*</i>密码：</div><div class="form-input"><input type="password" placeholder="输入密码" name="password" id="password" class="jkxy-input required" aria-required="true"><span></span><div class="form-tip form-tip-error"> </div></div></div><div id="verifyBox" style="display:none;" class="form-dom"><div class="form-tit"><i>*</i>验证码：</div><div class="form-input"><input type="text" style="width:80px;" data-type="blur" class="jkxy-input" name="safecode" autocomplete="off" maxlength="4" placeholder="输入验证码"> <a id="verifyA" href="javascript:void(0);"><img border="0" align="absmiddle" style="cursor: pointer" alt="点击刷新验证码" src="" id="verifyImg"></a><span></span><div class="form-tip form-tip-error"> </div></div></div><div class="form-dom"><div class="form-tit"> </div><div class="form-input"><label class="form-autologin"><input type="checkbox" checked="checked" value="1"> 自动登录</label><a class="form-forgetpwd" href="/sso/forget.html">忘记密码</a></div></div></div><div class="form-r"><p>还没有极客学院账号？</p><p>请 <a href="/sso/reg" class="login-url ">成为极客</a> <i class="login-url-arrow"></i></p><p class="mar-t40">或使用以下账号直接登录：</p><p class="mar-t10"><a href="http://www.jikexueyuan.com/sso/connect/t/qq.html"><img alt="qq" src="http://s1.jikexueyuan.com/current/static/images/common/qq-login.png"></a></p><p class="mar-t10"><a href="http://www.jikexueyuan.com/sso/connect/t/eoe.html"><img alt="eoe" src=`"http://s1.jikexueyuan.com/current/static/images/common/eoe-login.png"></a></p></div><div class="form-c"><div class="form-dom"><div class="form-tit"> </div><div class="form-input"><a id="subLoginBtn" class="greenbtn" href="#"> 登 录 </a></div></div></div></form></div></div></div></div> <div id="blacklayer" style="z-index: 9989; filter:alpha(opacity=40);opacity:0.4; position: absolute; left: 0px; top: 0px; width: 100%; background: none repeat scroll 0px 0px rgb(0, 0, 0); height:100%;"></div></body><script type="text/javascript"> function getByClass(classname,parent){ var par=parent||document, eles=par.getElementsByTagName("*"), needArr=[]; for(var i=0;i<eles.length;i++){ if(eles[i].className==classname){ needArr.push(eles[i]); } } return needArr; } var oDom=document.getElementById("dialogin_html"); var oTarget=getByClass("dialog-tit",oDom)[0]; window.onload=drag; function drag(){ oTarget.onmousedown=fnDown; } function fnDown(event){ var e=event||window.event, difX=e.clientX-oDom.offsetLeft, difY=e.clientY-oDom.offsetTop; document.onmousemove=function(e){ var e=e||window.event, x=e.clientX-difX, y=e.clientY-difY, docuW=document.body.clientWidth||document.documentElement.clientWidth, docuH=document.body.clientHeight||document.documentElement.clientHeight; if(x<0){ x=0; } if(y<0){ y=0; } if(x>docuW-oDom.offsetWidth){ x=docuW-oDom.offsetWidth; } if(y>docuH-oDom.offsetHeight){ y=docuH-oDom.offsetHeight; } oDom.style.left=x+"px"; oDom.style.top=y+"px"; document.title=e.clientX-difX+":"+(e.clientY-difY); } document.onmouseup=function(){ document.onmousemove=null; document.onmouoseup=null; } }</script></html>
原生js实现拖拽弹框的效果
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。