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 利用image对象实现图片的预加载提高访问速度
Mar 29 Javascript
js的Prototype属性解释及常用方法
May 08 Javascript
Egret引擎开发指南之创建项目
Sep 03 Javascript
JavaScript中数组的合并以及排序实现示例
Oct 24 Javascript
Javascript中获取浏览器类型和操作系统版本等客户端信息常用代码
Jun 28 Javascript
Angular ng-repeat遍历渲染完页面后执行其他操作详细介绍
Dec 13 Javascript
JavaScript生成指定范围随机数和随机序列的方法
May 05 Javascript
关于jquery中attr()和prop()方法的区别
May 28 jQuery
JS中实现隐藏部分姓名或者电话号码的代码
Jul 17 Javascript
JavaScript数据结构与算法之检索算法实例分析【顺序查找、最大最小值、自组织查询】
Feb 22 Javascript
JS数组及对象遍历方法代码汇总
Jun 16 Javascript
vue实现虚拟列表功能的代码
Jul 28 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获取搜索引擎关键字来源的函数(支持百度和谷歌等搜索引擎)
2012/10/03 PHP
50个优秀经典PHP算法大集合 附源码
2020/08/26 PHP
用js+xml自动生成表格的东西
2006/12/21 Javascript
基于jquery实现一张图片点击鼠标放大再点缩小
2013/09/29 Javascript
深入分析原生JavaScript事件
2014/12/29 Javascript
JS自定义函数对web前端上传的文件进行类型大小判断
2016/10/19 Javascript
深入了解JavaScript的逻辑运算符(与、或)
2016/12/20 Javascript
详解javascript表单的Ajax提交插件的使用
2016/12/29 Javascript
ReactNative实现Toast的示例
2017/12/31 Javascript
node.js博客项目开发手记
2018/03/16 Javascript
基于ssm框架实现layui分页效果
2019/07/27 Javascript
JavaScript HTML DOM元素 节点操作汇总
2019/07/29 Javascript
three.js着色器材质的内置变量示例详解
2020/08/16 Javascript
详解微信小程序动画Animation执行过程
2020/09/23 Javascript
vue 判断两个时间插件结束时间必选大于开始时间的代码
2020/11/04 Javascript
windows系统中python使用rar命令压缩多个文件夹示例
2014/05/06 Python
Python的Django中django-userena组件的简单使用教程
2015/05/30 Python
Python随机生成带特殊字符的密码
2016/03/02 Python
Python中Django 后台自定义表单控件
2017/03/28 Python
Python随机数用法实例详解【基于random模块】
2017/04/18 Python
Python3利用SMTP协议发送E-mail电子邮件的方法
2017/09/30 Python
python利用OpenCV2实现人脸检测
2020/04/16 Python
详解Python给照片换底色(蓝底换红底)
2019/03/22 Python
python开发之anaconda以及win7下安装gensim的方法
2019/07/05 Python
python获取当前文件路径以及父文件路径的方法
2019/07/10 Python
使用PYTHON解析Wireshark的PCAP文件方法
2019/07/23 Python
Python lambda表达式filter、map、reduce函数用法解析
2019/09/11 Python
PyInstaller的安装和使用的详细步骤
2020/06/02 Python
使用css3背景渐变中的透明度来设置不同颜色的背景渐变
2014/03/31 HTML / CSS
全球速卖通西班牙站:AliExpress西班牙
2017/10/30 全球购物
泰国时尚电商:POMELO Fashion
2020/03/11 全球购物
地理科学专业毕业生求职信
2013/10/15 职场文书
英文自我鉴定
2013/12/10 职场文书
施工安全协议书
2013/12/11 职场文书
环保倡议书300字
2014/05/15 职场文书
机关作风建设剖析材料
2014/10/11 职场文书