ネイティブ js はドラッグ可能なログインボックス効果を実装します-jsチュートリアル-php.cn

ネイティブ js はドラッグ可能なログインボックス効果を実装します

高洛峰

リリース： 2017-02-08 17:19:25

オリジナル

1392 人が閲覧しました

实现原理

1.onmousemove事件触发时不断更新鼠标的pageXY改变位置，

登陆框的偏移量=鼠标当前位置-鼠标到登录框边框的距离

2.onmousedown鼠标摁下时触发事件获取鼠标到登陆框的距离，再设置true允许拖拽

3.onmouseup 鼠标弹起设置false停止拖拽

4.登录框居中显示公式：(可视区域宽高-登录框宽高)/2

5.当浏览器窗口大小变化时触发事件window.onresize 再更新登陆框居中显示

代码中有详细的注释

完整代码

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>demo</title>
<style>
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td{margin:0;padding:0;}
body,button,input,select,textarea{font:12px/1.5 tahoma,arial,\5b8b\4f53;}
h1,h2,h3,h4,h5,h6{font-size:100%;}
address,cite,dfn,em,var{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;}
a:hover{text-decoration:underline;}
sup{vertical-align:text-top;}
sub{vertical-align:text-bottom;}
legend{color:#000;}
fieldset,img{border:0;}
button,input,select,textarea{font-size:100%;}
table{border-collapse:collapse;border-spacing:0;}
.clear{clear: both;float: none;height: 0;overflow: hidden;}
/*p{font-size: 100px;}*/
#btn{width: 80px;
 height: 40px;
 background: #3b7ae3;
 margin:0 auto;
 display: block;
 cursor: pointer;
 border-style: none;
 color: #fff;
 font-size: 16px;}
#mask{
 background: #000;
 opacity: 0.75;
 filter: alpha(opacity=75);
 height: 1000px;
 width: 100%;
 position: absolute;
 left: 0;
 top: 0;
 z-index: 1000;
}
#login{position: absolute; top: 100px; left: 100px; width: 400px; height: auto; border:1px solid #d5d5d5; z-index: 1001; }
.title{position: relative;background-color: #f7f7f7; cursor: move; height: 50px; line-height: 50px; font-size: 16px; color: #333; padding-left:30px;}
.close{position: absolute; top:0; right: 10px; color: #ccc;}
.content{background: #fff; padding: 15px 20px;}
.user{margin-bottom: 15px;}
.password{margin-bottom: 15px;}
.pt{display: block;
 height: 38px;
 padding-left: 15px;
 border: 1px solid #ddd;
 transition: .3s;
 font-size: 14px;
 color: #666;
 width: 343px;
 }
.sm{display: block;
 height: 48px;
 border: 1px solid #ddd;
 transition: .3s;
 font-size: 16px;
 color: #666;
 width: 360px;
 background: #3b7ae3;
 color: #fff;}
</style> 
</head> 
<body>
 <!-- <div id="mask"></div> -->
 <button id="btn" href="">登录</button>
 <!-- <div class="login" id="login">
 <div class="title" id="title">登录百度账号<a href="#" class="close">x</a></div>
 <div class="content">
 <div class="user"><input class="pt" type="input" value="手机/邮箱/用户名"></div>
 <div class="password"><input class="pt" type="input" value="密码"></div>
 <div class="submit"><input class="sm" type="submit" value="登录"></div>
 </div>
 </div> -->
<script type="text/javascript">
 function b(){ 
 //创建遮罩层div并插入body
 var mask=document.createElement("div");
 mask.id="mask";
 mask.style.height=cheight+"px";
 //宽度直接用100%在样式里
 document.body.appendChild(mask);
 //创建登录层div并插入body
 var login=document.createElement("div");
 login.id="login";
 login.innerHTML=&#39;<div class="title" id="title">登录百度账号&#39;+&#39;<a href="#" class="close">x</a>&#39;+&#39;</div>&#39;+
 &#39;<div class="content">&#39;+&#39;<div class="user">&#39;+&#39;<input class="pt" type="input" value="手机/邮箱/用户名">&#39;+&#39;</div>&#39;+&#39;<div class="password">&#39;+&#39;<input class="pt" type="input" value="密码">&#39;+&#39;</div>&#39;+&#39;<div class="submit">&#39;+&#39;<input class="sm" type="submit" value="登录">&#39;+&#39;</div>&#39;+&#39;</div>&#39;;
 document.body.appendChild(login);
 //窗口可视区域宽度
 var cwidth= document.documentElement.clientWidth || document.body.clientWidth;
 //窗口可视区域高度
 var cheight= document.documentElement.clientHeight || document.body.clientHeight;
 //登录框宽度
 var lwidth=login.offsetWidth;
 //登录框高度
 var lheight=login.offsetHeight;
 //设置登录框的居中显示
 login.style.left=(cwidth-lwidth)/2+"px";
 login.style.top=(cheight-lheight)/2+"px";
 //设置遮罩层的高度
 mask.style.height=cheight+"px";
 //改变窗口大小后依然居中显示
 window.onresize=function(){
 if(document.compatMode=="CSS1Compat"){  
cwidth=document.documentElement.clientWidth;
cheight=document.documentElement.clientHeight;
 }else{  
  cwidth=document.body.clientWidth;
  cheight=document.body.clientHeight;
 }
 login.style.left=(cwidth-lwidth)/2+"px";
 login.style.top=(cheight-lheight)/2+"px";
 mask.style.height=cheight+"px";
 }
 //获取拖拽容器
 var title=document.getElementById("title");
 var isDraging=false;
 var mouseOffsetX;
 var mouseOffsetY;
 //鼠标按下事件
 title.onmousedown=function(e){
 var e=e||window.event;
 /*var el=e.srcElement;
 if(!el){
 el=e.target;//兼容火狐
 }*/
 //鼠标相对于登录框的位置
 mouseOffsetX=e.pageX-login.offsetLeft;
 mouseOffsetY=e.pageY-login.offsetTop;
 //鼠标摁下时为true
 isDraging=true;
 /*console.log(mouseOffsetY, mouseOffsetX)*/
 }
 //鼠标移动事件
 document.onmousemove=function(e){
 var e=e||window.event;
 //鼠标移动时的坐标
 var newMX=e.pageX;
 var newMY=e.pageY;
 //判断为true时可以拖拽
 if(isDraging===true){
 //登录框的偏移值=当前位置-鼠标到登录框的距离
 var loginL=newMX-mouseOffsetX;
 var loginT=newMY-mouseOffsetY;
 //如果left top值超过边缘时就让他等于边缘
 if(loginL<0){
 loginL=0;
 }else if(loginL>(cwidth-lwidth)){
 loginL=cwidth-lwidth;
 }
 if(loginT<0){
 loginT=0;
 }else if(loginT>(cheight-lheight)){
 loginT=cheight-lheight;
 }
 login.style.left=loginL+"px";
 login.style.top=loginT+"px";
 } 
 }
 //鼠标弹起时设置为不可拖拽
 document.onmouseup=function(){
 isDraging=false;
 }
 //点击X关闭登录框和弹出层
 var close=login.getElementsByClassName("close")[0];
 close.onclick=function(){
 document.body.removeChild(mask);
 document.body.removeChild(login);
 }
 }
 //点击登录弹出登录框和弹出层
 window.onload=function(){
 var btn=document.getElementById("btn");
 btn.onclick=function(){
 b();
 }
 }
</script> 
</body> 
</html>