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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

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

    本文实例为大家分享了jQuery鼠标拖拽登录框移动的具体代码,供大家参考,具体内容如下 1.jQuery代码 <script src="js/jquery-3.5.1.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $(function () { // 点击登录跳转 $(

  • 原生JS实现可拖拽登录框

    原生JS实现可拖拽登录框

    本文分享一个用原生JS实现的可拖拽登录框,效果如下: 实现的代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>原生JS实现可拖拽登录框</title> <style type="text/css"

  • jquery实现鼠标拖拽滑动效果来选择数字的方法

    本文实例讲述了jquery实现鼠标拖拽滑动效果来选择数字的方法.分享给大家供大家参考.具体如下: 这是使用jquery ui实现的一个精美实用的效果,可以通过鼠标拖拽滑动效果来选择数字 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns

  • jQuery实现可拖拽的许愿墙效果【附demo源码下载】

    jQuery实现可拖拽的许愿墙效果【附demo源码下载】

    本文实例讲述了jQuery实现可拖拽的许愿墙效果.分享给大家供大家参考,具体如下: 运行效果图如下: 这里简单介绍下功能点: ① 随机显示背景图或背景色 ② 出现的位置随机 ③ 可以通过拖拽改变位置 好了,附上代码: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"/> <title>许愿墙</title> <lin

  • 超酷的鼠标拖拽翻页(分页)效果实现javascript代码

    拖动分页 body{ border:0px; margin:0px; overflow:hidden; background-color:transparent; font-family:宋体; } .page{ position:absolute; width:700px; border:1px solid #999; background-color:#000; left:425px; margin-left:-350px; cursor:default; z-index:0; } ul{

  • C#自定义鼠标拖拽Drag&Drop效果之基本原理及基本实现代码

    C#自定义鼠标拖拽Drag&Drop效果之基本原理及基本实现代码

    目录 一.前言 二.基本原理 1,设计界面 2,拖拽发起方 3,拖拽接收方 4,实际演示 三.自定义拖拽时鼠标效果 1,界面设计 2,拖拽发起方 3,拖拽接收方 4,GiveFeedback实现鼠标样式切换 4,实际演示 四.源码下载 五.总结 一.前言 拖拽(Drag&Drop),属于是极其常用的基础功能.无论是在系统上.应用上.还是在网页上,拖拽随处可见.同时拖拽时的鼠标效果也很漂亮,像这样: 这样: 还有这样: 等等等等.这些拖拽时的鼠标效果,直观又美观.然后,在我们写程序时,程序确实是支

  • js实现登录框鼠标拖拽效果

    js实现登录框鼠标拖拽效果

    效果图: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>登录框鼠标拖拽效果</title> <style type="text/css"> body { background: url("https://timgsa.baidu.com/timg?i

  • js实现百度登录框鼠标拖拽效果

    js实现百度登录框鼠标拖拽效果

    以百度的登录窗口为例,学习鼠标拖拽效果如何实现,拖拽范围限定以及登录窗口自动居中.学会如何制作弹出窗口特效,了解把元素设置为可拖拽的原理. 知识点: 1.掌握对可拖拽对话框的实现原理 2.了解元素如何触发脚本方法以及如何编写侦听事件 3. 学会设置元素在页面中居中和全屏 注意区别: 1.screenX:鼠标位置相对于用户屏幕水平偏移量,而screenY也就是垂直方向的,此时的参照点也就是原点是屏幕的左上角. 2.clientX:跟screenX相比就是将参照点改成了浏览器内容区域的左上角,该参照

  • 基于jquery实现的鼠标拖拽元素复制并写入效果

    直接上代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-eq

  • 使用纯JS实现checkbox的框选效果(鼠标拖拽多选)

    使用纯JS实现checkbox的框选效果(鼠标拖拽多选)

    目录 主要思路 css 代码如下 html结构如下 js主要逻辑如下 总结 主要思路 用一个盒子作为选区,通过定位让其固定在左上角,由于没有给定选区元素的宽高所以默认不显示,在 onmousemove 中动态获取选区定位的top left bottom right四个属性,同时将鼠标拖拽的距离作为选区的宽高,由于给选区元素的css设置了border就呈现出如图所示的框选效果.(注意:要想自己手动勾选复选框,要给选区元素的css设置pointer-events: none;否则点击复选框的事件会被

随机推荐