点赞特效

最新推荐文章于 2024-08-01 23:43:20 发布

tang05709

最新推荐文章于 2024-08-01 23:43:20 发布

阅读量636

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/tang05709/article/details/80322965

版权

js 专栏收录该内容

109 篇文章 0 订阅

订阅专栏

html

<div class="detail-praise article-praise">
      <a href="javascript:void(0)" id="read_praise" data-id="<%= @article.id %>"><%= icon 'thumbs-o-up' %> <span><%= @article.praise %></span> </a>
    </div>

css:

.detail-praise {
  background: $white;
  margin-bottom: $xx-large-gutter-size;
  padding-bottom: $xx-large-gutter-size;
  position: relative;
  #art_animate {
    position: absolute;
    left: 45%;
    bottom: 20px;
    font-size: 32px;
  }
}

js:

// 点赞特效
  const praiseAnimate = () => {
    
    const initX = 100
    const initY = 500
    // (Math.random() * (maxWidth - 20 + 1) | 0) + 20
    const rule = (initX - initY) + 1
    const leftRand = (Math.random() * rule) + initY
    const clR = Math.floor(Math.random() * 255)
    const clG = Math.floor(Math.random() * 255)
    const clB = Math.floor(Math.random() * 255)
    const animateDiv = '<div id="art_animate"><i class="fa fa-thumbs-o-up"></i></div>'
    $('.article-praise').append(animateDiv)
    $('.article-praise #art_animate').css('color', `rgba(${clR}, ${clG}, ${clB}, 1)`)
    $('.article-praise #art_animate').animate({
      bottom: '500px',
      opacity: '0',
      left: leftRand,
    }, 3000)
  }