H5 div移动效果

最新推荐文章于 2024-11-16 19:06:08 发布

WellTiger

最新推荐文章于 2024-11-16 19:06:08 发布

阅读量1.1k

点赞数

分类专栏： H5 文章标签： div移动效果 H5 div显隐

本文链接：https://blog.csdn.net/WellTiger/article/details/101177257

版权

H5 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

H5 div移动效果

1. 最近在用纯H5做边框向右和向左缓慢弹出效果
2.如果用Jquery更简单，自带动画函数

1. 最近在用纯H5做边框向右和向左缓慢弹出效果

由于是保密项目，最近一个项目没有用Jquery,而用纯H5和js，实现点击红色div区域实现向左右移动

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script>
    var timer;
    function fun1() {
      clearInterval(timer);
      var odiv = document.getElementById("myDiv");

      if (odiv.offsetLeft < -100 || odiv.offsetLeft === -100) {
        timer = setInterval(function () {
          odiv = document.getElementById("myDiv");
          if (odiv.offsetLeft === 0 || odiv.offsetLeft > 0) {
            clearInterval(timer);
            return;
          }
          odiv.style.left = odiv.offsetLeft + 5 + "px";
        }, 10)
      }
      if (odiv.offsetLeft >= 0 || odiv.offsetLeft === 0) {
        timer = setInterval(function () {
          odiv = document.getElementById("myDiv");
          if (odiv.offsetLeft < -100 || odiv.offsetLeft === -100) {
            clearInterval(timer);
            return;
          }
          odiv.style.left = odiv.offsetLeft - 5 + "px";
        }, 10)
      }

    }
  </script>
</head>
<body>
<div style="position:relative;background: #190712;margin-left: 200px;width: 500px;height: 500px">
  <div onclick="fun1()" id="myDiv" style="width: 100px;height: 100px;background: red;position: absolute;left: -100px">

  </div>
</div>
</body>
</html>

2.如果用Jquery更简单，自带动画函数

下面代码是让myDiv在2s内left移动到0

  $("#myDiv").animate({left: "0"}, 2000)