百度一下百度搜索首页,优化大师有必要花钱吗,外贸软件,学校官方网站网页设计使用鼠标的点击事件#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);了解更多关注我哟
扫一扫进入我的公众号。
