jQuery实现鼠标拖拽登录框移动效果


Posted in jQuery onSeptember 13, 2020

本文实例为大家分享了jQuery鼠标拖拽登录框移动的具体代码,供大家参考,具体内容如下

1.jQuery代码

<script src="js/jquery-3.5.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
 $(function () {
 // 点击登录跳转
 $("a").click(function () {
  $("#bg,#login").css("display","block");
 })
 // 定义变量
 var $mX;
 var $mY;
 var $move = false; // true是可以移动登录框
 // 鼠标按下事件
 $("#login").mousedown(function (event) {
  $(this).css("opacity",0.5); // 改变透明度
  $move = true;
  // 得到鼠标与登录框原点之间的距离
  $mX = event.pageX-parseInt($(this).css("left"));
  $mY = event.pageY-parseInt($(this).css("top"));
 })
 // 鼠标移动事件
 $("#login").mousemove(function (event) {
  if($move){
  // 得到登录框要移动的量
  $(this).css("left",(event.pageX-$mX)+"px")
  $(this).css("top",(event.pageY-$mY)+"px")
  }
 }).mouseup(function () {
  // 鼠标弹起事件
  $move = false;
  $(this).css("opacity",1);
 })
 })
</script>

2.css

<style type="text/css">
 *{
 margin: 0;
 padding: 0;
 }
 h3{
 display: block;
 width: 300px;
 height: 50px;
 text-align: center;
 line-height: 50px;
 background-color: #0076A9;
 }
 #login{
 width: 300px;
 height: 200px;
 margin: 0 auto;
 position: absolute;
 top: 250px;
 left: 500px;
 border: 1px solid #000000;
 background-color: #FFFFFF;
 cursor: move;
 display: none;
 }
 table{
 position: absolute;
 top: 50px;
 left: 0;
 width: 100%;
 height: 150px;
 text-align:center;
 }
 tr,td{
 border: none;
 }
 tr{
 height: 50px;
 }
 td{
 padding: 0 5px 0 5px;
 }
 #bg{
 width: 100%;
 height: 100%;
 background-color:#999999;
 position: absolute;
 top: 0;
 left: 0;
 display: none;
 }
 body{
 width: 100%;
 height: 600px;
 }
</style>

3.HTML

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title>登录界面</title>
 
 </head>
 <body>
 <a href="javascript:;" >登录</a>
 <div id="bg"></div>
 <form action="javascript:;" id="login" method="">
 <h3>欢迎登录!</h3>
 <table border="1" cellspacing="0" cellpadding="0">
 <tr>
  <td align="right">用户名:</td>
  <td align="left"><input type="text" name="userName"/></td>
 </tr>
 <tr>
  <td align="right">密码:</td>
  <td align="left"><input type="password" name="pwd"/></td>
 </tr>
 <tr>
  <td align="center" colspan="2">
  <input type="button" value="提交"/>
       
  <input type="button" value="重置"/>
  </td>
 </tr>
 </table>
 </form>
 
 </body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
Jquery-data的三种用法
Apr 18 jQuery
jQuery中的deferred对象和extend方法详解
May 08 jQuery
jquery.masonry瀑布流效果
May 25 jQuery
jQuery事件_动力节点Java学院整理
Jul 05 jQuery
运用jQuery写的验证表单(实例讲解)
Jul 06 jQuery
jQuery实现导航栏头部菜单项点击后变换颜色的方法
Jul 19 jQuery
jQuery实现动态加载select下拉列表项功能示例
May 31 jQuery
jQuery实现ajax回调函数带入参数的方法示例
Jun 26 jQuery
jquery的$().each和$.each的区别
Jan 18 jQuery
jquery+css实现Tab栏切换的代码实例
May 14 jQuery
jQuery插件simplePagination的使用方法示例
Apr 28 jQuery
jquery实现穿梭框功能
Jan 19 jQuery
jQuery实现简单全选框
Sep 13 #jQuery
jQuery+ajax实现用户登录验证
Sep 13 #jQuery
jquery实现简易验证插件封装
Sep 13 #jQuery
jQuery实现朋友圈查看图片
Sep 11 #jQuery
jQuery实现日历效果
Sep 11 #jQuery
jquery实现简单每周轮换的日历
Sep 10 #jQuery
如何使用jQuery操作Cookies方法解析
Sep 08 #jQuery
You might like
PHP的fsockopen、pfsockopen函数被主机商禁用的解决办法
2014/07/08 PHP
在Linux系统的服务器上隐藏PHP版本号的方法
2015/06/06 PHP
PHP实现图片不变型裁剪及图片按比例裁剪的方法
2016/01/14 PHP
浅谈PHP检查数组中是否存在某个值 in_array 函数
2016/06/13 PHP
php+ajax简单实现全选删除的方法
2016/12/06 PHP
jquery 双色表格实现代码
2009/12/08 Javascript
js限制文本框只能输入数字(正则表达式)
2012/07/15 Javascript
在jQuery中处理XML数据的大致方法
2015/08/14 Javascript
javascript HTML+CSS实现经典橙色导航菜单
2016/02/16 Javascript
jQuery使用zTree插件实现树形菜单和异步加载
2016/02/25 Javascript
jQuery插件扩展extend的简单实现原理
2016/06/24 Javascript
微信小程序链接传参并跳转新页面
2016/11/29 Javascript
使用BootStrap进行轮播图的制作
2017/01/06 Javascript
简单实现jQuery上传图片显示预览功能
2020/06/29 jQuery
webpack构建react多页面应用详解
2017/09/15 Javascript
Vue组件全局注册实现警告框的实例详解
2018/06/11 Javascript
Javascript地址引用代码实例解析
2020/02/25 Javascript
Vue axios 跨域请求无法带上cookie的解决
2020/09/08 Javascript
在Python中使用成员运算符的示例
2015/05/13 Python
星球大战与Python之间的那些事
2016/01/07 Python
python实现Floyd算法
2018/01/03 Python
Python小进度条显示代码
2019/03/05 Python
对django2.0 关联表的必填on_delete参数的含义解析
2019/08/09 Python
美国唇部护理专家:Sara Happ
2019/06/19 全球购物
入党自我鉴定范文
2013/10/04 职场文书
房地产销售员的自我评价分享
2013/12/04 职场文书
商场经理竞聘演讲稿
2014/01/01 职场文书
支行行长竞聘报告
2014/11/06 职场文书
个人创业事迹材料
2014/12/30 职场文书
小班上学期个人总结
2015/02/12 职场文书
2016年春季开学典礼新闻稿
2015/11/25 职场文书
2016年优秀党务工作者先进事迹材料
2016/02/29 职场文书
oracle索引总结
2021/09/25 Oracle
Javascript设计模式之原型模式详细
2021/10/05 Javascript
关于Oracle12C默认用户名system密码不正确的解决方案
2021/10/16 Oracle
MySQL数据库查询进阶之多表查询详解
2022/04/08 MySQL