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 相关文章推荐
Javascript 读书笔记索引贴
Jan 11 Javascript
jquery根据锚点offset值实现动画切换
Sep 11 Javascript
node.js中的fs.createReadStream方法使用说明
Dec 17 Javascript
如何防止JavaScript自动插入分号
Nov 05 Javascript
JavaScript跨域调用基于JSON的RESTful API
Jul 09 Javascript
Javascript oop设计模式 面向对象编程简单实例介绍
Dec 13 Javascript
从零开始学习Node.js系列教程六:EventEmitter发送和接收事件的方法示例
Apr 13 Javascript
JS实现的Unicode编码转换操作示例
Apr 28 Javascript
js定时器实现倒计时效果
Nov 05 Javascript
Vue.js组件通信之自定义事件详解
Oct 19 Javascript
js实现淘宝首页的banner栏效果
Nov 26 Javascript
antd-日历组件,前后禁止选择,只能选中间一部分的实例
Oct 29 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
zend framework配置操作数据库实例分析
2012/12/06 PHP
php的declare控制符和ticks教程(附示例)
2014/03/21 PHP
php导出CSV抽象类实例
2014/09/24 PHP
Zend Framework校验器Zend_Validate用法详解
2016/12/09 PHP
jQuery使用手册之三 CSS操作
2007/03/24 Javascript
实现非常简单的js双向数据绑定
2015/11/06 Javascript
探究Vue.js 2.0新增的虚拟DOM
2016/10/20 Javascript
详解vue与后端数据交互(ajax):vue-resource
2017/03/16 Javascript
easyui datagrid 表格中操作栏 按钮图标不显示的解决方法
2017/07/27 Javascript
JSON 数据格式详解
2017/09/13 Javascript
vue项目国际化vue-i18n的安装使用教程
2018/03/14 Javascript
详解swiper在vue中的应用(以3.0为例)
2018/09/20 Javascript
js实现多图和单图上传显示
2019/12/18 Javascript
node.js制作一个简单的登录拦截器
2020/02/10 Javascript
vue 实现图片懒加载功能
2020/12/31 Vue.js
[38:41]2014 DOTA2国际邀请赛中国区预选赛 LGD VS CNB
2014/05/22 DOTA
举例讲解Python中is和id的用法
2015/04/03 Python
Python中查看变量的类型内存地址所占字节的大小
2019/06/26 Python
python新式类和经典类的区别实例分析
2020/03/23 Python
python nohup 实现远程运行不宕机操作
2020/04/16 Python
pandas读取csv文件提示不存在的解决方法及原因分析
2020/04/21 Python
如何基于Python爬虫爬取美团酒店信息
2020/11/03 Python
Python中正则表达式对单个字符,多个字符和匹配边界等使用
2021/01/27 Python
萨克斯第五大道的折扣店:Saks Fifth Avenue OFF 5TH
2016/08/25 全球购物
美国汽配连锁巨头Pep Boys官网:轮胎更换、汽车维修服务和汽车零部件
2017/01/14 全球购物
LTD Commodities:礼品,独特发现,家居装饰,家用器皿
2017/08/11 全球购物
Boden英国官网:英国知名原创时装品牌
2018/11/06 全球购物
结构工程研究生求职信
2013/10/13 职场文书
机械绘图员岗位职责
2013/11/19 职场文书
2014年大学庆元旦迎新年活动方案
2014/03/09 职场文书
家长建议怎么写
2014/05/15 职场文书
我的中国梦演讲稿800字
2014/08/19 职场文书
公司授权委托书范文
2014/09/21 职场文书
2014年勤工助学工作总结
2014/11/24 职场文书
中学生自我评价2015
2015/03/03 职场文书
Linux安装apache服务器的配置过程
2021/11/27 Servers