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插件HighCharts绘制2D饼图效果示例【附demo源码下载】
Mar 21 jQuery
Jquery获取radio选中的值
May 05 jQuery
jQuery用户头像裁剪插件cropbox.js使用详解
Jun 07 jQuery
jQuery正则验证注册页面经典实例
Jun 10 jQuery
jQuery.form.js的使用详解
Jun 14 jQuery
关于jQuery.ajax()的jsonp碰上post详解
Jul 02 jQuery
jQuery实现火车票买票城市选择切换功能
Sep 15 jQuery
jquery引入外部CDN 加载失败则引入本地jq库
May 23 jQuery
jQuery实现为动态添加的元素绑定事件实例分析
Sep 07 jQuery
jQuery序列化form表单数据为JSON对象的实现方法
Sep 20 jQuery
JQuery Ajax执行跨域请求数据的解决方案
Dec 10 jQuery
jQuery表单选择器用法详解
Aug 22 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
用Socket发送电子邮件(利用需要验证的SMTP服务器)
2006/10/09 PHP
php面向对象中static静态属性与方法的内存位置分析
2015/02/08 PHP
js读写cookie实现一个底部广告浮层效果的两种方法
2013/12/29 Javascript
JavaScript cookie的设置获取删除详解
2014/02/11 Javascript
jQuery之字体大小的设置方法
2014/02/27 Javascript
jQuery中:contains选择器用法实例
2014/12/30 Javascript
浅谈jQuery.easyui的datebox格式化时间
2015/06/25 Javascript
JavaScript“尽快失败”的原则实例详解
2016/10/08 Javascript
js自定义弹框插件的封装
2020/08/24 Javascript
Webpack的dll功能使用
2018/06/28 Javascript
Vue动态创建注册component的实例代码
2019/06/14 Javascript
JS实现瀑布流效果
2020/03/07 Javascript
vuex的使用和简易实现
2021/01/07 Vue.js
[41:08]2014 DOTA2国际邀请赛中国区预选赛 HGT VS NE
2014/05/22 DOTA
用Python进行行为驱动开发的入门教程
2015/04/23 Python
Python基于property实现类的特性操作示例
2018/06/15 Python
python try 异常处理(史上最全)
2019/03/07 Python
python按比例随机切分数据的实现
2019/07/11 Python
解决python彩色螺旋线绘制引发的问题
2019/11/23 Python
python操作微信自动发消息的实现(微信聊天机器人)
2020/07/14 Python
利用python 读写csv文件
2020/09/10 Python
Python基于Faker假数据构造库
2020/11/30 Python
台湾演唱会订票网站:StubHub台湾
2019/06/11 全球购物
Muziker英国:中欧最大的音乐家商店
2020/02/05 全球购物
Kickers鞋英国官网:男士、女士和儿童鞋
2021/03/08 全球购物
英语演讲稿范文
2014/01/03 职场文书
给领导的检讨书
2014/02/16 职场文书
工作过失检讨书
2014/02/23 职场文书
《春到梅花山》教学反思
2014/04/16 职场文书
学校搬迁方案
2014/06/15 职场文书
2014年个人思想工作总结
2014/11/27 职场文书
葬礼主持词
2015/07/02 职场文书
2016年党风廉政建设承诺书
2016/03/25 职场文书
Vue Element UI自定义描述列表组件
2021/05/18 Vue.js
如何用PHP实现多线程编程
2021/05/26 PHP
JS 4个超级实用的小技巧 提升开发效率
2021/10/05 Javascript