<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登陆页面的拖拽功能实现</title>
</head>
<style type="text/css">
*{
margin:0;
padding:0;
}
a{
text-decoration: none;
}
.dialog{
width: 380px;
height: auto;
position:fixed;
z-index: 1000;
border: 1px solid #d5d5d5;
background-color:#fff;
display: none;
}
.diatitle{
height: 48px;
line-height: 40px;
text-align: center;
color:#535353;
background-color: #f5f5f5;
}
.diacontent{
padding: 15px 20px;
}
.close{
font-size: 20px;
float: right;
margin-right: 20px;
}
#txt{
width: 100%;
height: 40px;
border: 1px solid #ccc;
margin-bottom: 10px;
}
#pwd{
width: 100%;
height: 40px;
border: 1px solid #ccc;
margin-bottom: 10px;
}
#btn{
display: block;
width:80px;
height: 40px;
margin:0 auto;
background-color: #CCCCCC;
border:none;
outline-style: none;
}
.mask{
background-color:#000000;
opacity: 0.4;
filter:Alpha(opacity=40);
z-index: 900;
position: fixed;
top: 0px;
left: 0px;
display: none;
}
</style>
<body style="height:1500px">
<div class="dialog" id="dialog">
<div class="diatitle" id="diatitle">
登陆页
<a href="#" class="close">&times;</a>
</div>
<div class="diacontent" id="diacontent">
<form action="fsaf" method="post">
<input type="text" name="" id="txt" placeholder="请输入账号" />
<input type="password" name="" id="pwd" placeholder="请输入密码" />
<div id="" style="text-align:right;font-size: 12px;">
<a href="#">忘记密码</a>
</div>
<input type="button" name="" id="btn" value="登陆" />
<div id="" style="text-align:right;font-size: 12px;">
<a href="#">立即注册</a>
</div>
</form>
</div>
</div>
<div class="mask">

</div>
<div id="login">
点击弹出登陆图层
</div>
</body>
<script type="text/javascript">
window.onload=function(){
var close=document.getElementsByClassName("close")[0];
var dialog=document.getElementById("dialog");
var diatitle=document.getElementById("diatitle");
var diacontent=document.getElementById("diacontent");
var mask=document.getElementsByClassName("mask")[0];
var isDraging=false; //是否可拖拽的标记
diatitle.onmousedown=down;
document.onmousemove=move;
document.onmouseup=up;
var login=document.getElementById("login");
login.onclick=function(){
dialog.style.display="block";
mask.style.display="block";
}
//自动居中-登陆浮层
close.onclick=function(){
dialog.style.display="none";
mask.style.display="none";
}

//登陆层居中
autoCenter();
function autoCenter(){
var bodyW = document.documentElement.clientWidth;
var bodyH = document.documentElement.clientHeight;
var elW = dialog.offsetWidth;
var elH = dialog.offsetHeight;
dialog.style.left = ((bodyW-elW)/2-190) + 'px';
dialog.style.top = ((bodyH-elH)/2-80) + 'px';
}
//遮罩层
fillToBody();
function fillToBody(){
mask.style.width = document.documentElement.clientWidth +'px';
mask.style.height = document.documentElement.clientHeight + 'px';
}
按下
function down(){
diatitle.style.cursor="move";
isDraging=true;
objleft=dialog.offsetLeft;
objtop=dialog.offsetTop;
posX = parseInt(mousePosition(event).x)
posY = parseInt(mousePosition(event).y);
offsetX=posX-objleft;
offsetY=posY-objtop;
}
//移动
function move(event) {
if (isDraging == true) {
var x=mousePosition(event).x-offsetX;
var y=mousePosition(event).y-offsetY;
var w = document.documentElement.clientWidth - dialog.offsetWidth;
var h = document.documentElement.clientHeight - dialog.offsetHeight;
x=Math.min(w,Math.max(0,x));
y=Math.min(h,Math.max(0,y));
dialog.style.left = x + 'px';
dialog.style.top = y + 'px';
}
}
//松开
function up() {
isDraging= false;
}
function mousePosition(evt){
var xPos, yPos;
evt = evt || window.event;
if (evt.pageX) {
xPos = evt.pageX;
yPos = evt.pageY;
} else {
xPos = evt.clientX + document.body.scrollLeft - document.body.clientLeft;
yPos = evt.clientY + document.body.scrollTop - document.body.clientTop;
}
return {
x: xPos,
y: yPos
}
}
}
</script>
</html>

js实现登陆页面的拖拽功能的更多相关文章

  1. jq实现登陆页面的拖拽功能

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <script src ...

  2. (Demo分享)利用JavaScript（JS）实现一个九宫格拖拽功能

    利用JavaScript(JS)实现一个九宫格拖拽功能   Demo实现了对任意方格进行拖拽,可以交换位置,其中Demo-1利用了勾股定理判断距离! Demo-1整体思路: 1.首先div实现自由移动 ...

  3. JS实现多Div模块拖拽功能

    空闲时间,同事让帮忙整个JS拖拽div模块功能.于是便在网上搜索,总结如下一个可实现多div模块拖拽的功能.一下是整体的HTML代码, 里边可以控制到 拖拽开始(onStart),拖拽时候(onMov ...

  4. 关于 JS 拖拽功能的冲突问题及解决方法

    前言 我在之前写过关于 JS 拖拽的文章,实现方式和网上能搜到的方法大致相同,别无二致,但是在一次偶然的测试中发现,这种绑定事件的方式可能会和其它的拖拽事件产生冲突,由此产生了对于事件绑定的思考.本文 ...

  5. vuejs2.0使用Sortable.js实现的拖拽功能

    简介 在使用vue1.x之前的版本的时候,页面中的拖拽功能,我在项目中是直接用的jquery ui中的sortable.js,只是在拖拽完成后,在update的回调函数中又重新排序了存放数据的数组.但 ...

  6. vue2.0使用Sortable.js实现的拖拽功能

    简介 在使用vue1.x之前的版本的时候,页面中的拖拽功能,我在项目中是直接用的jQuery ui中的sortable.js,只是在拖拽完成后,在update的回调函数中又重新排序了存放数据的数组.但 ...

  7. vuejs2.0使用Sortable.js实现的拖拽功能( 转)

    文章目录   简介 实现效果 html主要代码 css代码 js代码 简介 在使用vue1.x之前的版本的时候,页面中的拖拽功能,我在项目中是直接用的jquery ui中的sortable.js,只是 ...

  8. 原生js拖拽功能制作滑动条实例教程

    拖拽属于前端常见的功能,很多效果都会用到js的拖拽功能.滑动条的核心功能也就是使用js拖拽滑块来修改位置.一个完整的滑动条包括 滑动条.滑动痕迹.滑块.文本 等元素,先把html代码写出来,如下所示: ...

  9. 通过 JS 实现简单的拖拽功能并且可以在特定元素上禁止拖拽

    前言 关于讲解 JS 的拖拽功能的文章数不胜数,我确实没有必要大费周章再写一篇重复的文章来吸引眼球.本文的重点是讲解如何在某些特定的元素上禁止拖拽.这是我在编写插件时遇到的问题,其实很多插件的拖拽功能 ...

随机推荐

  1. stm32之NVIC

    非本人原创,转载自http://blog.csdn.net/denghuanhuandeng/article/details/8350392 STM32的NVIC理解 例程:  /* Configur ...

  2. 客户访问站点将bbs/链接 跳转至forum/链接下的两种方式

    显性 302 暂时重定向跳转 server { listen 80 ; server_name localhost; index index.html index.htm index.php; roo ...

  3. html5新增及删除标签

    一.新增标签 有一种划分为,功能性标签[html5新增,如canvas,旧浏览器没有]和语义性标签[如header等只是增强语义,没有新功能].下面按照分几个小类来说. 1.结构标签 新增的结构标签, ...

  4. namesilo域名注册教程

    一.注册账号 打开http://www.namesilo.com ,我们先去注册一个Namesilo帐号,然后再在Namesilo注册域名!如图: 接下来,就是填写一些简单资料,如图: 然后Names ...

  5. AngularJS Filters

    过滤器可以使用一个管道字符(|)添加到表达式和指令中. AngularJS 过滤器 AngularJS 过滤器可用于转换数据: 过滤器 描述 currency 格式化数字为货币格式. filter 从 ...

  6. UVA 11800 Determine the Shape --凸包第一题

    题意: 给四个点,判断四边形的形状.可能是正方形,矩形,菱形,平行四边形,梯形或普通四边形. 解法: 开始还在纠结怎么将四个点按序排好,如果直接处理的话,有点麻烦,原来凸包就可搞,直接求个凸包,然后点 ...

  7. switch结构的用法

    已知学生的名字和百分制分数.要求根据学生的百分制分数,分别采用"满分","优秀","良好","及格"和"不及格 ...

  8. c++ learning note

    1/  int 转换成 string 格式 #include<sstream> std::stringstream ss; str::string temp; int n; ss<& ...

  9. 炮（棋盘DP）

    一直以为自己写的就是状态压缩,结果写完才知道是个棋盘dp 首先看一下题目 嗯,象棋 ,还是只有炮的象棋 对于方案数有几种,我第一个考虑是dfs,但是超时稳稳的,所以果断放弃 然后记得以前有过和这个题差 ...

  10. 方便！C++ builder快捷键大全

    Clipboard control (default) Ctrl+Ins Edit|Copy Shift+Del Edit|Cut Shift+Ins Edit|Paste Ctrl+C Edit|C ...