页面点击小红心js实现代码


Posted in Javascript onMay 26, 2018

效果图

页面点击小红心js实现代码

核心代码

love.js

!function(e,t,a){function n(){c(".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: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"),o(),r()}function r(){for(var e=0;e<d.length;e++)d[e].alpha<=0?(t.body.removeChild(d[e].el),d.splice(e,1)):(d[e].y--,d[e].scale+=.004,d[e].alpha-=.013,d[e].el.style.cssText="left:"+d[e].x+"px;top:"+d[e].y+"px;opacity:"+d[e].alpha+";transform:scale("+d[e].scale+","+d[e].scale+") rotate(45deg);background:"+d[e].color+";z-index:99999");requestAnimationFrame(r)}function o(){var t="function"==typeof e.onclick&&e.onclick;e.onclick=function(e){t&&t(),i(e)}}function i(e){var a=t.createElement("div");a.className="heart",d.push({el:a,x:e.clientX-5,y:e.clientY-5,scale:1,alpha:1,color:s()}),t.body.appendChild(a)}function c(e){var a=t.createElement("style");a.type="text/css";try{a.appendChild(t.createTextNode(e))}catch(t){a.styleSheet.cssText=e}t.getElementsByTagName("head")[0].appendChild(a)}function s(){return"rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"}var d=[];e.requestAnimationFrame=function(){return e.requestAnimationFrame||e.webkitRequestAnimationFrame||e.mozRequestAnimationFrame||e.oRequestAnimationFrame||e.msRequestAnimationFrame||function(e){setTimeout(e,1e3/60)}}(),n()}(window,document);

引用方法

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>页面点击小红心</title>
</head>

<body>
测试信息
<script src="love.js"></script>
</body>
</html>

为了方便大家使用,特打包提供 下载地址

Javascript 相关文章推荐
javascript instanceof 与typeof使用说明
Jan 11 Javascript
jquery 注意事项与常用语法小结
Jun 07 Javascript
JS无法捕获滚动条上的mouse up事件的原因猜想
Mar 21 Javascript
Javascript模块化编程(三)require.js的用法及功能介绍
Jan 17 Javascript
深入分析javascript中console命令
Aug 14 Javascript
JS根据生日月份和日期计算星座的简单实现方法
Nov 24 Javascript
10道典型的JavaScript面试题
Mar 22 Javascript
从零开始学习Node.js系列教程四:多页面实现的数学运算示例
Apr 13 Javascript
fullpage.js最后一屏滚动方式
Feb 06 Javascript
解决vue单页使用keep-alive页面返回不刷新的问题
Mar 13 Javascript
微信小程序的注册页面包含倒计时验证码、获取用户信息
May 22 Javascript
vue登录注册实例详解
Sep 14 Javascript
js input输入百分号保存数据库失败的解决方法
May 26 #Javascript
使用javascript函数编写简单银行取钱存钱流程
May 26 #Javascript
jQuery插件jsonview展示json数据
May 26 #jQuery
jQuery插件Validation表单验证详解
May 26 #jQuery
jQuery创建及操作xml格式数据示例
May 26 #jQuery
JavaScript数组,JSON对象实现动态添加、修改、删除功能示例
May 26 #Javascript
angularJS开发注意事项
May 26 #Javascript
You might like
复杂检索数据并分页显示的处理方法
2006/10/09 PHP
PHP中Session的概念
2006/10/09 PHP
如何使用“PHP” 彩蛋进行敏感信息获取
2013/08/07 PHP
php读取图片内容并输出到浏览器的实现代码
2013/08/08 PHP
隐性调用php程序的方法
2015/06/13 PHP
HTML中Select不用Disabled实现ReadOnly的效果
2008/04/07 Javascript
ASP中进行HTML数据及JS数据编码函数
2009/11/11 Javascript
jQuery 动画弹出窗体支持多种展现方式
2010/04/29 Javascript
JQuery扩展插件Validate 3通过参数设置错误信息
2011/09/05 Javascript
JS控件的生命周期介绍
2012/10/22 Javascript
js 浏览本地文件夹系统示例代码
2013/10/24 Javascript
如何将php数组或者对象传递给javascript
2014/03/20 Javascript
jquery重复提交请求的原因浅析
2014/05/23 Javascript
浅谈 jQuery 事件源码定位问题
2014/06/18 Javascript
JS获取月份最后天数、最大天数与某日周数的方法
2015/12/08 Javascript
一篇看懂vuejs的状态管理神器 vuex状态管理模式
2017/04/20 Javascript
JavaScript 用fetch 实现异步下载文件功能
2017/07/21 Javascript
JS实现匀加速与匀减速运动的方法示例
2017/09/04 Javascript
解决在vue项目中webpack打包后字体不生效的问题
2018/09/01 Javascript
node实现mock-plugin中间件的方法
2019/12/25 Javascript
从表单校验看JavaScript策略模式的使用详解
2020/10/17 Javascript
Python字符串中查找子串小技巧
2015/04/10 Python
Python基于回溯法子集树模板解决旅行商问题(TSP)实例
2017/09/05 Python
使用python实现语音文件的特征提取方法
2019/01/09 Python
python爬虫爬取微博评论案例详解
2019/03/27 Python
python内存管理机制原理详解
2019/08/12 Python
python实现超市管理系统(后台管理)
2019/10/25 Python
python中spy++的使用超详细教程
2021/01/29 Python
python 对xml解析的示例
2021/02/27 Python
澳大利亚墨水站Ink Station:墨水和碳粉打印机墨盒
2019/03/24 全球购物
国培教师自我鉴定
2014/02/12 职场文书
环保口号大全
2014/06/12 职场文书
市场部岗位职责
2015/02/12 职场文书
党风廉政教育心得体会2016
2016/01/22 职场文书
java Nio使用NioSocket客户端与服务端交互实现方式
2021/06/15 Java/Android
一篇文章弄懂Python中的内建函数
2021/08/07 Python