前端点击移动生成小爱心

我之前看见一个博客，鼠标点击的时候会有不同颜色的小爱心出现，我就心血来潮试着写了一下，并且加了鼠标移动也会产生小爱心,放在这里目的是以后万一我要用方便找，写的不好请海涵。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_2078341_ccmcmll8mxw.css"/>//这里用的是我的在线图标库链接，改成自己的就好<script type="text/javascript">window.onload=function(){document.onclick = function(e){var e = e ||window.event;//点击的坐标var x= e.clientX-15,y= e.clientY-15;//创建容器var Odiv = document.createElement("div");var i =document.createElement("i");i.className = "iconfont iconyishoucang istyle";Odiv.className = "xin";Odiv.style.left = x +"px";Odiv.style.top = y + "px";Odiv.style.color =color();Odiv.appendChild(i)document.body.appendChild(Odiv);var finallytime = y-100;//这里设置图形的上升距离var time = setInterval(function(){if(y-6>finallytime){//上移y=y-6;//上升速度Odiv.style.top = y + "px";}else{y = finallytime;//清除Odiv.style.top = y + "px";clearInterval(time);document.body.removeChild(Odiv);}},1000/60);}var mark = 0;var now;document.onmousemove=function(e){now = Date.now();if(now-mark < 1000/15){//这里设置移动时图形的产生速度return;}else{mark=now;var e = e ||window.event;//点击的坐标var x= e.clientX-15,y= e.clientY-15;//创建容器var Odiv = document.createElement("div");var i =document.createElement("i");i.className = "iconfont iconyishoucang istyle";Odiv.className = "xin";Odiv.style.left = x +"px";Odiv.style.top = y + "px";Odiv.style.color =color();Odiv.appendChild(i)document.body.appendChild(Odiv);var finallytime = y-100;var time = setInterval(function(){if(y-6>finallytime){//上移y=y-6;Odiv.style.top = y + "px";}else{y = finallytime;//清除Odiv.style.top = y + "px";clearInterval(time);//清除子弹document.body.removeChild(Odiv);}},1000/60);}}//随机生成颜色function color(){var r = Math.floor(Math.random()*256);var g = Math.floor(Math.random()*256);var b = Math.floor(Math.random()*256);return "rgb("+r+","+g+","+b+")";}}</script><style type="text/css">*{margin: 0;padding: 0;user-select: none;}html,body{height: 100%;width: 100%;position: relative;}.xin{width: 30px;height: 30px;position: absolute;top: 100px;left: 100px;text-align: center;line-height: 30px;}.istyle{font-size: 30px;}</style></head><body></body>
</html>

前端点击移动生成小爱心相关推荐

jquery粘贴按钮_实现前端点击按钮自动复制剪贴板功能
[目录] 明确需求 html分析代码实现 css分析 js分析代码实现只要是文本,长按选中就可以复制,但是需求来了挡也挡不住: 明确需求为了提升用户体验,点击[复制]按钮就自动复制到剪贴板,那 ...
前端点击按钮打印Excel
前端点击按钮打印Excel 实现思路太长不看版后端spire.xls将excel转为html,前端打印iframe 具体说明前端只能打印html文档已有的dom节点,无法直接打印Excel,那么 ...
前端点击图片的某个区域进行映射
导航栏一:点击图片然后进行映射进行你想要的操作二:如何知道你点击位置图片的XY坐标? 一:点击图片然后进行映射进行你想要的操作比如现在UI同事给了你一张图[如下],让你在点击这个图的每一个行星的 ...
【前端点击穿透】pointer-events属性详解
什么是pointer-events? pointer-events 属性是一个指针属性,是用于控制在什么条件下特定的图形元素可以成为指针事件的目标. This CSS property,when se ...
前端点击图片将跳出显示框显示图片
该写法是在easy UI框架下所用! 主要的功能就是点击详情时候跳出一个显示框将服务器中的PDF文件显示出来. 后台数据库中存储的是已经上传了的文件路径!如果去掉<th>中的formatt ...
前端点击事件一直叠加发送请求，第一次一次，第二次两次，以此类推叠加发送请求
这是因为在页面中为一个元素绑定事件,事件执行后页面未刷新且元素还在,然后你再次点击,元素又被绑定个一次点击事件,这样第二次点击就会执行两次,以此类推.使用jquery的one()方法,替代bind方法 ...
前端点击图片，图片放大
需要依赖js <script src="/js/photoswipe.min.js"></script><script src="/js/p ...
前端点击下载压缩包zip，后端返回文件流
接口请求带responseType: 'blob' export const fileDownloadZip = (params) => {return request({url: '/file ...
html实现点击出现小爱心
前言快过年了~,今年因为特别原因不能回家过年了,在公司干坐在好无聊啊,就搞些花里胡哨的东西吧(合理划水) 废话不多说,直接上代码~,借鉴了某位大佬的,链接就不放了(找不找了>-<) ht ...

前端点击移动生成小爱心

前端点击移动生成小爱心

我之前看见一个博客，鼠标点击的时候会有不同颜色的小爱心出现，我就心血来潮试着写了一下，并且加了鼠标移动也会产生小爱心,放在这里目的是以后万一我要用方便找，写的不好请海涵。

前端点击移动生成小爱心相关推荐

最新文章

热门文章