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

开发者社区> 一个处女座的程序猿> 正文

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

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

爱的浪漫表达


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


视频网址01:程序猿的方式,最浪漫的表白

视频网址02:http://v.youku.com/v_show/id_XMzQzNjY5NTgxMg==.html?spm=a2h3j.8428770.3416059.1


代码实现


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!-- saved from url=(0027)http://itzoo.info/Jason_niu.html -->

<audio autoplay="autoplay">

 <source src="http://www.kugou.com/song/#hash=98AA03DF0495767F11C53C5E5FF4EF83&album_id=7766409" />

</audio>

<embed src="http://www.kugou.com/song/#hash=98AA03DF0495767F11C53C5E5FF4EF83&album_id=7766409" width=10 height=2 loop="true" autostart="true">

<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

       <title>Jason_niu</title>

       

       <link type="text/css" rel="stylesheet" href="./Love_files/default.css">

       <script type="text/javascript" src="./Love_files/jquery.min.js"></script>

       <script type="text/javascript" src="./Love_files/jscex.min.js"></script>

       <script type="text/javascript" src="./Love_files/jscex-parser.js"></script>

       <script type="text/javascript" src="./Love_files/jscex-jit.js"></script>

       <script type="text/javascript" src="./Love_files/jscex-builderbase.min.js"></script>

       <script type="text/javascript" src="./Love_files/jscex-async.min.js"></script>

       <script type="text/javascript" src="./Love_files/jscex-async-powerpack.min.js"></script>

       <script type="text/javascript" src="./Love_files/functions.js" charset="utf-8"></script>

       <script type="text/javascript" src="./Love_files/love.js" charset="utf-8"></script>

   </head>

   <body>

   <div style="left: 1500px; position: absolute; top: 200px;">在GitHub源代码基础上</div>

   <center> <img src="yunyaniu.gif" width="100" height="100" />

   <img src="CSDN.png" style="position:absolute; left:1480px; top:300px;/>

   

   

   

       <div id="main">

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

           <div id="wrap">

              <div id="text">

                   <div id="code">                

                   <span class="say">我的爱人,我会牵着你的手,走到满头白发的那一天,</span><br>

                   <span class="say">我会守护你生命里的精彩,并陪伴你一路精彩下去。</span><br>

                   <span class="say">你的幸福快乐,是我一生的追求。</span><br>

                   <span class="say">我会每一天带着笑脸,和你说早安,</span><br>

                    <span class="say">我会每一晚与你道声晚安再入梦乡,</span><br>

                   <span class="say">我会带你去所有你想去的地方,</span><br>

                   <span class="say">陪你闹看你笑</span><br>

                   <span class="say">历经你生命中所有的点点滴滴。</span><br>

                   <span class="say">我期待这一生与你一起走过,</span><br>

                   <span class="say">我期待与你慢慢变老</span><br>

                   <span class="say">等我们老到哪儿也去不了,</span><br>

                   <span class="say">还能满载着一生的幸福快乐 !</span><br>

                   <br>

                   <span class="say">我会为我们的未来撑起一片天空,</span><br>

                    <span class="say">为我们的将来担负起一生的责任,</span><br>

                     <span class="say">愿意为你去做每一件能让你开心快乐的事。</span><br>

                      <span class="say">所有我们经历的点点滴滴,</span><br>

                       <span class="say">都是我们一辈子最美的回忆。</span><br>

                        <span class="say">我愿意爱你直到老去!</span><br>

                  <br>

                   <span class="say"><span class="space"></span> -- Yours, Jason_niu,2018.</span>

                   </div>

               </div>

               <div id="clock-box">

                   <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> 在一起的

                       <div id="clock"></div>

               </div>

               <canvas id="canvas" width="1100" height="680"></canvas>

           </div>

           <audio src="love.mp3" autoplay="autoplay"></audio>

       </div>

   

   <script>

   </script>

   <script>

   (function(){

       var canvas = $('#canvas');

       if (!canvas[0].getContext) {

           $("#error").show();

           return false;

       }

       var width = canvas.width();

       var height = canvas.height();

       

       canvas.attr("width", width);

       canvas.attr("height", height);

       var opts = {

           seed: {

               x: width / 2 - 20,

               color: "rgb(190, 26, 37)",

               scale: 2

           },

           branch: [

               [535, 680, 570, 250, 500, 200, 30, 100, [

                   [540, 500, 455, 417, 340, 400, 13, 100, [

                       [450, 435, 434, 430, 394, 395, 2, 40]

                   ]],

                   [550, 445, 600, 356, 680, 345, 12, 100, [

                       [578, 400, 648, 409, 661, 426, 3, 80]

                   ]],

                   [539, 281, 537, 248, 534, 217, 3, 40],

                   [546, 397, 413, 247, 328, 244, 9, 80, [

                       [427, 286, 383, 253, 371, 205, 2, 40],

                       [498, 345, 435, 315, 395, 330, 4, 60]

                   ]],

                   [546, 357, 608, 252, 678, 221, 6, 100, [

                       [590, 293, 646, 277, 648, 271, 2, 80]

                   ]]

               ]]

           ],

           bloom: {

               num: 700,

               width: 1080,

               height: 650,

           },

           footer: {

               width: 1200,

               height: 5,

               speed: 10,

           }

       }

       var tree = new Tree(canvas[0], width, height, opts);

       var seed = tree.seed;

       var foot = tree.footer;

       var hold = 1;

       canvas.click(function(e) {

           var offset = canvas.offset(), x, y;

           x = e.pageX - offset.left;

           y = e.pageY - offset.top;

           if (seed.hover(x, y)) {

               hold = 0;

               canvas.unbind("click");

               canvas.unbind("mousemove");

               canvas.removeClass('hand');

           }

       }).mousemove(function(e){

           var offset = canvas.offset(), x, y;

           x = e.pageX - offset.left;

           y = e.pageY - offset.top;

           canvas.toggleClass('hand', seed.hover(x, y));

       });

       var seedAnimate = eval(Jscex.compile("async", function () {

           seed.draw();

           while (hold) {

               $await(Jscex.Async.sleep(10));

           }

           while (seed.canScale()) {

               seed.scale(0.95);

               $await(Jscex.Async.sleep(10));

           }

           while (seed.canMove()) {

               seed.move(0, 2);

               foot.draw();

               $await(Jscex.Async.sleep(10));

           }

       }));

       var growAnimate = eval(Jscex.compile("async", function () {

           do {

               tree.grow();

               $await(Jscex.Async.sleep(10));

           } while (tree.canGrow());

       }));

       var flowAnimate = eval(Jscex.compile("async", function () {

           do {

               tree.flower(2);

               $await(Jscex.Async.sleep(10));

           } while (tree.canFlower());

       }));

       var moveAnimate = eval(Jscex.compile("async", function () {

           tree.snapshot("p1", 240, 0, 610, 680);

           while (tree.move("p1", 500, 0)) {

               foot.draw();

               $await(Jscex.Async.sleep(10));

           }

           foot.draw();

           tree.snapshot("p2", 500, 0, 610, 680);

           // 会有闪烁不得意这样做, (>﹏<)

           canvas.parent().css("background", "url(" + tree.toDataURL('image/png') + ")");

           canvas.css("background", "#ffe");

           $await(Jscex.Async.sleep(300));

           canvas.css("background", "none");

       }));

       var jumpAnimate = eval(Jscex.compile("async", function () {

           var ctx = tree.ctx;

           while (true) {

               tree.ctx.clearRect(0, 0, width, height);

               tree.jump();

               foot.draw();

               $await(Jscex.Async.sleep(25));

           }

       }));

       var textAnimate = eval(Jscex.compile("async", function () {

           var together = new Date();

           together.setFullYear(2018, 1, 1);

           together.setHours(20);

           together.setMinutes(20);

           together.setSeconds(0);

           together.setMilliseconds(0);

           $("#code").show().typewriter();

           $("#clock-box").fadeIn(500);

           while (true) {

               timeElapse(together);

               $await(Jscex.Async.sleep(1000));

           }

       }));

       var runAsync = eval(Jscex.compile("async", function () {

           $await(seedAnimate());

           $await(growAnimate());

           $await(flowAnimate());

           $await(moveAnimate());

           textAnimate().start();

           $await(jumpAnimate());

       }));

       runAsync().start();

   })();

   </script>

<div style="left: 1500px; position: absolute; top: 220px;color:blue;font-size:20px;">Jason niu更改设计</div>

</body></html>


版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
怎么设置阿里云服务器安全组?阿里云安全组规则详细解说
阿里云服务器安全组设置规则分享,阿里云服务器安全组如何放行端口设置教程
6907 0
使用OpenApi弹性释放和设置云服务器ECS释放
云服务器ECS的一个重要特性就是按需创建资源。您可以在业务高峰期按需弹性的自定义规则进行资源创建,在完成业务计算的时候释放资源。本篇将提供几个Tips帮助您更加容易和自动化的完成云服务器的释放和弹性设置。
7751 0
阿里云服务器远程登录用户名和密码的查询方法
阿里云服务器远程连接登录用户名和密码在哪查看?阿里云服务器默认密码是什么?云服务器系统不同默认用户名不同
443 0
如何设置阿里云服务器安全组?阿里云安全组规则详细解说
阿里云安全组设置详细图文教程(收藏起来) 阿里云服务器安全组设置规则分享,阿里云服务器安全组如何放行端口设置教程。阿里云会要求客户设置安全组,如果不设置,阿里云会指定默认的安全组。那么,这个安全组是什么呢?顾名思义,就是为了服务器安全设置的。安全组其实就是一个虚拟的防火墙,可以让用户从端口、IP的维度来筛选对应服务器的访问者,从而形成一个云上的安全域。
3829 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,云吞铺子总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系统盘、创建快照、配置安全组等操作如何登录ECS云服务器控制台? 1、先登录到阿里云ECS服务器控制台 2、点击顶部的“控制台” 3、通过左侧栏,切换到“云服务器ECS”即可,如下图所示 通过ECS控制台的远程连接来登录到云服务器 阿里云ECS云服务器自带远程连接功能,使用该功能可以登录到云服务器,简单且方便,如下图:点击“远程连接”,第一次连接会自动生成6位数字密码,输入密码即可登录到云服务器上。
16819 0
阿里云ECS云服务器初始化设置教程方法
阿里云ECS云服务器初始化是指将云服务器系统恢复到最初状态的过程,阿里云的服务器初始化是通过更换系统盘来实现的,是免费的,阿里云百科网分享服务器初始化教程: 服务器初始化教程方法 本文的服务器初始化是指将ECS云服务器系统恢复到最初状态,服务器中的数据也会被清空,所以初始化之前一定要先备份好。
3227 0
+关注
一个处女座的程序猿
国内互联网圈知名博主、人工智能领域优秀创作者,全球最大中文IT社区博客专家、CSDN开发者联盟生态成员、中国开源社区专家、华为云社区专家、51CTO社区专家、Python社区专家等,曾受邀采访和评审十多次。仅在国内的CSDN平台,博客文章浏览量超过2500万,拥有超过57万的粉丝。
1701
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载