jQuery实现点赞动态效果
实现动态效果基本上都是用到定时器,修改标签的位置大小颜色属性
<!DOCTYPE html> <html > <head> <meta charset="UTF-8"> <title>Title</title> <style> .zan{ line-height: 20px; width: 20px; height: 20px; position: relative; } </style> </head> <body> <div > <div class="zan"> <span>赞</span> </div> <hr><br> <div class="zan"> <span>赞</span> </div> <hr><br> <div class="zan"> <span>赞</span> </div> <hr><br> </div> <script src="jquery-3.3.1.js"></script> <script> $('.zan').click(function () { var top = 0; var left = 0; var fontSize = 12; var opacity = 1; var tag = document.createElement('span'); $(tag).text('+1'); $(tag).css('position','absolute'); $(tag).css('float','left'); $(tag).css('color','blue'); $(tag).css('top',top + "px"); $(tag).css('left',left + "px"); $(tag).css('font-size',fontSize + "px"); $(tag).css('opacity',opacity); $(this).append(tag); var obj = setInterval(function () { top = top - 5; left = left + 5; fontSize = fontSize + 5; opacity = opacity - 0.2; $(tag).css('top',top + "px"); $(tag).css('left',left + "px"); $(tag).css('font-size',fontSize + "px"); $(tag).css('opacity',opacity); if(opacity < 0){ clearInterval(obj); tag.remove(); } },100); }); </script> </body> </html>