绚烂多彩的点赞效果

来源：互联网发布：linux,vi怎么用编辑：程序博客网时间：2024/05/02 02:22

1. 今天模仿着一个大神写可以个绚烂多彩的点赞功能，希望能给需要的朋友们一些小小的帮助

看代码咯！代码中用到的图片

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>多彩的点赞效果</title><style type="text/css">.container {width: 300px;height: 300px;margin:0 auto;text-align: center;}.starBox {width: 250px;height: 250px;position: relative;}.starBox span {display: inline-block;vertical-align: middle;margin-right: 10px;width: 50px;height: 50px;float: left;}.heart {position: absolute;left: -14px;background: url(web_heart_animation.png);background-repeat: no-repeat;background-position: left;background-size: 2900%;cursor: pointer;}@-webkit-keyframes startchange {0% {background-position: left;}100% {background-position: right;}}@keyframes startchange {0% {background-position: left;}100% {background-position: right;}}.heartChangeClass {display: inline-block;-webkit-animation-name: startchange;animation-name: startchange;-webkit-animation-duration: 0.8s; /*完成一个周期所用的时间*/animation-duration: 0.8s;-webkit-animation-iteration-count: 1; /*循环执行的次数*/animation-iteration-count: 1;-webkit-animation-timing-function: steps(28); /*从头到尾以相同的速度播放动画*/animation-timing-function: steps(28);background-position: right;}.likeCount {margin-top: 15px;margin-left: 8px;}</style></head><body><div class="container"><h3>这是一个多彩的点赞效果查看效果！</h3><div class="starBox"><span class="heart" id="like1" data-id="like"></span> <span class="likeCount" id="likeCount1">12</span></div></div><script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script><script type="text/javascript">$(document).ready(function () {$('body').on('click', '.heart', function () {var clickId = $(this).attr('data-id');var index = $(this).attr('id').split('like')[1];var clickTime = parseInt($('#likeCount'+ index).html());if(clickId == "like") {$(this).addClass('heartChangeClass').attr('data-id', 'unlike');$('#likeCount'+ index).html(clickTime + 1);}else {$(this).removeClass('heartChangeClass').attr('data-id', 'like');$('#likeCount'+ index).html(clickTime - 1);}});})</script></body></html>

谢谢大家！

0 0