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截取字符串的三个方法substring,substr,slice

    substring() 方法 substring() 方法用于提取字符串中两个指定索引之间的字符。语法如下： stringObject.substring(start, stop) 参数 start：必选，正整数，规定要提取的子串的第一个字符在 stringObject 中的位置。必须是数值，如果不是，会自动转换为数字。 参数 stop：可选，正整数，且必须…

    JavaScript 2023年5月28日
    00

  • javascript实现查找数组中最大值方法汇总

    JavaScript实现查找数组中最大值方法汇总 对于数组中的最大值查找，JavaScript 提供了多种实现方式，这里将介绍最常用的三种方法： 方法一: for循环遍历数组，逐一比较大小 该方法的实现思路是通过 for 循环遍历整个数组，不断更新当前最大值。代码示例如下： function getArrayMax(arr) { let max = arr[…

    JavaScript 2023年6月10日
    00

  • Js判断参数(String,Array,Object)是否为undefined或者值为空

    要判断一个变量是否为undefined或者值为空，可以根据变量的类型采用不同的方法进行判断。 判断字符串类型变量是否为空 使用if语句结合||运算符对字符串类型的变量进行判断，示例代码如下： let str = ”; if (!str || str.trim().length === 0) { console.log(‘字符串为空’); } else { …

    JavaScript 2023年6月10日
    00

  • JS中对数组元素进行增删改移的方法总结

    下面是JS中对数组元素进行增删改移的方法总结的完整攻略： 一、添加元素 1. push() push() 方法向数组的末尾添加一个或多个元素，并返回新的长度。 let arr = [1, 2, 3]; arr.push(4); console.log(arr); // [1, 2, 3, 4] 2. unshift() unshift() 方法向数组的开头添…

    JavaScript 2023年5月27日
    00

  • JavaScript必看的10道面试题总结（推荐）

    以下是关于“JavaScript必看的10道面试题总结（推荐）”的完整攻略。 1. 闭包 闭包是一种特殊的函数，它可以访问外部函数的变量，并且不会被外部函数释放。常规使用场景是，内部函数返回外部函数定义的函数，并在返回时携带外部变量的状态。 在以下示例中，我们定义了一个外部函数createCounter，它返回一个内部函数counter。内部函数counte…

    JavaScript 2023年6月10日
    00

  • javascript正则表达式和字符串RegExp and String（二）

    JavaScript正则表达式和字符串RegExp and String（二） 1. RegExp 对象 RegExp 对象是 JavaScript 的内置对象，用于支持正则表达式。 1.1 RegExp 对象的创建 字面量方式： var patt = /pattern/flags; 构造函数方式： var patt = new RegExp(pattern…

    JavaScript 2023年5月28日
    00

  • JS获取当前时间实例代码(年月日时分秒)

    获取当前时间、时间戳这一操作在Web开发中非常常见，也是JS编程中的基础操作。下面，我将为你详细讲解如何使用JavaScript获取当前时间实例代码(年月日时分秒)。 获取当前时间实例代码 我们可以使用JavaScript的Date对象来获取当前时间的实例代码。具体方法是调用Date对象, 然后获取年、月、日、时、分以及秒等信息。Date对象也可以获取当前时…

    JavaScript 2023年5月27日
    00

  • 使用HTML5的表单验证的简单示例

    当用户填写表单时，通常需要对其输入进行验证以确保数据的正确性和完整性。HTML5提供了一些内建的表单验证，可以帮助我们在浏览器端轻松实现表单验证。 下面是一个使用HTML5表单验证的简单示例： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"&…

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