zoukankan      html  css  js  c++  java

  • 模拟点赞效果

     

    点赞效果
    点赞效果

     

    1. 混合模式创建点赞: 不同颜色, 运动轨迹,到达顶端opacity为0, 整体向上跑
    2. 享元模式存储点赞对象
    1. <!DOCTYPE html> 
    2. <html lang="en"> 
    3. <head> 
    4. <meta charset="UTF-8"> 
    5. <title>点赞</title> 
    6. <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> 
    7. <style> 
    8. .box{width: 500px;height: 400px;border:2px solid #ddd;margin: 10px auto;position: relative;overflow: hidden;} 
    9. .btn{width: 200px;height: 50px;text-align: center;line-height: 50px;cursor: pointer; 
    10. background: green;color: #fff;margin: 0 auto;border-radius: 5px;} 
    11. .love{width: 30px;height: 30px;border-radius: 50%;line-height: 30px;opacity: 1;animation-duration: 3s; 
    12. text-align: center; box-sizing: border-box; cursor: pointer;position: absolute;left: 235px;bottom: 0;font-size: 20px;} 
    13. .line{ position: absolute; background: red; color: #fff; width: 40px; height: 40px; line-height: 40px; font-size: 26px; left: 230px;z-index: 99;} 
    14. .line #count{ position: absolute; font-size: 12px;background: red;color: #fff;line-height: 1; padding: 1px 3px; border-radius: 10px; border: 2px solid #fff;} 
    15. .line1{animation-name: line1;} 
    16. .line2{animation-name: line2;} 
    17. .line3{animation-name: line3;} 
    18. @keyframes line1{ 
    19. 0%{ opacity: 1; bottom: 0; left: 235px; } 
    20. 25%{ left: 195px; } 
    21. 50%{ left: 285px; } 
    22. 75%{ left: 255px; } 
    23. 100%{ opacity: 0.3; bottom: 400px; left: 235px; } 
    24. } 
    25. @keyframes line2{ 
    26. 0%{ opacity: 1; bottom: 0; left: 235px; } 
    27. 25%{ left: 175px; } 
    28. 50%{ left: 305px; } 
    29. 75%{ left: 215px; } 
    30. 100%{ opacity: 0.3; bottom: 400px; left: 235px; } 
    31. } 
    32. @keyframes line3{ 
    33. 0%{ opacity: 1; bottom: 0; left: 235px; } 
    34. 25%{ left: 255px; } 
    35. 50%{ left: 155px; } 
    36. 75%{ left: 355px; } 
    37. 100%{ opacity: 0.3; bottom: 400px; left: 235px; } 
    38. } 
    39. .desc{padding: 10px;text-align: center;} 
    40. .desc #num{color: red;font-size: 24px;} 
    41. </style> 
    42. <script> 
    43. var countZan = 0; 
    44. var createZan = 0; 
    45.  
    46. // [0,255] 
    47. function randomNum(num){ 
    48. return parseInt(Math.random()*num); 
    49. } 
    50. function Love(){ 
    51.  
    52. /******* 
    53. * 享元模式: 复用已经完成的对象 
    54. * */ 
    55. this.line = 'line'+parseInt(Math.random()*3+1); 
    56. var oldLoveArr = $('[flag=false]'); 
    57. if(oldLoveArr.size()>0){ 
    58. this.tpl = oldLoveArr.eq(0).removeClass().addClass('love'); 
    59. }else{ 
    60. createZan ++; 
    61. this.tpl = '<div class="love" style="background: ' + 
    62. 'rgb('+255+','+randomNum(255)+','+randomNum(255)+');' + 
    63. 'color: rgb(255,255,255);">❤</div>'; 
    64. } 
    65. } 
    66. Love.prototype.show = function () { 
    67. var heart = $(this.tpl); 
    68. heart.addClass(this.line).attr('flag',true).appendTo($('.box')); 
    69. setTimeout(function () { 
    70. heart.attr('flag',false); 
    71. },2000); 
    72.  
    73. //更新计数 
    74. this.updateCount(); 
    75. } 
    76.  
    77. Love.prototype.updateCount = function () { 
    78. $('#count').html(countZan); 
    79. $('#num').html(createZan); 
    80. } 
    81.  
    82. $(function () { 
    83. $('.btn').click(function () { 
    84. countZan ++; 
    85. new Love().show(); 
    86. }); 
    87. setInterval(function () { 
    88. $('.btn').click(); 
    89. }, 100); 
    90. }); 
    91. </script> 
    92. </head> 
    93. <body> 
    94. <div class="btn">赞!❤</div> 
    95. <div class="box"> 
    96. <div class="love line">❤<span id="count">0</span></div> 
    97. </div> 
    98. <div class="desc"> 
    99. 盒子内赞的个数: <span id="num">0</span> 
    100. </div> 
    101. </body> 
    102. </html> 
  • 相关阅读:
    segmentation fault(core dumped)
    (LIS LCS 例题)Max Sum Advanced Fruits Super Jumping! Jumping! Jumping!
    几种数学公式(环排列 母函数 唯一分解定理 卡特兰数 默慈金数 贝尔数 那罗延数)
    map set 详解
    算法录 之 二分和三分
    LIS 最长上升子序列 LCS 最长公共子序列 模板
    JAVA 大数据 例题
    Java 实现大数算法
    7 21 第一次团队赛——————写给队友
    离散化+unique（）+二分查找
  • 原文地址：https://www.cnblogs.com/linyufeng/p/9600592.html
Copyright © 2011-2022 走看看