效果如图以下是代码

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

用js实现鼠标点击爱心特效的更多相关文章

  1. JS实现鼠标点击爱心&绘制多边形&每日一言功能

    本篇文章主要介绍我的个人博客 程序猿刘川枫 中页面使用的美化功能(基于JS实现): 1.鼠标点击出现不同颜色爱心特效 2.页面浮动多边形跟随鼠标移动 3.每日一言功能 1.鼠标点击出现爱心特效 经常在 ...

  2. 使用原生JS,实现鼠标点击爱心效果 !!!

    使用原生JS,实现鼠标点击爱心效果 !!! 引言: 在很多时候我们都需要实现鼠标点击出现图案或者文字这样的效果,对于用户而言,这样的体验是很极致的.其实实现起来也很简单,下面一起来学习一下吧.文末附上 ...

  3. js之好看的鼠标点击-光标特效

    1.光标特效 <script src="https://blog-static.cnblogs.com/files/axqa/bubbleCursor.js">< ...

  4. JS控制鼠标点击事件

    鼠标点击事件就是当鼠标点击元素时,就会出现另一个窗口,类似于百度首页中右上角的“登录”这个按钮,当鼠标点击 登录时,就会出现登录窗口.大体的意思就是这样,直接上代码了,简单易懂. <!DOCTY ...

  5. jquery.imagezoom.js制作鼠标悬停图片放大镜特效、参数和最简教程

    一.插件介绍 今天在用到放大镜效果的时候,突然发现网站里没有放大镜的插件.于是总结了一下,放到这里.为自己,也为他人提供方便.jquery.imagezoom.js这款插件用途很简单,就是鼠标移过去, ...

  6. js获取鼠标点击的对象,点击另一个按钮删除该对象

    作为js的一名新手,对于所谓的event的了解并不是太多,仅仅根据视频教学中的例子模仿着,写了诸如: function funcname(e) { e=window.event||event };的函 ...

  7. js获取鼠标点击事件的相对位置

    <html><head><title>位置</title><script language="javascript" type ...

  8. js table鼠标点击时变色

    <head>    <title></title>    <script type="text/javascript">      ...

  9. js中鼠标点击、移动和光标移动的事件触发

    事件有三要素:事件源.事件数据.事件处理程序 事件冒泡:当元素嵌套的时候,内部元素激发某个事件后,默认情况下外部元素相应的事件也会跟着依次触发 可以加return false;是阻止默认操作 oncl ...

随机推荐

  1. Linux内核提权漏洞(CVE-2019-13272)

    漏洞描述 kernel / ptrace.c中的ptrace_link错误地处理了想要创建ptrace关系的进程的凭据记录,这允许本地用户通过利用父子的某些方案来获取root访问权限 进程关系,父进程 ...

  2. python3练习100题——045

    题目:统计 1 到 100 之和. sum(range(1,101)) 题目太容易了,我都不想用迭代浪费时间. 觉得这100道题难度设计越来越不合理.

  3. 51nod(1174 区间中最大的数)(ST表模板题)

    1174 区间中最大的数 1.0 秒 131,072.0 KB 0 分 基础题   给出一个有N个数的序列,编号0 - N - 1.进行Q次查询,查询编号i至j的所有数中,最大的数是多少. 例如: 1 ...

  4. Web Workers - (Worker(专有) and SharedWorker(共享))

    Web Worker为Web内容在后台线程中运行脚本提供了一种简单的方法 线程可以执行任务而不干扰用户界面 可以使用XMLHttpRequest执行 I/O (尽管responseXML和channe ...

  5. nginx proxy_set_header Host $host 和 proxy_set_header Host $http_host 的作用对比

    转载自https://www.jianshu.com/p/7a8a7eb3707a 1.浏览器直接访问服务,获取到的 Host 包含浏览器请求的 IP 和端口 测试服务器,centos 7 sudo ...

  6. 连接数据库报错:ERROR 2002 (HY000): Can't connect to local MySQL server through socket '/var/lib/mysql/mysql.sock' (2)

    报错: ERROR 2002 (HY000): Can't connect to local MySQL server through socket '/var/lib/mysql/mysql.soc ...

  7. 解决jquery click事件执行两次

    js 解决办法 event.preventDefault() :阻止默认行为,可以用 event.isDefaultPrevented() 来确定preventDefault是否被调用过了 event ...

  8. vm virtualbox 里的ubuntu挂载windows的文件夹

    1.先在virtualbox里设置好共享文件夹 如右图所示: 共享文件夹-添加共享文件夹 里面: 选择好 共享文件夹路径,起好 共享文件夹名称,下面都不用选. 假设共享文件名是ShareD, 2. 然 ...

  9. spring中实现基于注解实现动态的接口限流防刷

    本文将介绍在spring项目中自定义注解,借助redis实现接口的限流 自定义注解类 import java.lang.annotation.ElementType; import java.lang ...

  10. Tomcat的使⽤

    准备 1.官⽹地址:http://tomcat.apache.org下载. 2.解压文件,并放到指定路径,给该文件授权. chmod -R 755 3.启动和停止 进入到/Users/lucas/Do ...