Love:程序猿的方式~【情人节&520—我爱你】~动画加音效 → 那些年最浪漫的表白(帮你得到你的她)

举报
一个处女座的程序猿 发表于 2021/03/28 03:03:37 2021/03/28
【摘要】 Love:程序猿的方式~【情人节&520—我爱你】~动画加音效 → 那些年最浪漫的表白(帮你得到你的她) 导读        本文章代码的实现,主要参考GitHub(wuxia2001和hackerzhou),主页代码,博主已进行部分修改。程序猿的方式,将爱进行到底!愿天下有情人,终成眷属!遗憾只属于后悔的人,走过路过,千万不要错过。祝网友们,遇到志同道合的人,就鼓起...

Love:程序猿的方式~【情人节&520—我爱你】~动画加音效 → 那些年最浪漫的表白(帮你得到你的她)

导读
       本文章代码的实现,主要参考GitHub(wuxia2001和hackerzhou),主页代码,博主已进行部分修改。程序猿的方式,将爱进行到底!愿天下有情人,终成眷属!遗憾只属于后悔的人,走过路过,千万不要错过。祝网友们,遇到志同道合的人,就鼓起勇气,勇敢牵手吧!

 

目录

爱的浪漫表达

代码实现

程序员表白神器三套


 

 

爱的浪漫表达

      520到了,博主,祝愿大家尽早找到你喜欢的人,共度余生…… ^~^。建议大家点击下方的视频链接,哈哈,动画+音效=程序猿满满的爱,隔着屏幕,程序猿的方式,专业的方式,代码技术的方式,你感受到了吗?

视频网址01:程序猿的方式,最浪漫的表白
视频网址02:http://v.youku.com/v_show/id_XMzQzNjY5NTgxMg==.html?spm=a2h3j.8428770.3416059.1

 

 

 

代码实现


  
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <!-- saved from url=(0027)http://itzoo.info/Jason_niu.html -->
  3. <audio autoplay="autoplay">
  4. <source src="http://www.kugou.com/song/#hash=98AA03DF0495767F11C53C5E5FF4EF83&album_id=7766409" />
  5. </audio>
  6. <embed src="http://www.kugou.com/song/#hash=98AA03DF0495767F11C53C5E5FF4EF83&album_id=7766409" width=10 height=2 loop="true" autostart="true">
  7. <html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  8. <title>Jason_niu</title>
  9. <link type="text/css" rel="stylesheet" href="./Love_files/default.css">
  10. <script type="text/javascript" src="./Love_files/jquery.min.js"></script>
  11. <script type="text/javascript" src="./Love_files/jscex.min.js"></script>
  12. <script type="text/javascript" src="./Love_files/jscex-parser.js"></script>
  13. <script type="text/javascript" src="./Love_files/jscex-jit.js"></script>
  14. <script type="text/javascript" src="./Love_files/jscex-builderbase.min.js"></script>
  15. <script type="text/javascript" src="./Love_files/jscex-async.min.js"></script>
  16. <script type="text/javascript" src="./Love_files/jscex-async-powerpack.min.js"></script>
  17. <script type="text/javascript" src="./Love_files/functions.js" charset="utf-8"></script>
  18. <script type="text/javascript" src="./Love_files/love.js" charset="utf-8"></script>
  19. </head>
  20. <body>
  21. <div style="left: 1500px; position: absolute; top: 200px;">在GitHub源代码基础上</div>
  22. <center> <img src="yunyaniu.gif" width="100" height="100" />
  23. <img src="CSDN.png" style="position:absolute; left:1480px; top:300px;/>
  24. <div id="main">
  25. <div id="error">亲,您使用的浏览器无法支持即将显示的内容,请换成谷歌(<a href="http://www.google.cn/chrome/intl/zh-CN/landing_chrome.html?hl=zh-CN&brand=CHMI">Chrome</a>)或者火狐(<a href="http://firefox.com.cn/download/">Firefox</a>)浏览器哟~</div>
  26. <div id="wrap">
  27. <div id="text">
  28. <div id="code">
  29. <span class="say">我的爱人,我会牵着你的手,走到满头白发的那一天,</span><br>
  30. <span class="say">我会守护你生命里的精彩,并陪伴你一路精彩下去。</span><br>
  31. <span class="say">你的幸福快乐,是我一生的追求。</span><br>
  32. <span class="say">我会每一天带着笑脸,和你说早安,</span><br>
  33. <span class="say">我会每一晚与你道声晚安再入梦乡,</span><br>
  34. <span class="say">我会带你去所有你想去的地方,</span><br>
  35. <span class="say">陪你闹看你笑</span><br>
  36. <span class="say">历经你生命中所有的点点滴滴。</span><br>
  37. <span class="say">我期待这一生与你一起走过,</span><br>
  38. <span class="say">我期待与你慢慢变老</span><br>
  39. <span class="say">等我们老到哪儿也去不了,</span><br>
  40. <span class="say">还能满载着一生的幸福快乐 !</span><br>
  41. <br>
  42. <span class="say">我会为我们的未来撑起一片天空,</span><br>
  43. <span class="say">为我们的将来担负起一生的责任,</span><br>
  44. <span class="say">愿意为你去做每一件能让你开心快乐的事。</span><br>
  45. <span class="say">所有我们经历的点点滴滴,</span><br>
  46. <span class="say">都是我们一辈子最美的回忆。</span><br>
  47. <span class="say">我愿意爱你直到老去!</span><br>
  48. <br>
  49. <span class="say"><span class="space"></span> -- Yours, Jason_niu,2018.</span>
  50. </div>
  51. </div>
  52. <div id="clock-box">
  53. <a href="http://blog.csdn.net/Jason_niu" target="_blank">@Jason_niu</a><a href="http://blog.csdn.net/Jason_niu" target="_blank">@You</a> 在一起的
  54. <div id="clock"></div>
  55. </div>
  56. <canvas id="canvas" width="1100" height="680"></canvas>
  57. </div>
  58. <audio src="love.mp3" autoplay="autoplay"></audio>
  59. </div>
  60. <script>
  61. </script>
  62. <script>
  63. (function(){
  64. var canvas = $('#canvas');
  65. if (!canvas[0].getContext) {
  66. $("#error").show();
  67. return false;
  68. }
  69. var width = canvas.width();
  70. var height = canvas.height();
  71. canvas.attr("width", width);
  72. canvas.attr("height", height);
  73. var opts = {
  74. seed: {
  75. x: width / 2 - 20,
  76. color: "rgb(190, 26, 37)",
  77. scale: 2
  78. },
  79. branch: [
  80. [535, 680, 570, 250, 500, 200, 30, 100, [
  81. [540, 500, 455, 417, 340, 400, 13, 100, [
  82. [450, 435, 434, 430, 394, 395, 2, 40]
  83. ]],
  84. [550, 445, 600, 356, 680, 345, 12, 100, [
  85. [578, 400, 648, 409, 661, 426, 3, 80]
  86. ]],
  87. [539, 281, 537, 248, 534, 217, 3, 40],
  88. [546, 397, 413, 247, 328, 244, 9, 80, [
  89. [427, 286, 383, 253, 371, 205, 2, 40],
  90. [498, 345, 435, 315, 395, 330, 4, 60]
  91. ]],
  92. [546, 357, 608, 252, 678, 221, 6, 100, [
  93. [590, 293, 646, 277, 648, 271, 2, 80]
  94. ]]
  95. ]]
  96. ],
  97. bloom: {
  98. num: 700,
  99. width: 1080,
  100. height: 650,
  101. },
  102. footer: {
  103. width: 1200,
  104. height: 5,
  105. speed: 10,
  106. }
  107. }
  108. var tree = new Tree(canvas[0], width, height, opts);
  109. var seed = tree.seed;
  110. var foot = tree.footer;
  111. var hold = 1;
  112. canvas.click(function(e) {
  113. var offset = canvas.offset(), x, y;
  114. x = e.pageX - offset.left;
  115. y = e.pageY - offset.top;
  116. if (seed.hover(x, y)) {
  117. hold = 0;
  118. canvas.unbind("click");
  119. canvas.unbind("mousemove");
  120. canvas.removeClass('hand');
  121. }
  122. }).mousemove(function(e){
  123. var offset = canvas.offset(), x, y;
  124. x = e.pageX - offset.left;
  125. y = e.pageY - offset.top;
  126. canvas.toggleClass('hand', seed.hover(x, y));
  127. });
  128. var seedAnimate = eval(Jscex.compile("async", function () {
  129. seed.draw();
  130. while (hold) {
  131. $await(Jscex.Async.sleep(10));
  132. }
  133. while (seed.canScale()) {
  134. seed.scale(0.95);
  135. $await(Jscex.Async.sleep(10));
  136. }
  137. while (seed.canMove()) {
  138. seed.move(0, 2);
  139. foot.draw();
  140. $await(Jscex.Async.sleep(10));
  141. }
  142. }));
  143. var growAnimate = eval(Jscex.compile("async", function () {
  144. do {
  145. tree.grow();
  146. $await(Jscex.Async.sleep(10));
  147. } while (tree.canGrow());
  148. }));
  149. var flowAnimate = eval(Jscex.compile("async", function () {
  150. do {
  151. tree.flower(2);
  152. $await(Jscex.Async.sleep(10));
  153. } while (tree.canFlower());
  154. }));
  155. var moveAnimate = eval(Jscex.compile("async", function () {
  156. tree.snapshot("p1", 240, 0, 610, 680);
  157. while (tree.move("p1", 500, 0)) {
  158. foot.draw();
  159. $await(Jscex.Async.sleep(10));
  160. }
  161. foot.draw();
  162. tree.snapshot("p2", 500, 0, 610, 680);
  163. // 会有闪烁不得意这样做, (>﹏<)
  164. canvas.parent().css("background", "url(" + tree.toDataURL('image/png') + ")");
  165. canvas.css("background", "#ffe");
  166. $await(Jscex.Async.sleep(300));
  167. canvas.css("background", "none");
  168. }));
  169. var jumpAnimate = eval(Jscex.compile("async", function () {
  170. var ctx = tree.ctx;
  171. while (true) {
  172. tree.ctx.clearRect(0, 0, width, height);
  173. tree.jump();
  174. foot.draw();
  175. $await(Jscex.Async.sleep(25));
  176. }
  177. }));
  178. var textAnimate = eval(Jscex.compile("async", function () {
  179. var together = new Date();
  180. together.setFullYear(2018, 1, 1);
  181. together.setHours(20);
  182. together.setMinutes(20);
  183. together.setSeconds(0);
  184. together.setMilliseconds(0);
  185. $("#code").show().typewriter();
  186. $("#clock-box").fadeIn(500);
  187. while (true) {
  188. timeElapse(together);
  189. $await(Jscex.Async.sleep(1000));
  190. }
  191. }));
  192. var runAsync = eval(Jscex.compile("async", function () {
  193. $await(seedAnimate());
  194. $await(growAnimate());
  195. $await(flowAnimate());
  196. $await(moveAnimate());
  197. textAnimate().start();
  198. $await(jumpAnimate());
  199. }));
  200. runAsync().start();
  201. })();
  202. </script>
  203. <div style="left: 1500px; position: absolute; top: 220px;color:blue;font-size:20px;">Jason niu更改设计</div>
  204. </body></html>

 

程序员表白神器三套

第一套

 

第二套

 

 

第三套

 

 

 

 

 

 

 

 

 

文章来源: yunyaniu.blog.csdn.net,作者:一个处女座的程序猿,版权归原作者所有,如需转载,请联系作者。

原文链接:yunyaniu.blog.csdn.net/article/details/79430987

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。