js表白心形特效

时间：2022-09-04 07:36:03

好久没有仔细钻研技术了，闲下来借鉴一下做出一些效果

友情链接： http://tiepeng.applinzi.com/love_you/

js表白心形特效

body{margin:;padding:;background:#ffe;font-size:12px;overflow:auto}

#mainDiv{width:100%;height:100%}

#loveHeart{float:left;width:670px;height:625px}

#garden{width:100%;height:100%}

#elapseClock{text-align:right;font-size:18px;margin-top:10px;margin-bottom:10px}

#words{font-family:"sans-serif";width:500px;font-size:24px;color:#666}

#messages{display:none}

#elapseClock .digit{font-family:"digit";font-size:36px}

#loveu{padding:5px;font-size:22px;margin-top:80px;margin-right:120px;text-align:right;display:none}

#loveu .signature{margin-top:10px;font-size:20px;font-style:italic}

#clickSound{display:none}

#code{float:left;width:440px;height:400px;color:#333;font-family:"Consolas","Monaco","Bitstream Vera Sans Mono","Courier New","sans-serif";font-size:12px}

#code .string{color:#2a36ff}

#code .keyword{color:#7f0055;font-weight:bold}

#code .placeholder{margin-left:15px}#code .space{margin-left:7px}

#code .comments{color:#3f7f5f}

#copyright{margin-top:10px;text-align:center;width:100%;color:#666}

#errorMsg{width:100%;text-align:center;font-size:24px;position:absolute;top:100px;left:}

#copyright a{color:#666}
var $window = $(window), gardenCtx, gardenCanvas, $garden, garden;

var clientWidth = $(window).width();

var clientHeight = $(window).height();

$(function () {

    // setup garden

    $loveHeart = $("#loveHeart");

    var offsetX = $loveHeart.width() / 2;

    var offsetY = $loveHeart.height() / 2 - 55;

    $garden = $("#garden");

    gardenCanvas = $garden[0];

    gardenCanvas.width = $("#loveHeart").width();

    gardenCanvas.height = $("#loveHeart").height()

    gardenCtx = gardenCanvas.getContext("2d");

    gardenCtx.globalCompositeOperation = "lighter";

    garden = new Garden(gardenCtx, gardenCanvas);

    $("#content").css("width", $loveHeart.width() + $("#code").width());

    $("#content").css("height", Math.max($loveHeart.height(), $("#code").height()));

    $("#content").css("margin-top", Math.max(($window.height() - $("#content").height()) / 2, 10));

    $("#content").css("margin-left", Math.max(($window.width() - $("#content").width()) / 2, 10));

    // renderLoop

    setInterval(function () {

        garden.render();

    }, Garden.options.growSpeed);

});

$(window).resize(function() {

    var newWidth = $(window).width();

    var newHeight = $(window).height();

    if (newWidth != clientWidth && newHeight != clientHeight) {

        location.replace(location);

    }

});

function getHeartPoint(angle) {

    var t = angle / Math.PI;

    var x = 19.5 * (16 * Math.pow(Math.sin(t), 3));

    var y = - 20 * (13 * Math.cos(t) - 5 * Math.cos(2 * t) - 2 * Math.cos(3 * t) - Math.cos(4 * t));

    return new Array(offsetX + x, offsetY + y);

}

function startHeartAnimation() {

    var interval = 50;

    var angle = 10;

    var heart = new Array();

    var animationTimer = setInterval(function () {

        var bloom = getHeartPoint(angle);

        var draw = true;

        for (var i = 0; i < heart.length; i++) {

            var p = heart[i];

            var distance = Math.sqrt(Math.pow(p[0] - bloom[0], 2) + Math.pow(p[1] - bloom[1], 2));

            if (distance < Garden.options.bloomRadius.max * 1.3) {

                draw = false;

                break;

            }

        }

        if (draw) {

            heart.push(bloom);

            garden.createRandomBloom(bloom[0], bloom[1]);

        }

        if (angle >= 30) {

            clearInterval(animationTimer);

            showMessages();

        } else {

            angle += 0.2;

        }

    }, interval);

}

(function($) {

    $.fn.typewriter = function() {

        this.each(function() {

            var $ele = $(this), str = $ele.html(), progress = 0;

            $ele.html('');

            var timer = setInterval(function() {

                var current = str.substr(progress, 1);

                if (current == '<') {

                    progress = str.indexOf('>', progress) + 1;

                } else {

                    progress++;

                }

                $ele.html(str.substring(0, progress) + (progress & 1 ? '_' : ''));

                if (progress >= str.length) {

                    clearInterval(timer);

                }

            }, 75);

        });

        return this;

    };

})(jQuery);

function timeElapse(date){

    var current = Date();//现在时间

    var seconds = (Date.parse(current) - Date.parse(date)) / 1000;//毫秒数

    var days = Math.floor(seconds / (3600 * 24));//天数

    seconds = seconds % (3600 * 24);

    var hours = Math.floor(seconds / 3600);

    if (hours < 10) {

        hours = "0" + hours;

    }

    seconds = seconds % 3600;

    var minutes = Math.floor(seconds / 60);

    if (minutes < 10) {

        minutes = "0" + minutes;

    }

    seconds = seconds % 60;

    if (seconds < 10) {

        seconds = "0" + seconds;

    }

    var result = "<span class=\"digit\">" + days + "</span> days <span class=\"digit\">" + hours + "</span> hours <span class=\"digit\">" + minutes + "</span> minutes <span class=\"digit\">" + seconds + "</span> seconds";

    $("#elapseClock").html(result);

}

function showMessages() {

    adjustWordsPosition();

    $('#messages').fadeIn(5000, function() {

        showLoveU();

    });

}

function adjustWordsPosition() {

    $('#words').css("position", "absolute");

    $('#words').css("top", $("#garden").position().top + 195);

    $('#words').css("left", $("#garden").position().left + 70);

}

function adjustCodePosition() {

    $('#code').css("margin-top", ($("#garden").height() - $("#code").height()) / 2);

}

function showLoveU() {

    $('#loveu').fadeIn(3000);

}

        function Vector(x, y) {

            this.x = x;

            this.y = y;

        };

        Vector.prototype = {

            rotate: function (theta) {

                var x = this.x;

                var y = this.y;

                this.x = Math.cos(theta) * x - Math.sin(theta) * y;

                this.y = Math.sin(theta) * x + Math.cos(theta) * y;

                return this;

            },

            mult: function (f) {

                this.x *= f;

                this.y *= f;

                return this;

            },

            clone: function () {

                return new Vector(this.x, this.y);

            },

            length: function () {

                return Math.sqrt(this.x * this.x + this.y * this.y);

            },

            subtract: function (v) {

                this.x -= v.x;

                this.y -= v.y;

                return this;

            },

            set: function (x, y) {

                this.x = x;

                this.y = y;

                return this;

            }

        };

        function Petal(stretchA, stretchB, startAngle, angle, growFactor, bloom) {

            this.stretchA = stretchA;

            this.stretchB = stretchB;

            this.startAngle = startAngle;

            this.angle = angle;

            this.bloom = bloom;

            this.growFactor = growFactor;

            this.r = 1;

            this.isfinished = false;

            //this.tanAngleA = Garden.random(-Garden.degrad(Garden.options.tanAngle), Garden.degrad(Garden.options.tanAngle));

            //this.tanAngleB = Garden.random(-Garden.degrad(Garden.options.tanAngle), Garden.degrad(Garden.options.tanAngle));

        }

        Petal.prototype = {

            draw: function () {

                var ctx = this.bloom.garden.ctx;

                var v1, v2, v3, v4;

                v1 = new Vector(0, this.r).rotate(Garden.degrad(this.startAngle));

                v2 = v1.clone().rotate(Garden.degrad(this.angle));

                v3 = v1.clone().mult(this.stretchA); //.rotate(this.tanAngleA);

                v4 = v2.clone().mult(this.stretchB); //.rotate(this.tanAngleB);

                ctx.strokeStyle = this.bloom.c;

                ctx.beginPath();

                ctx.moveTo(v1.x, v1.y);

                ctx.bezierCurveTo(v3.x, v3.y, v4.x, v4.y, v2.x, v2.y);

                ctx.stroke();

            },

            render: function () {

                if (this.r <= this.bloom.r) {

                    this.r += this.growFactor; // / 10;

                    this.draw();

                } else {

                    this.isfinished = true;

                }

            }

        }

        function Bloom(p, r, c, pc, garden) {

            this.p = p;

            this.r = r;

            this.c = c;

            this.pc = pc;

            this.petals = [];

            this.garden = garden;

            this.init();

            this.garden.addBloom(this);

        }

        Bloom.prototype = {

            draw: function () {

                var p, isfinished = true;

                this.garden.ctx.save();

                this.garden.ctx.translate(this.p.x, this.p.y);

                for (var i = 0; i < this.petals.length; i++) {

                    p = this.petals[i];

                    p.render();

                    isfinished *= p.isfinished;

                }

                this.garden.ctx.restore();

                if (isfinished == true) {

                    this.garden.removeBloom(this);

                }

            },

            init: function () {

                var angle = 360 / this.pc;

                var startAngle = Garden.randomInt(0, 90);

                for (var i = 0; i < this.pc; i++) {

                    this.petals.push(new Petal(Garden.random(Garden.options.petalStretch.min, Garden.options.petalStretch.max), Garden.random(Garden.options.petalStretch.min, Garden.options.petalStretch.max), startAngle + i * angle, angle, Garden.random(Garden.options.growFactor.min, Garden.options.growFactor.max), this));

                }

            }

        }

        function Garden(ctx, element) {

            this.blooms = [];

            this.element = element;

            this.ctx = ctx;

        }

        Garden.prototype = {

            render: function () {

                for (var i = 0; i < this.blooms.length; i++) {

                    this.blooms[i].draw();

                }

            },

            addBloom: function (b) {

                this.blooms.push(b);

            },

            removeBloom: function (b) {

                var bloom;

                for (var i = 0; i < this.blooms.length; i++) {

                    bloom = this.blooms[i];

                    if (bloom === b) {

                        this.blooms.splice(i, 1);

                        return this;

                    }

                }

            },

            createRandomBloom: function (x, y) {

                this.createBloom(x, y, Garden.randomInt(Garden.options.bloomRadius.min, Garden.options.bloomRadius.max), Garden.randomrgba(Garden.options.color.rmin, Garden.options.color.rmax, Garden.options.color.gmin, Garden.options.color.gmax, Garden.options.color.bmin, Garden.options.color.bmax, Garden.options.color.opacity), Garden.randomInt(Garden.options.petalCount.min, Garden.options.petalCount.max));

            },

            createBloom: function (x, y, r, c, pc) {

                new Bloom(new Vector(x, y), r, c, pc, this);

            },

            clear: function () {

                this.blooms = [];

                this.ctx.clearRect(0, 0, this.element.width, this.element.height);

            }

        }

        Garden.options = {

            petalCount: {

                min: 8,

                max: 15

            },

            petalStretch: {

                min: 0.1,

                max: 3

            },

            growFactor: {

                min: 0.1,

                max: 1

            },

            bloomRadius: {

                min: 8,

                max: 10

            },

            density: 10,

            growSpeed: 1000 / 60,

            color: {

                rmin: 128,

                rmax: 255,

                gmin: 0,

                gmax: 128,

                bmin: 0,

                bmax: 128,

                opacity: 0.1

            },

            tanAngle: 60

        };

        Garden.random = function (min, max) {

            return Math.random() * (max - min) + min;

        };

        Garden.randomInt = function (min, max) {

            return Math.floor(Math.random() * (max - min + 1)) + min;

        };

        Garden.circle = 2 * Math.PI;

        Garden.degrad = function (angle) {

            return Garden.circle / 360 * angle;

        };

        Garden.raddeg = function (angle) {

            return angle / Garden.circle * 360;

        };

        Garden.rgba = function (r, g, b, a) {

            return 'rgba(' + r + ',' + g + ',' + b + ',' + a + ')';

        };

        Garden.randomrgba = function (rmin, rmax, gmin, gmax, bmin, bmax, a) {

            var r = Math.round(Garden.random(rmin, rmax));

            var g = Math.round(Garden.random(gmin, gmax));

            var b = Math.round(Garden.random(bmin, bmax));

            var limit = 5;

            if (Math.abs(r - g) <= limit && Math.abs(g - b) <= limit && Math.abs(b - r) <= limit) {

                return Garden.rgba(rmin, rmax, gmin, gmax, bmin, bmax, a);

            } else {

                return Garden.rgba(r, g, b, a);

            }

        };

<div id="mainDiv">
 <div id="content">
  <div id="code">
   <span class="comments">/**</span><br />
   <span class="space"/><span class="comments">*2016—12-09,</span><br />
   <span class="space"/><span class="comments">*2017-04-26.</span><br />
   <span class="space"/><span class="comments">*/</span><br />
   Boy name = <span class="keyword">Mr</span> SHang<br />
   Girl name = <span class="keyword">Mrs</span> YOU<br />
   <span class="comments">// Fall in love river. </span><br />
   The boy love the girl;<br />
   <span class="comments">// They love each other.</span><br />
   The girl loved the boy;<br />
   <span class="comments">// AS time goes on.</span><br />
   The boy can not be separated the girl;<br />
   <span class="comments">// At the same time.</span><br />
   The girl can not be separated the boy;<br />
   <span class="comments">// Both wind and snow all over the sky.</span><br />
   <span class="comments">// Whether on foot or 5 kilometers.</span><br />
   <span class="keyword">The boy</span> very <span class="keyword">happy</span>;<br />
   <span class="keyword">The girl</span> is also very <span class="keyword">happy</span>;<br />
   <span class="placeholder"/><span class="comments">// Whether it is right now</span><br />
   <span class="placeholder"/><span class="comments">// Still in the distant future.</span><br />
   <span class="placeholder"/>The boy has but one dream;<br />
   <span class="comments">// The boy wants the girl could well have been happy.</span><br />
   <br>
   <br>
   I want to say:<br />
   Baby, I love you forever;<br />
  </div>
  <div id="loveHeart">
   <canvas id="garden"></canvas>
   <div id="words">
    <div id="messages">
     遇见你，是最美丽的意外。
     <div id="elapseClock"></div>
    </div>
    <div id="loveu">
     很高兴遇见你。<br/>
     <div class="signature">- 商先生</div>
    </div>
   </div>
  </div>
 </div>
</div>

var offsetX = $("#loveHeart").width() / 2;
var offsetY = $("#loveHeart").height() / 2 - 55;
//var together = new Date(Date.parse("5/28/2015"));
var together = new Date();
together.setFullYear(2016,12,09);
together.setHours(20);
together.setMinutes(0);
together.setSeconds(0);
together.setMilliseconds(0);

if (!document.createElement('canvas').getContext) {
 var msg = document.createElement("div");
 msg.id = "errorMsg";
 msg.innerHTML = "Your browser doesn't support HTML5!<br/>Recommend use Chrome 14+/IE 9+/Firefox 7+/Safari 4+";
 document.body.appendChild(msg);
 $("#code").css("display", "none")
 $("#copyright").css("position", "absolute");
 $("#copyright").css("bottom", "10px");
 document.execCommand("stop");
} else {
 setTimeout(function () {
  startHeartAnimation();
 }, 5000);

timeElapse(together);
 setInterval(function () {
  timeElapse(together);
 }, 500);

adjustCodePosition();
 $("#code").typewriter();
}
</script>

js表白心形特效的更多相关文章

  1. Python和Js打印心形

    看到一行Python写的代码,会用LovePython输出心形: print('\n'.join([''.join([('LovePython'[(x-y)%10]if((x*0.05)**2+(y* ...

  2. 七夕情人节表白-纯JS实现3D心形&plus;图片旋转

    七夕情人节就快到了,这里献上纯js表白神器-心里都是你,预览: 技术点:css-3d.js-随机色.js-transform 1.html: <div class="heart&quo ...

  3. js 点击页面出现烟花 心形

    css :1 body{width:1000px; height:500px;} input{ margin:100px; width:250px; height: 50px } 3 .Firewor ...

  4. 超多经典 canvas 实例，动态离子背景、移动炫彩小球、贪吃蛇、坦克大战、是男人就下100层、心形文字等等等

    超多经典 canvas 实例 普及:<canvas> 元素用于在网页上绘制图形.这是一个图形容器,您可以控制其每一像素,必须使用脚本来绘制图形. 注意:IE 8 以及更早的版本不支持 &l ...

  5. matlab绘制心形函数

    matlab 7.0 绘制二维.三维心形函数       又到周六,下周就要迎来春节小长假了,想想都有些激动.在外漂了一整年,总于可以回家和父母团聚了,还有吃好吃的...,哎呀~想想都流口水呢.不过先 ...

  6. js&comma;jquery&comma;css&comma;html5特效

    包含js,jquery,css,html5特效,源代码 本文地址:http://www.cnblogs.com/roucheng/p/texiao.html 2017新年快乐特效 jQuery最新最全 ...

  7. &lbrack;deviceone开发&rsqb;-心形点赞动画示例

    一.简介 这个示例展示do_Animator组件的简单使用,通过点击"点赞"按钮,不断弹出心形图片,向上动画漂移到顶部消失.间隔时间和上下左右移动的步长都是一定范围的随机值.二.效 ...

  8. CSS3制作心形头像

    1.功能需求: 最近有一个基于微信开发的Mobile Web项目,是一个活动页面.功能需求:用户使用微信扫描二维码,然后授权使用微信登录,然后读取用户的昵称和头像,然后显示在一个饼图上面.头像需要有一 ...

  9. CSS 魔法系列：纯 CSS 绘制图形（心形、六边形等）

    <CSS 魔法系列>继续给大家带来 CSS 在网页中以及图形绘制中的使用.这篇文章给大家带来的是纯 CSS 绘制五角星.六角形.五边形.六边形.心形等等. 我们的网页因为 CSS 而呈现千 ...

随机推荐

  1. IRequiresSessionState接口控制

    刚刚接触.net web端的朋友都会被Session坑过,莫名其妙的不能读取Session数据,后来知道原来有IRequiresSessionState这个接口,不继承的就不能读取Session里面的 ...

  2. Rust初步（五）：Rust与C&num;性能比较

    我学习Rust的目的并不是说期望用它来取代掉现有的开发平台或语言.相反,我认为当前绝大部分研发团队,都不可能只用一个平台或者一个语言. 当组织增长,他们越来越依赖大量的编程语言.不同的编程语言有不同的 ...

  3. &lbrack;机器学习&rsqb; 在茫茫人海中发现相似的你：实现局部敏感哈希&lpar;LSH&rpar;并应用于文档检索

    简介 局部敏感哈希(Locality Sensitive Hasing)是一种近邻搜索模型,由斯坦福大学的Mose Charikar提出.我们用一种随机投影(Random Projection)的方式 ...

  4. Java对象访问 类的静态变量

    Java类的静态变量用对象和类名都能访问,一般用类名,但如果用对象来访问静态变量呢,有何种效果? 测试一下: package JavaTest; public class test{ public s ...

  5. Ffmpeg

    Ffmpeg <?php $movefile = "./4.mp4"; $mov = new ffmpeg_movie($movefile); printf("fi ...

  6. Java中注解Annotation的定义、使用、解析

    此例子,用于说明如何在Java中对“注解 Annotation”的定义.使用和解析的操作.注解一般用于自定义开发框架中,至于为什么使用,此处不作过多说明,这里只说明如何使用,以作备记.下面例子已测试, ...

  7. JAVA中正則表達式总结

    昨天,我的朋友请教我正則表達式.我也好久没有写过正則表達式了,昨天刚好看了下如鹏网创始人杨中科老师关于正則表達式的解说.使我加深了正則表達式的印像.现我把他总结下: 很多语言,包含Perl.PHP.P ...

  8. Pycharm里面使用PIL库之后，为什么调用Image的方法不能弹出代码提示，怎样能让代码提示弹出？

    之前也碰到了这个问题,安装了pillow后没有代码提示,最后查了半天,发现问题原来非常简单,解决方法也很无厘头. 之所以没有代码提示,仅仅是因为Pycharm没法判断Image.open()返回的对象 ...

  9. android studio &colon; clang&plus;&plus;&period;exe&colon; error&colon; invalid linker name in argument &&num;39&semi;-fuse-ld&equals;bfd

    公司jenkins上的C++编译器最近换成了clang,今天更新了代码发现本地的C/C++代码用NDK编译不过了,提示: “clang++.exe: error: invalid linker nam ...

  10. 【微信小程序】---授权登陆---【巷子】

    Page({ onLoad: function() { var that = this; // 查看是否授权 wx.getSetting({ success: function(res) { if ( ...

相关文章