点赞特效

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)
  }

阅读更多
个人分类: js文章
上一篇了解今日头条推荐算法原理
下一篇利用微信网页录音接口实现语音搜索
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭