查看 931
回复 0
jQuery 鼠标指向元素滑出元素信息效果的实现
逆风天

16

主题

0

回帖

105

积分
发表于 2021-12-4 20:02:24
显示全部楼层 阅读模式

jQuery 鼠标指向滑出信息的实现:

jQuery 代码
  1. $('[data="attachment"]').hover(
  2.         function () {
  3.           $(this).find('.attachment-info').animate({
  4.             top: "-30px"
  5.           }, 200);
  6.           $(this).find('.attachment-size').animate({
  7.             bottom: "-30px"
  8.           }, 100);
  9.         },
  10.         function () {
  11.           $(this).find('.attachment-info').animate({
  12.             top: "0"
  13.           }, 200);
  14.           $(this).find('.attachment-size').animate({
  15.             bottom: "0"
  16.           }, 100);
  17.         }
  18.       );
复制代码
Scss 代码
  1. .attachment-box,
  2. .attachment-info,
  3. .attachment-link,
  4. .attachment-size {
  5.   display: flex;
  6. }

  7. .attachment-box,
  8. .attachment-info,
  9. .attachment-link,
  10. .attachment-size {
  11.   flex-wrap: nowrap;
  12. }

  13. .attachment-box {
  14.   flex-direction: column;
  15. }

  16. .attachment-info,
  17. .attachment-link,
  18. .attachment-size {
  19.   align-items: center;
  20. }

  21. .attachment-info,
  22. .attachment-link,
  23. .attachment-size {
  24.   flex-direction: row;
  25.   justify-content: center;
  26.   color: #ffffff;
  27. }

  28. .attachment-box {
  29.   min-width: 150px;
  30.   height: 40px;
  31.   position: relative;
  32. }

  33. .attachment-box,
  34. .attachment-link {
  35.   border-radius: 4px;
  36. }

  37. .attachment-info,
  38. .attachment-size {
  39.   position: absolute;
  40.   right: 0;
  41.   left: 0;
  42.   padding: 5px 10px;
  43.   margin: 0 10px;
  44.   background-color: #2D2727;
  45.   z-index: 1;
  46. }

  47. .attachment-info {
  48.   border-top-left-radius: 4px;
  49.   border-top-right-radius: 4px;
  50.   top: 0;
  51. }

  52. .attachment-size {
  53.   border-bottom-left-radius: 4px;
  54.   border-bottom-right-radius: 4px;
  55.   bottom: 0;
  56. }

  57. .attachment-link {
  58.   background-color: #2974ff;
  59.   font-size: 15px;
  60.   height: 40px;
  61.   line-height: 30px;
  62.   padding: 5px 20px;
  63.   z-index: 2;

  64.   &:active,
  65.   &:focus,
  66.   &:hover {
  67.     text-decoration: none;
  68.     color: #ffffff;
  69.   }

  70.   &:hover {
  71.     box-shadow: 0 0 10px rgba($color: #000000, $alpha: .175) inset;
  72.   }
  73. }
复制代码
HTML 结构
  1. <div class="attachment-box" data="attachment">
  2.     <div class="attachment-info">工作日志.docx</div>
  3.     <a href="javascript:;" class="attachment-link">点击下载</a>
  4.     <div class="attachment-size">5 GB</div>
  5.   </div>
复制代码



您需要登录后才可以回帖 登录 立即注册
QQ 快速回复 返回列表