js实现盒子拖拽动画效果
更新时间：2020年08月09日 14:26:06 作者：cnkeysky
这篇文章主要为大家详细介绍了js实现盒子拖拽动画效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了js实现盒子拖拽动画的具体代码，供大家参考，具体内容如下
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="jquery.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
.wrap {
width: 400px;
height: 200px;
border: 1px solid #ccc;
border-right-color: red;
position: absolute;
top: 50%;
left: 50%;
margin-left: -200px;
margin-top: -100px;
box-sizing: border-box;
}
.wrap .head {
height: 40px;
padding-left: 4px;
padding-right: 4px;
background-color: #ccc;
box-sizing: border-box;
line-height: 40px;
user-select: none;
}
.head:hover {
cursor: move;
}
.head span {
float: left;
}
#close {
float: right;
}
#close:hover {
cursor: pointer;
}
</style>
</head>
<body>
<p>tom</p>
<p>tom</p>
<p>tom</p>
<p>tom</p>
<p>tom</p>
<p>tom</p>
<p>tom</p>
<p>tom</p>
<p>tom</p>
<p>tom</p>
<p>tom</p>
<p>tom</p>
<p>tom</p>
<p>tom</p>
<p>tom</p>
<p>tom</p>
<p>tom</p>
<p>tom</p>
<p>tom</p>
<p>tom</p>
<p>tom</p>
<p>tom</p>
<p>tom</p>
<p>tom</p>
<p>tom</p>
<p>tom</p>
<p>tom</p>
<p>tom</p>
<p>tom</p>
<p>tom</p>
<div class="wrap">
<div class="head">
<span>试着拖拽我</span>
<span id="close">【关闭】</span>
</div>
</div>
<script>
let wrap = document.querySelector('.wrap');
let close = document.getElementById('close');
let head = document.querySelector('.head');
head.onmousedown = function (e) {
// 获得鼠标在 head 中的坐标
let x = e.pageX - wrap.offsetLeft;
let y = e.pageY - wrap.offsetTop;
console.log(x, y);
document.onmousemove = function (e) {
let xx = e.pageX - x;
let yy = e.pageY - y;
// 设置边界限制
xx = xx < 0 ? 0 : xx;
yy = yy < 0 ? 0 : yy;
if (xx >= innerWidth - wrap.offsetWidth) {
document.documentElement.scrollLeft = 20;
} else {
document.documentElement.scrollLeft = 0;
}
xx = xx > innerWidth - wrap.offsetWidth ? innerWidth-wrap.offsetWidth : xx;
yy = yy > innerHeight - wrap.offsetHeight + document.documentElement.scrollTop ? innerHeight - wrap.offsetHeight + document.documentElement.scrollTop : yy;
wrap.style.left = xx + 'px';
wrap.style.top = yy + 'px';
// 禁止X滚动轴
document.body.style.overflowX = 'hidden';
wrap.style.marginLeft = 0;
wrap.style.marginTop = 0;
};
};
document.onmouseup = function () {
document.onmousemove = null;
};
close.onclick = function () {
wrap.style.display = 'none';
};
</script>
</body>
</html>
实现效果：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要给大家介绍了关于iframe跨域POST提交的相关资料,文中给出了详细的介绍与示例代码，相信对大家的学习或者工作具有一定的参考借鉴价值，需要的朋友可以一起来学习学习。2017-01-01
JSHint是一个社区驱动用来检测JavaScript代码中错误和潜在的问题以及执行团队的编码规范工具。它非常灵活,因此可以很容易地适应您特定的编码规则和你的代码执行环境。JSHint将永远保持开源的方式。2016-08-08
将秒换成时分秒的方法有很多，在本文将为大家介绍下，使用js的具体的实现思路，有需要的朋友可以参考下，希望对大家有所帮助2013-09-09
这篇文章主要为大家详细介绍了小程序模实现糊搜索功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-06-06
本篇主要是对JS操作iframe里的dom进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-01-01
这篇文章主要为大家极力推荐10个短小实用的JavaScript代码段，帮助大家节省大量开发时间，感兴趣的小伙伴们可以参考一下2016-08-08
这篇文章主要介绍了详解如何探测小程序返回到webview页面，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-05-05
这篇文章主要为大家详细介绍了如何利用JavaScript实现动态雨滴特效并且点击雨滴会有雨滴爆裂的效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-06-06
这篇文章主要为大家详细介绍了JS正则表达式验证密码强度，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-03-03
这篇文章主要介绍了js控制div弹出层实现方法,可实现点击链接弹出div浮动层,且背景色变暗的效果,是一款非常实用的特效源码,需要的朋友可以参考下2015-05-05
最新评论