问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

求一个前端动画的思路

头像
希染丶
    10662439

    图片描述

    如图，有若干个div这样排列，当上滑动时，3动画到2,2动画到1，依次类推。反过来，当下滑动时候，1动画到2,2动画到3，依次类推。要可以多次上下滑动的。这样的动画效果应该用什么来实现啊？做了好几天，用transform不行。求个解决的思路，还有用什么。折磨够呛，求大神解答

    javascriptcss3html5
    阅读 2k
    1 个回答
    得票最新
    头像
    vsion
      5.1k71839

      谢邀~

      代码提供简单思路~

      <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    div{
      height: 100px;
      width: 100px;
      position: absolute;
    }
    .div1{
      top: 0px;
      left: 0px;
      background: red;
    }
    .div2{
      top: 150px;
      left: 150px;
      background: green;
    }
    .div3{
      top: 300px;
      left: 300px;
      background: blue;
    }
    button{
      position: absolute;
      top: 20px;
      left: 150px;
    }
  </style>
  <script src="jquery.min.js"></script>
</head>
<body>
  <div class="div1"></div>
  <div class="div2"></div>
  <div class="div3"></div>
  <button onclick="startAnamite()">点我</button>
  <script>
    function startAnamite(){
      anamiteFun("div1", 150, 150);
      anamiteFun("div2", 300, 300);
      anamiteFun("div3", 0, 0);
    }
    function anamiteFun(e, top, left){
      $("." + e).animate({
        top: top,
        left: left},
        2000, function() {
        /* stuff to do after animation is complete */
      });
    }
  </script>
</body>
</html>

      调用 startAnamite之前需要逻辑判断一下怎么循环比较好

      根据题主要求 2.0版本~

      <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    div{
      height: 100px;
      width: 100px;
      position: absolute;
    }
    .div1{
      top: 0px;
      left: 0px;
      background: red;
    }
    .div2{
      top: 150px;
      left: 150px;
      background: green;
    }
    .div3{
      top: 300px;
      left: 300px;
      background: blue;
    }
    button{
      position: absolute;
      top: 20px;
      left: 150px;
    }
  </style>
  <script src="jquery.min.js"></script>
</head>
<body>
  <div class="div1"></div>
  <div class="div2"></div>
  <div class="div3"></div>
  <button onclick="startAnamite()">点我</button>
  <script>
    function startAnamite(){
      if(parseInt($(".div1").css("top")) == 0){
        anamiteFun("div1", 150, 150);
        anamiteFun("div2", 300, 300);
        anamiteFun("div3", 0, 0);
      }
      else if(parseInt($(".div1").css("top")) == 150){
        anamiteFun("div3", 150, 150);
        anamiteFun("div1", 300, 300);
        anamiteFun("div2", 0, 0);
      }
      else if(parseInt($(".div1").css("top")) == 300){
        anamiteFun("div2", 150, 150);
        anamiteFun("div3", 300, 300);
        anamiteFun("div1", 0, 0);
      }
    }
    function anamiteFun(e, top, left){
      $("." + e).animate({
        top: top,
        left: left},
        2000, function() {
        /* stuff to do after animation is complete */
      });
    }
  </script>
</body>
</html>
      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题