您的位置:首页 > 教程 > JavaScript > jQuery实现鼠标拖拽登录框移动效果

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

2020-09-13 15:58:48 来源:易采站长站 作者:

jQuery实现鼠标拖拽登录框移动效果,鼠标,事件,本文,代码,按下

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

易采站长站,站长之家为您整理了jQuery实现鼠标拖拽登录框移动效果的相关内容。

本文实例为大家分享了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:;" rel="external nofollow" >登录</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="提交"/>
   &nbsp&nbsp&nbsp&nbsp&nbsp
   <input type="button" value="重置"/>
   </td>
  </tr>
  </table>
 </form>
 
 </body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持易采站长站。

以上就是关于对jQuery实现鼠标拖拽登录框移动效果的详细介绍。欢迎大家对jQuery实现鼠标拖拽登录框移动效果内容提出宝贵意见

微信扫一扫

易采站长站微信账号