问答博客资讯标签用户活动
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

百度图片上鼠标移入的动画效果是怎么写的啊

头像
Smile
    6321421
    javascriptcsshtml
    阅读 3k
    3 个回答
    得票最新
    头像
    Reachel
      2.6k1114
      ✓ 已被采纳

      hover之后将该区域块显示出来,然后加上animation，从左到右的滑动
      举个例子

      <!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
  <style>
    ul li{list-style:none; width:100px; position:relative; float:left; overflow:hidden;}
    ul li img{width:100%;}
    ul li .info{position:absolute; bottom:0; left:0; width:100%; height:40px; line-height:40px; background:-webkit-gradient(linear, 0 0, 0 bottom, from(rgba(255,255,255,.2)), to(rgba(0,0,0,.2)));}
    .hide{display:none;}
    .slideleft{animation:left .5s 1; animation-fill-mode:forwards;}
    .slideright{animation:right .5s 1; animation-fill-mode:forwards;}
    .slidetop{animation:top .5s 1; animation-fill-mode:forwards;}
    .slidebottom{animation:bottom .5s 1; animation-fill-mode:forwards;}
    
    @keyframes left{
      from{left:-100%;}
      to{left:0;}
    }
    @keyframes top{
      from{bottom:-100%; left:0;}
      to{bottom:0; left:0;}
    }
    @keyframes bottom{
      from{bottom:100%;}
      to{bottom:0;}
    }
    @keyframes right{
      from{left:100%;}
      to{left:0;}
    }
  </style>
</head>
<body>
  <ul>
    <li>
      <img src="https://img1.epetbar.com/2017-05/24/10/7982bafb75e8aba985e08de99780be52.jpg?x-oss-process=style/fill&$1=300&$2=300" alt="">
      <div class="info hide">
        test
      </div>
    </li>
    <li>
      <img src="https://img1.epetbar.com/2017-05/24/10/7982bafb75e8aba985e08de99780be52.jpg?x-oss-process=style/fill&$1=300&$2=300" alt="">
      <div class="info hide">
        test
      </div>
    </li>
    <li>
      <img src="https://img1.epetbar.com/2017-05/24/10/7982bafb75e8aba985e08de99780be52.jpg?x-oss-process=style/fill&$1=300&$2=300" alt="">
      <div class="info hide">
        test
      </div>
    </li>
  </ul>

<script>
$("li").hover(function(e){
  var mX = e.clientX;
  var mY = e.clientY;
  var liLeft = $(this).offset().left;
  var liTop = $(this).offset().top;
  var liW = $(this).width();
  var liH = $(this).height();

  x = (mX - liLeft - ( liW  / 2 ) ) * ( liW  > liH ? (liH / liW ) : 1 )
  y = (mY - liTop - (liH / 2)) * (liH > liW ? (liW / liH) : 1),  
  // 上(0) 右(1) 下(2) 左(3)  
  direction = Math.round( ( ( ( Math.atan2( y, x ) * ( 180 / Math.PI ) ) + 180 ) / 90) + 3 ) % 4;
  if(direction == 0){
    $(this).find(".info").removeClass("hide").addClass("slidetop");
  }else if(direction == 1){
    $(this).find(".info").removeClass("hide").addClass("slideright");
  }else if(direction == 2){
    $(this).find(".info").removeClass("hide").addClass("slidebottom");
  }else if(direction == 3){
    $(this).find(".info").removeClass("hide").addClass("slideleft");
  }
},function(){
  $(this).find(".info").addClass("hide").removeClass("slideleft").removeClass("slidetop").removeClass("slideright").removeClass("slidebottom")
})
</script>
</body>
</html>
      头像
      爱笑的眼睛
        4031429

        这个直接用css就能实现，hover的时候出现，然后给一个过渡时间

        头像
        此去欲何
          12928

          js判断鼠标进入的方向，进入的提示框同向进入，离开的提示框同向移出呗。
          我比较好奇的是，那么多图片高度是固定，怎么做到每一行的宽度也统一的。

          撰写回答
          你尚未登录，登录后可以
          • 和开发者交流问题的细节
          • 关注并接收问题和回答的更新提醒
          • 参与内容的编辑和改进，让解决方法与时俱进
          推荐问题