页面点击小红心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>

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

赞 (0)

相关推荐

  • 页面点击小红心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:

  • 页面实时更新时间的JS实例代码

    复制代码 代码如下: function startTime() {                     var today = new Date(); //定义日期对象                        var yyyy = today.getFullYear(); //通过日期对象的getFullYear()方法返回年                         var MM = today.getMonth() + 1; //通过日期对象的getMonth()方法返回年 

  • 微信小程序页面缩放式侧滑效果的实现代码

    先给大家展示下效果图,大家感觉不错,请参考实现代码: 实现原理:点击按钮,往需要动画的div中添加或移除拥有动画效果的class. 由于微信小程序中不能操作page这个根节点,所以,只有用一个div(view)来模仿page根节点. 1.结构 <view class='page {{isFix?"pageShow":"pageHide"}}' > <view class='header'> <view class='h-toggle i

  • 刷新页面后让控制台的js代码继续执行

    在各种限时,秒杀活动中,有个自动循环的点击的工具是很重要的. 为了方便起见,我们把Js代码放在浏览器的控制台执行,但是刷新页面后,js代码就清空了,也就无法执行. 可以用js代码实现一个不受页面刷新影响不断执行的代码,如下: 1. 必要的知识 prompt() 弹出对话框,获取用户输入的文本 setTimeout(,) 延迟执行函数 write() 可向指定对象写入html代码或者js代码 with() 设定代码的作用域 2.大致框架 var timeout = prompt("设置刷新时间&q

  • JS+Canvas实现接球小游戏的示例代码

    JS+Canvas实现接球小游戏的示例代码

    目录 写在最前 git地址 成果展示 实现思路 详细说明 写在最后 写在最前 看了canvas的动画系列,已经抑制不住内心的冲动想写个小游戏了,还是那个套路——多写写,你才能了解它.加上这两天下班后我都没有机会去摸摸篮球,所以就写了个接球的小游戏(准确的说不能叫游戏,太简单了,叫动画吧...). 都是一些基础的实现,有时间你也可以试试,废话说到这里,我们开始吧. git地址 https://github.com/ry928330/ballGame.git 成果展示 实现思路 这里我们采用疑问的句

  • JS SetInterval 代码实现页面轮询

    JS SetInterval 代码实现页面轮询

    概念介绍 setInterval 是一个实现定时调用的函数,可按照指定的周期(以毫秒计)来调用函数或计算表达式.setInterval方法会不停地调用函数,直到 clearInterval 被调用或窗口被关闭. 由 setInterval 返回的ID值可用作 clearInterval 方法的参数. 提示: 1000 毫秒= 1 秒. flash用法(来自百度百科) setInterval 动作的作用是在播放动画的时,每隔一定时间就调用函数,方法或对象.可以使用本动作更新来自数据库的变量或更新时

  • 微信小程序 函数防抖 解决重复点击消耗性能问题实现代码

    这篇文章主要介绍了微信小程序使用函数防抖解决重复点击消耗性能问题实现代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 wxml: <view bindtap="doubleTap" bindtouchstart="touchStart" bindtouchend="touchEnd">click me</view> js: // 防止重复点击 touchStart(e)

  • js统计页面上每个标签的数量实例代码

    js统计页面上每个标签的数量实例代码

    具体代码如下所示: function fold(node){ var map = new Map(); map.set(node.tagName,1); [].reduce.call(node.children,(acc,child)=>{ deal(acc,fold(child)); return acc },map) return map } function deal(srcMap,tarMap){ tarMap.forEach((value,tagName)=>{ var newV =

  • 微信小程序 点击切换样式scroll-view实现代码实例

    微信小程序 点击切换样式scroll-view实现代码实例

    这篇文章主要介绍了微信小程序 点击切换样式scroll-view实现代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 scroll-view滚动视图点击切换样式 *.wxml <view class="content"> <view class="navbg"> <view class="nav"> <scroll-view class="

  • p5.js码绘“跳动的小正方形”的实现代码

    p5.js码绘“跳动的小正方形”的实现代码

    作业成果展示 实验原理 主要是要实现小正方形的上下来回运动,并且每个小正方形的跳动有一定的时间差视觉上要呈现依次跳动的感觉. 本来我想用一个if语句来实现这个功能!但是想了很久没想到正确的代码--后来经同学提醒用了sin函数!真的很好用! var y1=posY+30sin(t); var y2=posY+28sin(t-1); var y3=posY+26sin(t-2); var y4=posY+24sin(t-3); var y5=posY+22sin(t-4); var y6=posY+

随机推荐