Html
    Css
    Js

    
                        
 .login-header {
	width:100%;
	text-align:center;
	height:30px;
	font-size:24px;
	line-height:30px;
}
ul,li,ol,dl,dt,dd,div,p,span,h1,h2,h3,h4,h5,h6,a {
	padding:0px;
	margin:0px;
}
.login {
	width:512px;
	position:absolute;
	border:#ebebeb solid 1px;
	height:280px;
	left:50%;
	right:50%;
	background:#ffffff;
	box-shadow:0px 0px 20px #ddd;
	z-index:9999;
	margin-left:-250px;
	margin-top:140px;
	display:none;
}
.login-title {
	width:100%;
	margin:10px 0px 0px 0px;
	text-align:center;
	line-height:40px;
	height:40px;
	font-size:18px;
	position:relative;
	cursor:move;
	-moz-user-select:none;
	/*火狐*/
      -webkit-user-select:none;
	/*webkit浏览器*/
      -ms-user-select:none;
	/*IE10*/
      -khtml-user-select:none;
	/*早期浏览器*/
      user-select:none;
}
.login-input-content {
	margin-top:20px;
}
.login-button {
	width:50%;
	margin:30px auto 0px auto;
	line-height:40px;
	font-size:14px;
	border:#ebebeb 1px solid;
	text-align:center;
}
.login-bg {
	width:100%;
	height:100%;
	position:fixed;
	top:0px;
	left:0px;
	background:#000000;
	filter:alpha(opacity=30);
	-moz-opacity:0.3;
	-khtml-opacity:0.3;
	opacity:0.3;
	display:none;
}
a {
	text-decoration:none;
	color:#000000;
}
.login-button a {
	display:block;
}
.login-input input.list-input {
	float:left;
	line-height:35px;
	height:35px;
	width:350px;
	border:#ebebeb 1px solid;
	text-indent:5px;
}
.login-input {
	overflow:hidden;
	margin:0px 0px 20px 0px;
}
.login-input label {
	float:left;
	width:90px;
	padding-right:10px;
	text-align:right;
	line-height:35px;
	height:35px;
	font-size:14px;
}
.login-title span {
	position:absolute;
	font-size:12px;
	right:-20px;
	top:-30px;
	background:#ffffff;
	border:#ebebeb solid 1px;
	width:40px;
	height:40px;
	border-radius:20px;
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

原生JS拖拽效果

更新时间:2020-07-02 00:25:42

通过原生js动态计算元素的left与top改变元素的自由定位

0