码迷，mamicode.com
首页 > Web开发 > 详细

原生js实现拖拽弹框的效果

时间：2014-12-02 17:10:35      阅读：636      评论：0      收藏：0      [点我收藏+]

标签：android   style   blog   http   io   ar   color   os   使用   

研究了一上午，模仿了拖拽弹框的效果，小有成就

<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">&nbsp;</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="输入验证码">&nbsp;&nbsp;<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">&nbsp;</div></div></div><div class="form-dom"><div class="form-tit">&nbsp;</div><div class="form-input"><label class="form-autologin"><input type="checkbox" checked="checked" value="1">&nbsp;自动登录</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>&nbsp;<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">&nbsp;</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实现拖拽弹框的效果

标签：android   style   blog   http   io   ar   color   os   使用   

原文地址：http://www.cnblogs.com/jiaojiaome/p/4137774.html
踩
(2)
赞
(2)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！