用js实现鼠标点击爱心特效
效果如图以下是代码
<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实现鼠标点击爱心特效的更多相关文章
- JS实现鼠标点击爱心&绘制多边形&每日一言功能
本篇文章主要介绍我的个人博客 程序猿刘川枫 中页面使用的美化功能(基于JS实现): 1.鼠标点击出现不同颜色爱心特效 2.页面浮动多边形跟随鼠标移动 3.每日一言功能 1.鼠标点击出现爱心特效 经常在 ...
- 使用原生JS,实现鼠标点击爱心效果 !!!
使用原生JS,实现鼠标点击爱心效果 !!! 引言: 在很多时候我们都需要实现鼠标点击出现图案或者文字这样的效果,对于用户而言,这样的体验是很极致的.其实实现起来也很简单,下面一起来学习一下吧.文末附上 ...
- js之好看的鼠标点击-光标特效
1.光标特效 <script src="https://blog-static.cnblogs.com/files/axqa/bubbleCursor.js">< ...
- JS控制鼠标点击事件
鼠标点击事件就是当鼠标点击元素时,就会出现另一个窗口,类似于百度首页中右上角的“登录”这个按钮,当鼠标点击 登录时,就会出现登录窗口.大体的意思就是这样,直接上代码了,简单易懂. <!DOCTY ...
- jquery.imagezoom.js制作鼠标悬停图片放大镜特效、参数和最简教程
一.插件介绍 今天在用到放大镜效果的时候,突然发现网站里没有放大镜的插件.于是总结了一下,放到这里.为自己,也为他人提供方便.jquery.imagezoom.js这款插件用途很简单,就是鼠标移过去, ...
- js获取鼠标点击的对象,点击另一个按钮删除该对象
作为js的一名新手,对于所谓的event的了解并不是太多,仅仅根据视频教学中的例子模仿着,写了诸如: function funcname(e) { e=window.event||event };的函 ...
- js获取鼠标点击事件的相对位置
<html><head><title>位置</title><script language="javascript" type ...
- js table鼠标点击时变色
<head> <title></title> <script type="text/javascript"> ...
- js中鼠标点击、移动和光标移动的事件触发
事件有三要素:事件源.事件数据.事件处理程序 事件冒泡:当元素嵌套的时候,内部元素激发某个事件后,默认情况下外部元素相应的事件也会跟着依次触发 可以加return false;是阻止默认操作 oncl ...
随机推荐
- 从首个IMO季军谈起 作者 : 付云皓
刚刚过去的IMO,中国史无前例地获得了第三名,也是自1997年来近20年首次跌出前二.感谢微信等社交软件,相信现在这个新闻已经以火箭的速度传播了. 作为一个与数学竞赛及IMO打了多年交道的人,我一直有 ...
- Life Forms[poj3294]题解
Life Forms Description - You may have wondered why most extraterrestrial life forms resemble humans, ...
- Chrome浏览器控制台报Refused to get unsafe header "XXX"的错误
最近在调试后端下载的接口时在浏览器的控制台中发现了红色的错误信息,例如Refused to get unsafe header "XXX":前端是采用XMLHttpRequest对 ...
- weblogic的ssrf漏洞
前言 什么是ssrf SSRF(Server-Side Request Forgery:服务器端请求伪造) 是一种由攻击者构造形成由服务端发起请求的一个安全漏洞. 一般情况下,SSRF攻击的目标 ...
- Wannafly Camp 2020 Day 1I K小数查询 - 分块
给你一个长度为\(n\)序列\(A\),有\(m\)个操作,操作分为两种: 输入\(x,y,c\),表示对\(i\in[x,y]\),令\(A_{i}=min(A_{i},c)\) 输入\(x,y,k ...
- chrome查看js报错Uncaught SyntaxError: Unexpected string
个人博客原文http://wenhaofan.com/article/20180912123136 js报错,最后发现是$(function(){})这部分()不完整 $(function({ $(& ...
- Zookeeper学习笔记一
目录 一.zookeeper介绍 二.Zookeeper安装 一.zookeeper介绍 1.概述 Zookeeper是一个开源的分布式的,为分布式应用提供协调服务的Apache项目.Hadoop ...
- .netcore 3.1高性能微服务架构:加入swagger接口文档
本文为原创文章:首发:http://www.zyiz.net/tech/detail-108663.html swagger是什么? Swagger 是一个规范和完整的框架,用于生成.描述.调用和可视 ...
- Windows系统对拍程序
Windows系统对拍程序,其中包含c++11用法,请使用c++11标准编译.此对拍程序会在发现错误时显示错误行号以及对应内容,方便比对. 此对拍程序自动使用g++对源代码进行编译.如果出现找不到g+ ...
- 一点点学习PS--实战五
本节实战的内容,新学习到的功能是:人物影子边缘.立体的心形 1.工具的使用: (1)滤镜--模糊--特殊模糊 (2)滤镜--滤镜库--艺术效果--水彩 (3)滤镜--滤镜库--纹理化 (4)自动形状工 ...