点击页面出现爱心源代码
时间:2019-11-27
本文章向大家介绍点击页面出现爱心源代码,主要包括点击页面出现爱心源代码使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
好东西,大家一起分享!
1 (function(window,document,undefined){ 2 var hearts = []; 3 window.requestAnimationFrame = (function(){ 4 return window.requestAnimationFrame || 5 window.webkitRequestAnimationFrame || 6 window.mozRequestAnimationFrame || 7 window.oRequestAnimationFrame || 8 window.msRequestAnimationFrame || 9 function (callback){ 10 setTimeout(callback,1000/60); 11 } 12 })(); 13 init(); 14 function init(){ 15 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;}"); 16 attachEvent(); 17 gameloop(); 18 } 19 function gameloop(){ 20 for(var i=0;i<hearts.length;i++){ 21 if(hearts[i].alpha <=0){ 22 document.body.removeChild(hearts[i].el); 23 hearts.splice(i,1); 24 continue; 25 } 26 hearts[i].y--; 27 hearts[i].scale += 0.004; 28 hearts[i].alpha -= 0.013; 29 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; 30 } 31 requestAnimationFrame(gameloop); 32 } 33 function attachEvent(){ 34 var old = typeof window.onclick==="function" && window.onclick; 35 window.onclick = function(event){ 36 old && old(); 37 createHeart(event); 38 } 39 } 40 function createHeart(event){ 41 var d = document.createElement("div"); 42 d.className = "heart"; 43 hearts.push({ 44 el : d, 45 x : event.clientX - 5, 46 y : event.clientY - 5, 47 scale : 1, 48 alpha : 1, 49 color : randomColor() 50 }); 51 document.body.appendChild(d); 52 } 53 function css(css){ 54 var style = document.createElement("style"); 55 style.type="text/css"; 56 try{ 57 style.appendChild(document.createTextNode(css)); 58 }catch(ex){ 59 style.styleSheet.cssText = css; 60 } 61 document.getElementsByTagName('head')[0].appendChild(style); 62 } 63 function randomColor(){ 64 return "rgb("+(~~(Math.random()*255))+","+(~~(Math.random()*255))+","+(~~(Math.random()*255))+")"; 65 } 66 })(window,document);
原文地址:https://www.cnblogs.com/xf23554/p/11941681.html
- 【Go 语言社区】 HTML5 前端--数据保存实例
- crontab设置导致的服务器进程异常问题 (r10笔记第4天)
- 一条SQL语句的执行计划变化探究(r10笔记第3天)
- tensorflow(一)windows 10 python3.6安装tensorflow1.4与基本概念解读
- 基于AgileEAS.NET SOA 中间件领域模型数据器快速打造自己的代码生成器
- Java基础-day07-代码题-自定义数据类型;ArrayList集合
- 一条报警信息的快速处理和分析(r9笔记第99天)
- 【Go 语言社区】解析Go语言编程中的struct结构
- centos+scala2.11.4+hadoop2.3+spark1.3.1环境搭建
- 【Go 语言社区】Golang 语言获取本机逻辑CPU数量的方法
- Data Guard搭建困境突围(一)(r10笔记第17天)
- Java基础-day07-知识点相关题-自定义数据类型;ArrayList
- windows10 tensorflow(二)原理实战之回归分析,深度学习框架(梯度下降法求解回归参数)
- 本人为巨杉数据库(开源NoSQL)写的C#驱动,支持Linq,全部开源,已提交github
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- PHP基于curl实现模拟微信浏览器打开微信链接的方法示例
- 实例讲解PHP表单验证功能
- python如何从键盘获取输入实例
- 使用Keras实现Tensor的相乘和相加代码
- php无限级分类实现评论及回复功能
- php获取手机端的号码以及ip地址实例代码
- PHP数组遍历的几种常见方式总结
- 详解php协程知识点
- php curl简单采集图片生成base64编码(并附curl函数参数说明)
- PHP通过get方法获得form表单数据方法总结
- PHP filesize函数用法浅析
- PHP中创建和编辑Excel表格的方法
- php二维数组按某个键值排序的实例讲解
- thinkphp5引入公共部分header、footer的方法详解
- php实现文章评论系统