JS代码实现鼠标点击爱心特效

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>
上一篇 简单使用搜狐接口在网页显示访客IP
下一篇 EMLOG系统文章优化 链接统一URL标准化SEO

探索站点内容

搜索文章、标签、分类

关注公众号
领美团外卖神券
领美团外卖神券
最新评论
dadaowokou
dadaowokou
10月22日
求更新的
日月先生
日月先生
10月8日
留个言看看
小高网
小高网
10月4日
有更新本帖会重新置顶
7777
7777
10月4日
麻烦置顶
7777
7777
10月3日
那些看剧的app好像没了
hghghg
hghghg
9月24日
强制更新升级,用不了
15579854855
15579854855
9月15日
安装流程都没有,下载也用不了,浪费时间
小高网

小高网管理员

小高网www.xx8g.com

本月创作热力图

少
多