<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="js/jquery-1.9.1.min.js" type="text/javascript" charset="utf-8"></script>
<title></title>
<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>
</head>
<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="sadfsdaf" 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="submit" 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">
$(function(){
$(".close").on("click",close);
function close(){
$("#dialog").hide();
$(".mask").hide();
}
$("#login").on("click",login);
function login(){
$("#dialog").css({
"left":($(window).width()-$("#dialog").innerWidth())/2+"px",
"top":($(window).height()-$("#dialog").innerHeight())/2+"px"
})
$("#dialog").show();
$(".mask").css({
"width":$(window).width(),
"height":$(window).height()
});
$(".mask").show();
}
$("#diatitle").on('mousedown',down);
function down(event){
deltax=event.clientX-$("#dialog").offset().left;
deltay=event.clientY-$("#dialog").offset().top;
$("#diatitle").css({
"cursor":"move"
})
$(document).on('mousemove',move);
$(document).on('mouseup',up);
};
function move(event){
$("#dialog").css({
"left":(event.clientX-deltax)+"px",
"top":(event.clientY-deltay)+"px"
})
if($("#dialog").offset().left<0){
$("#dialog").css({"left":"0px" })
}
if($("#dialog").offset().top<0){
$("#dialog").css({"top":"0px" })
}
if($("#dialog").offset().top>$(window).height()-$("#dialog").innerHeight()){
$("#dialog").css({"top":$(window).height()-$("#dialog").innerHeight() })
}
if($("#dialog").offset().left>$(window).width()-$("#dialog").innerWidth()){
$("#dialog").css({"left":$(window).width()-$("#dialog").innerWidth()})
}
return false;
};
function up(event){
$(document).off('mousedown',down);
$(document).off('mousemove',move);
};
});
</script>
</html>

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

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

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>登 ...

  2. React Editor 应用编辑器(1) - 拖拽功能剖析

    这是可视化编辑器 Gaea-Editor 的第一篇连载分析文章,希望我能在有限的篇幅讲清楚制作这个网页编辑器的动机,以及可能带来的美好使用前景(画大饼).它会具有如下几个特征: 运行在网页 文档流布局 ...

  3. JQuery UI的拖拽功能

    JQuery UI是JQuery官方支持的WebUI 代码库,包含底层交互.动画.特效等API,并且封装了一些Web小部件(Widget).同时,JQuery UI继承了jquery的插件支持,有大量 ...

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

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

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

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

  6. vue下使用echarts折线图及其横坐标拖拽功能

    vue页面中使用折线图,并且有时间段筛选.因此就需要用到横坐标的拖拽功能. 界面效果如下: 现在来看这个效果的实现代码: drawLine() { let that = this, lineDate ...

  7. JQuery UI的拖拽功能实现方法小结

    JQuery UI提供的API极大简化了拖拽功能的开发.只需要分别在拖拽源(source)和目标(target)上调用draggable和droppable两个函数即可. 拖拽原理 首先要明确几个概念 ...

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

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

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

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

随机推荐

  1. Sql server2012连接Sql server 2008时出现的问题：已成功与服务器建立连接，但在登陆过程中发生错误。（provider:SSL Provider,error:0-接收到的消息异常，或格式不正确。）

    以前连接是正常的,就这两天连不上了.(没有耐心的直接看末尾解决办法) 错误消息如下: 1.尝试读取或写入受保护的内存.这通常指示其他内存已损坏.(System.Data) 2.已成功与服务器建立连接, ...

  2. 《超级IP》：伪理论，没能比现有的市场营销理论更高明，只敢勉强去解释已经发生的事情，不敢去预测未来。2星。

    超级IP是作者造出来的一个词.作者尝试把“超级IP”作为一种理论来解释2015年以来的各种网红现象.读完全书后,我的感觉是这个理论不怎么样: 1:作者完全不提现有的市场营销理论.我的问题是:现有的理论 ...

  3. [cocos2d-x]深入--几个代表性的类 (续)

    摘要: 此文对cocos2d-x引擎中最具代表性,最能体现框架结构的几个类做了简单的介绍, 包括Director,Application, Renderer, EventDispatcher, Sch ...

  4. AC日记——基因相关性 openjudge 1.7 03

    03:基因相关性 总时间限制:  1000ms 内存限制:   65536kB 描述 为了获知基因序列在功能和结构上的相似性,经常需要将几条不同序列的DNA进行比对,以判断该比对的DNA是否具有相关性 ...

  5. 记录mysql的具体操作明细

    在MySQL中使用init-connect与binlog来实现用户操作追踪记录 2014-07-28 20:55:38 分类: MySQL 前言:测试环境莫名其妙有几条重要数据被删除了,由于在binl ...

  6. [技巧] 解决Win7下VMware中vmx86.sys报错的问题

    电梯直达 1楼 发表于 2012-7-2 15:14:22||倒序浏览|阅读模式 .pcb { margin-right: 0 } 当以普通用户权限运行的时候,VMware便会如此报错"无法 ...

  7. 未找到数据，异常处理：exception when no_data_found then 异常处理语句；

    未找到数据. 在 select 字段 Into 变量 from 表 where 条件: 这种语句中很有可能会有select 不到数据的问题,导致报错"未找到数据" 要解决这种问题需 ...

  8. TFS命令tf:undo(强制签入签出文件)

    由于修改计算机名称或不同电脑上操作忘记签入,则需要强制签入文件 具体步骤如下: 1.在命令行中输入"cd  C:\Program Files\Microsoft Visual Studio ...

  9. 使用华为U8860测试时出现“Unable to open log device '/dev/log/main': No such file or directory”

    这是因为华为默认禁掉了log输出, 解决办法: 拨号: *#*#2846579#*#* 会显示工程菜单, Go to "ProjectMenu" -> "Backg ...

  10. DEDECMS之九 文章采集

    到很多网友都为织梦(DEDECMS)的采集教程头疼,的确,官方出的教程太笼统了,什么都没说,换个网站你什么都做不了,这个教程是最详尽的教程,让你一看即会! 一.列表采集 第一步.我们打开织梦后台点击采 ...