当前位置: 萬仟网 > IT编程>开发语言>Jquery > jQuery实现鼠标拖拽登录框移动效果

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

2020年09月13日  | 萬仟网IT编程  | 我要评论
本文实例为大家分享了jquery鼠标拖拽登录框移动的具体代码,供大家参考,具体内容如下1.jquery代码<script src="js/jquery-3.5.1.js" type="text/

本文实例为大家分享了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>

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

如您对本文有疑问或者有任何想说的,请点击进行留言回复,万千网友为您解惑!

相关文章:

验证码:
Copyright © 2017-2020  萬仟网 保留所有权利. 粤ICP备17035492号