页面点击小红心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 相关文章推荐
又一个图片自动缩小的JS代码
Mar 10 Javascript
js利用Array.splice实现Array的insert/remove
Jan 13 Javascript
多个datatable共存造成多个表格的checkbox都被选中
Jul 11 Javascript
js call方法详细介绍(js 的继承)
Nov 18 Javascript
JS字符串截取函数实例
Dec 27 Javascript
自己使用jquery写的一个无缝滚动的插件
Apr 30 Javascript
js中 计算两个日期间的工作日的简单实例
Aug 08 Javascript
JS判断form内所有表单是否为空的简单实例
Sep 09 Javascript
smartupload实现文件上传时获取表单数据(推荐)
Dec 12 Javascript
利用Jquery实现几款漂亮实用的时间轴(附示例代码)
Feb 15 Javascript
[js高手之路]原型式继承与寄生式继承详解
Aug 28 Javascript
vuecli3.x中轻松4步带你使用tinymce的步骤
Jun 25 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
PHP函数preg_match_all正则表达式的基本使用详细解析
2013/08/31 PHP
php线性表的入栈与出栈实例分析
2015/06/12 PHP
PHP基于phpqrcode生成带LOGO图像的二维码实例
2015/07/10 PHP
thinkphp实现图片上传功能
2016/01/13 PHP
LaravelS通过Swoole加速Laravel/Lumen详解
2018/03/02 PHP
prototype Element学习笔记(Element篇三)
2008/10/26 Javascript
jQuery EasyUI API 中文文档 - Dialog对话框
2011/11/15 Javascript
JS中的form.submit()不能提交表单的错误原因
2014/10/08 Javascript
Js与Jq 获取页面元素值的方法和差异对比
2015/04/30 Javascript
jquery实现图片水平滚动效果代码分享
2015/08/26 Javascript
JS+CSS实现电子商务网站导航模板效果代码
2015/09/10 Javascript
浅析JavaScript访问对象属性和方法及区别
2015/11/16 Javascript
原生JS实现N级菜单的代码
2017/05/21 Javascript
ionic使用angularjs表单验证(模板验证)
2018/12/12 Javascript
vue实现节点增删改功能
2019/09/26 Javascript
Nodejs实现图片上传、压缩预览、定时删除功能
2019/10/25 NodeJs
js利用拖放实现添加删除
2020/08/27 Javascript
[47:52]完美世界DOTA2联赛PWL S2 PXG vs InkIce 第二场 11.26
2020/11/30 DOTA
Python中设置变量作为默认值时容易遇到的错误
2015/04/03 Python
Python标准库sched模块使用指南
2017/07/06 Python
Python机器学习之SVM支持向量机
2017/12/27 Python
学习Python需要哪些工具
2020/09/04 Python
记一次Django响应超慢的解决过程
2020/09/17 Python
python实现人工蜂群算法
2020/09/18 Python
Pytorch模型迁移和迁移学习,导入部分模型参数的操作
2021/03/03 Python
模具设计与制造专业推荐信
2014/02/16 职场文书
银行竞聘演讲稿范文
2014/04/23 职场文书
单位委托函范文
2015/01/29 职场文书
市场部岗位职责范本
2015/04/15 职场文书
暑假开始了,你的暑假学习计划写好了吗?
2019/07/04 职场文书
本地通过nginx配置反向代理的全过程记录
2021/03/31 Servers
吃通javascript正则表达式
2021/04/21 Javascript
LayUI+Shiro实现动态菜单并记住菜单收展的示例
2021/05/06 Javascript
如何用vue实现网页截图你知道吗
2021/11/17 Vue.js
SQL Server中常用截取字符串函数介绍
2022/03/16 SQL Server
动漫APP软件排行榜前十名,半次元上榜,第一款由腾讯公司推出
2022/03/18 杂记