实现点击产生爱心的特效

主要思路：

通过var 数组定义若干个小心心的坐标，然后利用setTimeout函数控制小心心上升速度

判定鼠标点击时的坐标，在数组中加入小心心并生成，然后每次循环修改坐标，实现心心的出现与飞出

但心心如果只有一个颜色会较为单一，所以可以使用随机数为心心随机生成颜色。

代码如下

<script>
(function(window,document,undefined){var hearts = [];window.requestAnimationFrame = (function(){return window.requestAnimationFrame ||window.webkitRequestAnimationFrame ||window.mozRequestAnimationFrame ||window.oRequestAnimationFrame ||window.msRequestAnimationFrame ||function (callback){setTimeout(callback,1000/60);}})();init();function init(){css(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: absolute;}.heart:after{top: -5px;}.heart:before{left: -5px;}");attachEvent();gameloop();}function gameloop(){for(var i=0;i<hearts.length;i++){if(hearts[i].alpha <=0){document.body.removeChild(hearts[i].el);hearts.splice(i,1);continue;}hearts[i].y--;hearts[i].scale += 0.004;hearts[i].alpha -= 0.013;hearts[i].el.style.cssText = "left:"+hearts[i].x+"px;top:"+hearts[i].y+"px;opacity:"+hearts[i].alpha+";transform:scale("+hearts[i].scale+","+hearts[i].scale+") rotate(45deg);background:"+hearts[i].color;}requestAnimationFrame(gameloop);}function attachEvent(){var old = typeof window.onclick==="function" && window.onclick;window.onclick = function(event){old && old();createHeart(event);}}function createHeart(event){var d = document.createElement("div");d.className = "heart";hearts.push({el : d,x : event.clientX - 5,y : event.clientY - 5,scale : 1,alpha : 1,color : randomColor()});document.body.appendChild(d);}function css(css){var style = document.createElement("style");style.type="text/css";try{style.appendChild(document.createTextNode(css));}catch(ex){style.styleSheet.cssText = css;}document.getElementsByTagName('head')[0].appendChild(style);}function randomColor(){return "rgb("+(~~(Math.random()*255))+","+(~~(Math.random()*255))+","+(~~(Math.random()*255))+")";}
})(window,document);
</script>

实现点击产生爱心的特效相关推荐

html点击鼠标页面出现爱心,js实现鼠标点击飘爱心效果
本文实例为大家分享了js实现鼠标点击飘爱心的具体代码,供大家参考,具体内容如下鼠标点击特效 html { cursor: pointer; } h3 { text-align: center; us ...
html5制作一款超好看的点赞爱心气泡特效
基于canvas点击圆形爱心按钮,喷出爱心气泡动画特效.这是一款点赞喜欢爱心特效. css代码 <style>body {background-color: rgba(255, 137, ...
需要按次序点击链接的网页特效
需要按一次次序来点击链接的网页特效,有些前端开发者将其命名为"先点击后链接",需要按要求一个一个点击链接后才能让指定的链接生效,记得以前这种功能常被用于广告上面,用户不点击广告,就 ...
2022跨年烟花代码（三）HTML5点击页面烟花绽放特效
HTML5点击页面烟花绽放特效 <!doctype html> <html> <head> <meta charset="utf-8"&g ...
2022跨年烟花代码（六）HTML5鼠标点击页面放烟花特效
HTML5鼠标点击页面放烟花特效 html代码 <!DOCTYPE html> <html> <head><meta http-equiv="Con ...
HTML5七夕情人节表白网页(情人节满屏爱心HTML5特效) HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码程序员表白源码抖音3D旋转相册 js烟花代码
HTML5七夕情人节表白网页❤情人节满屏爱心HTML5特效❤ HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码程序员表白源码抖音3D旋转相册 js烟花代码 css爱 ...
HTML5七夕情人节表白网页制作【情人节满屏爱心HTML5特效】HTML+CSS+JavaScript html生日快乐祝福网页制作
这是程序员表白系列中的100款网站表白之一,旨在让任何人都能使用并创建自己的表白网站给心爱的人看. 此波共有100个表白网站,可以任意修改和使用,很多人会希望向心爱的男孩女孩告白,生性腼腆的人即使那个 ...
html中点击导航栏变色,JavaScript实现鼠标点击导航栏变色特效
废话不多说了,直接给大家贴js实现鼠标点击导航栏变色代码,具体代码如下所示: JAVASCRIPT之导航栏鼠标点击变色特效 body { font-size:12px; font-family: Ar ...
仿抖音上下滑动播放视频 demo+爱心点赞特效
DouyinDemo 项目地址:PangHaHa12138/DouyinDemo 简介:仿抖音上下滑动播放视频 demo+爱心点赞特效更多:作者提 Bug 标签: 仿抖音上下滑动播放视频 d ...

实现点击产生爱心的特效

实现点击产生爱心的特效相关推荐

最新文章

热门文章