1. Python技术站首页
  2. 其他
  3. JavaScript

js实现div拖动动画运行轨迹效果代码分享

• JavaScript

关于“js实现div拖动动画运行轨迹效果代码分享”的完整攻略，主要包含以下几个部分：

  1. 基本思路
  2. 实现步骤
  3. 示例说明

基本思路

实现div拖动动画运行轨迹效果，一般可以采用JS和CSS配合的方式。具体来说，主要实现以下几个步骤：

  1. 给div绑定mousedown事件，当鼠标按下时触发。
  2. 给document绑定mousemove事件，当鼠标移动时触发。
  3. 给document绑定mouseup事件，当鼠标抬起时触发。
  4. 随着鼠标移动，动态计算div的left和top值，实现拖动效果。
  5. 在mousemove事件中记录鼠标移动的位置，根据位置变化计算出div的偏移量（即left和top），并更新div的位置。
  6. 在mouseup事件中解绑document的mousemove和mouseup事件，停止拖动。

实现步骤

1. HTML结构

首先，需要在HTML文件中创建一个div元素，设置其class和id属性：

<div class="drag" id="drag-element"></div>

2. CSS样式

接下来，需要对div元素进行样式设置，在CSS文件中添加以下样式：

.drag {
  position: absolute;
  width: 50px;
  height: 50px;
  background-color: #ccc;
  cursor: move;
}

3. JS代码

接下来，就可以开始写JS代码了。我们可以将代码拆分为三个部分：事件绑定、拖动计算和动画效果。

事件绑定

首先，需要给div元素绑定mousedown事件，当鼠标按下时触发：

const dragElement = document.getElementById('drag-element')

let isDragging = false
let startX, startY, initialX, initialY, xOffset, yOffset

dragElement.addEventListener('mousedown', function(e) {
  isDragging = true

  startX = e.clientX
  startY = e.clientY

  dragElement.style.transition = ''

  initialX = dragElement.offsetLeft
  initialY = dragElement.offsetTop

  xOffset = startX - initialX
  yOffset = startY - initialY
})

这里先定义了一些变量，包括isDragging、startX、startY、initialX、initialY、xOffset和yOffset。当鼠标按下时，设置isDragging为true，记录当前鼠标位置的x和y坐标，以及div元素初始的left和top值和鼠标相对div元素的偏移量。

接下来，需要给document绑定mousemove事件，当鼠标移动时触发：

document.addEventListener('mousemove', function(e) {
  if (isDragging) {
    e.preventDefault()

    const currentX = e.clientX - xOffset
    const currentY = e.clientY - yOffset

    dragElement.style.left = currentX + 'px'
    dragElement.style.top = currentY + 'px'
  }
})

在mousemove事件中，如果当前正在拖动，就防止默认事件，计算新的div位置，更新div的left和top值。

最后，给document绑定mouseup事件，当鼠标抬起时触发：

document.addEventListener('mouseup', function() {
  isDragging = false

  if (dragElement.offsetLeft < 0) {
    dragElement.style.transition = '0.5s ease-out'
    dragElement.style.left = '0'
  }

  if (dragElement.offsetTop < 0) {
    dragElement.style.transition = '0.5s ease-out'
    dragElement.style.top = '0'
  }

  if (dragElement.offsetLeft + dragElement.offsetWidth > window.innerWidth) {
    const maxLeft = window.innerWidth - dragElement.offsetWidth
    dragElement.style.transition = '0.5s ease-out'
    dragElement.style.left = maxLeft + 'px'
  }

  if (dragElement.offsetTop + dragElement.offsetHeight > window.innerHeight) {
    const maxTop = window.innerHeight - dragElement.offsetHeight
    dragElement.style.transition = '0.5s ease-out'
    dragElement.style.top = maxTop + 'px'
  }
})

在mouseup事件中，需要将isDragging重新设置为false，同时对div的位置进行判断，如果超出窗口边界，就设置div的left和top值为窗口边界的最大值或最小值，并给div元素添加过渡效果。

拖动计算

我们需要在mousedown和mousemove事件中计算div元素的位置和偏移量。在mousedown事件中，代码如下：

initialX = dragElement.offsetLeft
initialY = dragElement.offsetTop

xOffset = startX - initialX
yOffset = startY - initialY

在mousemove事件中，代码如下：

const currentX = e.clientX - xOffset
const currentY = e.clientY - yOffset

动画效果

以上代码已经实现了基本的拖动效果，但还不够流畅。我们可以添加额外的动画效果，让div元素拖动更加自然。在mouseup事件中，可以添加以下代码：

dragElement.style.transition = '0.5s ease-out'
dragElement.style.left = currentX + 'px'
dragElement.style.top = currentY + 'px'

将div元素的过渡时间设置为0.5秒，并用缓动函数使移动更加平滑。

示例说明

下面给出两个示例，分别展示了如何实现纵向拖动和横向拖动的效果。

示例1：纵向拖动

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>JS实现div拖动动画运行轨迹效果-纵向拖动</title>
  <style>
    .drag {
      position: absolute;
      width: 50px;
      height: 50px;
      background-color: #ccc;
      cursor: move;
    }
  </style>
</head>
<body>
  <div class="drag" id="drag-element"></div>

  <script>
    const dragElement = document.getElementById('drag-element')

    let isDragging = false
    let startY, initialY, yOffset

    dragElement.addEventListener('mousedown', function(e) {
      isDragging = true

      startY = e.clientY

      dragElement.style.transition = ''

      initialY = dragElement.offsetTop

      yOffset = startY - initialY
    })

    document.addEventListener('mousemove', function(e) {
      if (isDragging) {
        e.preventDefault()

        const currentY = e.clientY - yOffset

        dragElement.style.top = currentY + 'px'
      }
    })

    document.addEventListener('mouseup', function() {
      isDragging = false

      if (dragElement.offsetTop < 0) {
        dragElement.style.transition = '0.5s ease-out'
        dragElement.style.top = '0'
      }

      if (dragElement.offsetTop + dragElement.offsetHeight > window.innerHeight) {
        const maxTop = window.innerHeight - dragElement.offsetHeight
        dragElement.style.transition = '0.5s ease-out'
        dragElement.style.top = maxTop + 'px'
      }

      dragElement.style.transition = '0.5s ease-out'
    })
  </script>
</body>
</html>

示例2：横向拖动

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>JS实现div拖动动画运行轨迹效果-横向拖动</title>
  <style>
    .drag {
      position: absolute;
      width: 50px;
      height: 50px;
      background-color: #ccc;
      cursor: move;
    }
  </style>
</head>
<body>
  <div class="drag" id="drag-element"></div>

  <script>
    const dragElement = document.getElementById('drag-element')

    let isDragging = false
    let startX, initialX, xOffset

    dragElement.addEventListener('mousedown', function(e) {
      isDragging = true

      startX = e.clientX

      dragElement.style.transition = ''

      initialX = dragElement.offsetLeft

      xOffset = startX - initialX
    })

    document.addEventListener('mousemove', function(e) {
      if (isDragging) {
        e.preventDefault()

        const currentX = e.clientX - xOffset

        dragElement.style.left = currentX + 'px'
      }
    })

    document.addEventListener('mouseup', function() {
      isDragging = false

      if (dragElement.offsetLeft < 0) {
        dragElement.style.transition = '0.5s ease-out'
        dragElement.style.left = '0'
      }

      if (dragElement.offsetLeft + dragElement.offsetWidth > window.innerWidth) {
        const maxLeft = window.innerWidth - dragElement.offsetWidth
        dragElement.style.transition = '0.5s ease-out'
        dragElement.style.left = maxLeft + 'px'
      }

      dragElement.style.transition = '0.5s ease-out'
    })
  </script>
</body>
</html>

以上就是js实现div拖动动画运行轨迹效果的完整攻略。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：js实现div拖动动画运行轨迹效果代码分享 - Python技术站

赞 (0)
0 0 打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023年6月10日
下一篇 2023年6月10日

相关文章

  • js数组去重的常用方法总结

    好，下面是关于“js数组去重的常用方法总结”的完整攻略。 js数组去重的常用方法总结 一、利用Set去重 ES6新增了Set容器，可以创建一个不重复的集合。因此，利用Set可以快速去重，代码如下： const arr = [1, 2, 3, 3, 4, 5, 4]; const result = Array.from(new Set(arr)); // [1…

    JavaScript 2023年5月27日
    00

  • js 自带的sort() 方法全面了解

    JS自带的sort()方法全面了解 在JS中，sort()方法是对数组元素进行排序的内置方法。它可以帮助我们轻松地将数组按照一定的顺序进行排序。在这里，我们将详细讲解sort()方法的使用，包括语法、参数、返回值、排序顺序等。 语法 sort()方法的基本语法如下： array.sort(compareFunction); 其中，array 表示要排序的数组…

    JavaScript 2023年5月19日
    00

  • JS实现网页抢购功能（触发，终止脚本）

    JS实现网页抢购功能可以基于浏览器的自动化工具，如selenium或者puppeteer，完成批量请求或模拟用户行为。在实现过程中，需要明确以下几个步骤： 登录并保持会话：在许多电商网站中，进行抢购之前首先需要登录账户。可以通过模拟登录的方式，实现自动输入账号密码并完成登录。在登录完成之后，需要保持会话以便于提交订单等后续的操作。 找到目标商品页面：一般情况…

    JavaScript 2023年6月10日
    00

  • JavaScript使用function定义对象并调用的方法

    JavaScript中可以使用function定义一个函数，同时也可以使用function定义一个对象。这种方式定义的对象被称为“构造函数”，使用new关键字调用这个构造函数就可以生成一个新的对象。 定义构造函数 下面是一个定义构造函数的示例代码： function Person(name, age) { this.name = name; this.age…

    JavaScript 2023年5月27日
    00

  • JavaScript RegExp 对象

    JavaScript中的RegExp对象是用于处理正则表达式的内置对象。正则表达式是一种用于匹配字符串模式的工具，可以用于搜索、替换和验证字符串。下面是关于RegExp对象的完整攻略，包括语法、属性、方法和示例。 RegExp对象的语法 JavaScript的RegExp有两种创建方式： 字面方式：使用正则表达式字面量创建RegExp对象，语法如下： /pa…

    JavaScript 2023年5月11日
    00

  • js 动态生成json对象、时时更新json对象的方法

    生成 JSON 对象是一项常见的任务，通过 JavaScript 可以动态地生成和更新 JSON 对象。这种功能对于动态地修改网站内容非常重要，并且可以通过 AJAX 和其他技术将数据发送到服务器时使用。下面是生成 JSON 对象和时时更新 JSON 对象的方法攻略。 生成 JSON 对象 我们可以使用 JavaScript 中 JSON 对象的 strin…

    JavaScript 2023年5月27日
    00

  • javascript实现获取服务器时间

    获取服务器时间是Web开发中经常用到的一个功能，javascript可以通过AJAX技术向服务器发送请求获取服务器时间。以下是获取服务器时间的完整攻略： 步骤1. 创建一个API 首先，需要在服务器端创建一个API，用于返回服务器当前时间。API的地址可以是一个后端程序文件或者一个接口。 以php为例，可以通过以下代码实现： <?php header(…

    JavaScript 2023年5月27日
    00

  • 千篇一律的JS运算符讲解,一起来看看

    千篇一律的JS运算符讲解，一起来看看 前言 JS运算符是编写JS代码时非常基本的一种语法。很多初学者在学习JS时可能会忽略这些运算符的学习，但却是非常重要的基础。在本篇文章中，我们将会全面讲解JS的运算符，并提供一些示例来帮助读者更好地理解这些内容。 算术运算符 运算符 描述 示例 + 加法 10 + 20 = 30 – 减法 20 – 10 = 10 * …

    JavaScript 2023年5月28日
    00
合作推广
合作推广
分享本页
返回顶部