问答博客资讯标签用户活动
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>
      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题