js实现盒子拖拽动画效果


Posted in Javascript onAugust 09, 2020

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

实现效果:

js实现盒子拖拽动画效果

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
中文字符串截取的js函数代码
Apr 17 Javascript
JavaScript事件委托的技术原理探讨示例
Apr 17 Javascript
js简单实现标签云效果实例
Aug 06 Javascript
漫谈JS引擎的运行机制 你应该知道什么
Jun 15 Javascript
常见的浏览器Hack技巧整理
Jun 29 Javascript
实例详解JavaScript中setTimeout函数的执行顺序
Jul 12 Javascript
vue组件父子间通信之综合练习(聊天室)
Nov 07 Javascript
菊花转动的jquery加载动画效果
Aug 19 jQuery
JavaScript学习笔记之DOM基础操作实例小结
Jan 09 Javascript
在SSM框架下用laypage和ajax实现分页和数据交互的方法
Sep 27 Javascript
javascript的hashCode函数实现代码小结
Aug 11 Javascript
Vue 实现拨打电话操作
Nov 16 Javascript
js实现盒子移动动画效果
Aug 09 #Javascript
js实现弹窗效果
Aug 09 #Javascript
js实现表格数据搜索
Aug 09 #Javascript
js实现微信聊天界面
Aug 09 #Javascript
js实现微信聊天效果
Aug 09 #Javascript
js实现盒子滚动动画效果
Aug 09 #Javascript
js仿京东放大镜效果
Aug 09 #Javascript
You might like
用php实现的下载css文件中的图片的代码
2010/02/08 PHP
PHP判断FORM表单或URL参数来的数据是否为整数的方法
2016/03/25 PHP
php批量删除操作代码分享
2017/02/26 PHP
php生成毫秒时间戳的实例讲解
2017/09/22 PHP
列表内容的选择
2006/06/30 Javascript
创建一个复制UBB软件信息的链接或按钮的js代码
2008/01/06 Javascript
javascript 用原型继承来实现对象系统
2010/03/22 Javascript
javascript测试题练习代码
2012/10/10 Javascript
JavaScript中的eval()函数详解
2013/08/22 Javascript
JS将数字转换成三位逗号分隔的样式(示例代码)
2014/02/19 Javascript
jquery下拉select控件操作方法分享(jquery操作select)
2014/03/25 Javascript
javascript制作的cookie封装及使用指南
2015/01/02 Javascript
js实现div拖动动画运行轨迹效果代码分享
2015/08/27 Javascript
用js动态添加html元素,以及属性的简单实例
2016/07/19 Javascript
用jQuery的AJax实现异步访问、异步加载
2016/11/02 Javascript
web前端开发中常见的多列布局解决方案整理(一定要看)
2017/10/15 Javascript
React传值 组件传值 之间的关系详解
2019/08/26 Javascript
简单了解JavaScript作用域
2020/07/31 Javascript
[04:29]【TI9采访】OG.N0tail在胜者组决赛后接受采访
2019/08/25 DOTA
python实现通过代理服务器访问远程url的方法
2015/04/29 Python
最近Python有点火? 给你7个学习它的理由!
2017/06/26 Python
python 图像平移和旋转的实例
2019/01/10 Python
CentOS7安装Python3的教程详解
2019/04/10 Python
Python读写文件基础知识点
2019/06/10 Python
淘宝秒杀python脚本 扫码登录版
2019/09/19 Python
如何用Python提取10000份log中的产品信息
2021/01/14 Python
python 第三方库paramiko的常用方式
2021/02/20 Python
CSS3+DIV实现漂亮的动画彩色标签
2016/06/16 HTML / CSS
计算机专业个人求职自荐信
2013/09/21 职场文书
英语师范专业毕业生自荐信
2013/09/21 职场文书
公益活动邀请函
2014/02/05 职场文书
学徒工职责
2014/03/06 职场文书
2015年端午节国旗下演讲稿
2015/03/19 职场文书
高三数学教学反思
2016/02/18 职场文书
2016社区平安家庭事迹材料
2016/02/26 职场文书
如何解决goland,idea全局搜索快捷键失效问题
2022/04/03 Golang