易语言做检测网站更新,怎么免费创建网站,如何搭建网站的结构,sem扫描电子显微镜使用鼠标的点击事件#xff0c;使用鼠标点击任意地方的时候#xff0c;点击的地方会出现一个小心#xff0c;每一次出现的小心的颜色都不一样。
原理分析 1.设置点击的范围 2.鼠标点击事件 3.记录鼠标点击的位置在此位置出现一颗小心 4.小心向上浮动并且自动消失 5.小心颜色…使用鼠标的点击事件使用鼠标点击任意地方的时候点击的地方会出现一个小心每一次出现的小心的颜色都不一样。
原理分析 1.设置点击的范围 2.鼠标点击事件 3.记录鼠标点击的位置在此位置出现一颗小心 4.小心向上浮动并且自动消失 5.小心颜色的变幻
效果演示 代码演示 html代码
!DOCTYPE html
html xmlnshttp://www.w3.org/1999/xhtml
head
meta http-equivContent-Type contenttext/html; charsetutf-8 /
title页面点击小红心/title
/headbody
script srclove.js/script
/body
/htmljs代码
! 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);了解更多关注我哟
扫一扫进入我的公众号。
