JavaScript——鼠标拖拽登录框

JavaScript——鼠标拖拽登录框

看效果

1.点击“点击,弹出登录框”。在这里插入图片描述
2.点击“关闭”,关闭登录框
在这里插入图片描述
3.在title处,可按住拖拽
在这里插入图片描述

上代码

下面展示一些 内联代码片

// html
<div class="login-header"><a id="link" href="javascript:;">点击,弹出登录框</a></div>
<div id="login" class="login">
    <div id="title" class="login-title">登录会员
        <span><a id="closeBtn" href="javascript:void(0);" class="close-login">关闭</a></span>
    </div>
    <div class="login-input-content">
        <div class="login-input">
            <label>用户名:</label>
            <input type="text" placeholder="请输入用户名" name="info[username]" id="username" class="list-input">
        </div>
        <div class="login-input">
            <label>登录密码:</label>
            <input type="password" placeholder="请输入登录密码" name="info[password]" id="password" class="list-input">
        </div>
    </div>
    <div id="loginBtn" class="login-button"><a href="javascript:void(0);" id="login-button-submit">登录会员</a></div>
</div>
<!-- 遮盖层 -->
<div id="bg" class="login-bg"></div>
// javascript
<script>
    //1.获取元素
   var login  = document.querySelector(".login");
   var link  = document.querySelector("#link");
   var mask  = document.querySelector(".login-bg");
   var closeBtn  = document.querySelector("#closeBtn");
   var title = document.querySelector("#title");
   //2.当单击链接,弹出登录框
   link.addEventListener("click",function () {
       login.style.display = "block" ;
       mask.style.display = "block" ;
   })
    //3.点击关闭按钮,关闭登录框
    closeBtn.addEventListener("click" , function () {
        login.style.display = "none" ;
        mask.style.display = "none" ;
    })
    //4.在title栏,按下鼠标课移动登录框,松开时移动功能消失
    title.addEventListener("mousedown" ,function (e) {
        var x = e.pageX - login.offsetLeft;//用鼠标在页面上的坐标减去,盒子的坐标,得到鼠标在盒子内的坐标
        var y = e.pageY - login.offsetTop;
        document.addEventListener("mousemove",move);
        function move(e) {
            login.style.left = e.pageX - x + "px";//用鼠标在页面上的坐标减去盒子内的相对坐标,得到盒子的实时坐标
            login.style.top = e.pageY - y + "px";
        }
        document.addEventListener("mouseup" , function () {//当松开鼠标时,移动功能消失
            document.removeEventListener("mousemove",move);
        })
    })
</script>
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
拖拽的过程中,我们经常会遇到快速拖拽的问题,也就是鼠标移动速度太快,导致拖拽元素跟不上鼠标的移动速度,造成拖拽效果的不流畅。解决这个问题的方法有很多种,下面介绍两种常见的方法。 #### 方法一:使用 requestAnimationFrame requestAnimationFrame 是一个浏览器提供的 API,它可以让浏览器在下一次重绘之前执行指定的函数,这样可以保证函数执行的频率跟浏览器的重绘频率一致,避免了浏览器过度绘制和卡顿的问题。我们可以利用 requestAnimationFrame 来优化拖拽的效果。 具体实现方法如下: ```javascript let startX, startY, currentX, currentY; let element = document.getElementById('drag'); element.addEventListener('mousedown', function (event) { startX = event.clientX; startY = event.clientY; document.addEventListener('mousemove', onMouseMove); document.addEventListener('mouseup', onMouseUp); }); function onMouseMove(event) { currentX = event.clientX - startX; currentY = event.clientY - startY; requestAnimationFrame(updatePosition); } function updatePosition() { element.style.transform = `translate(${currentX}px, ${currentY}px)`; } function onMouseUp() { document.removeEventListener('mousemove', onMouseMove); document.removeEventListener('mouseup', onMouseUp); requestAnimationFrame(() => { element.style.transform = `translate(${currentX}px, ${currentY}px)`; currentX = 0; currentY = 0; }); } ``` 在 onMouseMove 函数中,我们使用 requestAnimationFrame 来更新元素的位置,这样可以保证元素的位置更新频率跟浏览器的重绘频率一致,从而避免了拖拽效果的不流畅问题。在 onMouseUp 函数中,我们也使用 requestAnimationFrame 来更新元素的位置,并且将 currentX 和 currentY 重置为 0,这样可以避免多次拖拽时元素位置的累加。 #### 方法二:使用 CSS3 动画 除了使用 requestAnimationFrame,我们还可以使用 CSS3 动画来优化拖拽效果。具体实现方法如下: ```javascript let startX, startY, currentX, currentY; let element = document.getElementById('drag'); element.addEventListener('mousedown', function (event) { startX = event.clientX; startY = event.clientY; document.addEventListener('mousemove', onMouseMove); document.addEventListener('mouseup', onMouseUp); }); function onMouseMove(event) { currentX = event.clientX - startX; currentY = event.clientY - startY; element.style.transform = `translate(${currentX}px, ${currentY}px)`; } function onMouseUp() { document.removeEventListener('mousemove', onMouseMove); document.removeEventListener('mouseup', onMouseUp); element.style.transition = 'transform 0.2s ease-out'; element.style.transform = `translate(${currentX}px, ${currentY}px)`; setTimeout(() => { element.style.transition = ''; currentX = 0; currentY = 0; element.style.transform = ''; }, 200); } ``` 在 onMouseUp 函数中,我们首先给元素添加了一个过渡动画,这样可以让拖拽效果更加流畅。然后使用 setTimeout 函数来清除过渡动画,并将 currentX 和 currentY 重置为 0,最后将元素的 transform 属性重置为空。这样可以让元素回到原来的位置,同时避免了多次拖拽时元素位置的累加。 需要注意的是,这种方法需要我们手动设置过渡动画的时间,并且需要等待过渡动画执行完毕之后才能重置元素的位置,因此需要在 setTimeout 函数中设置一个适当的等待时间。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值