鼠标点击特效·爱心❤和文字

末蓝、 2021-09-23 16:30 325阅读 0赞

> 爱心特效❤

<script type="text/javascript">
            /* 网页鼠标点击特效（爱心）*/
            !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>

> 复制即可

> 文本 公平、爱国。。。

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript">
        var a_idx = 0;jQuery(document).ready(function($) { $("body").click(function(e) { var a = new Array("❤富强❤", "❤民主❤", "❤文明❤", "❤和谐❤", "自❤由", "平❤等", "公❤正" ,"法❤治", "爱❤国", "敬❤业", "诚❤信", "❤友善❤");var $i = $("<span/>").text(a[a_idx]);
            a_idx = (a_idx + 1) % a.length;var x = e.pageX,y = e.pageY;$i.css({ "z-index": 100000000,"top": y - 20,"left": x,"position": "absolute","font-weight": "bold","color": "#ff6651"});$("body").append($i);$i.animate({ "top": y - 180,"opacity": 0},1500,function() { $i.remove();});});});
    </script>

发表评论取消回复

表情：

评论列表（有 0 条评论，325人围观）

还没有评论，来说两句吧...

相关阅读

相关鼠标点击网页出现文字

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runa

港控/mmm°/ 2023年10月02日 03:27/ 0 赞/ 3 阅读

相关 js点击屏幕出现文字

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>js点击屏幕出现

电玩女神/ 2023年08月17日 16:24/ 0 赞/ 140 阅读

相关 jquery鼠标移动、点击页面出现爱心

爱心 1、css画一个爱心 .main{ width: 20px; position: fixed; } //

以你之姓@/ 2022年09月08日 00:08/ 0 赞/ 217 阅读

相关 JAVASCRIPT之导航栏鼠标点击变色特效

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR

左手的ㄟ右手/ 2022年07月12日 02:46/ 0 赞/ 184 阅读

相关 JAVASCRIPT之导航栏鼠标点击变色特效

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR

不念不忘少年蓝@/ 2022年07月12日 02:46/ 0 赞/ 218 阅读

相关禁止鼠标多次点击选中div中的文字

来源：[http://www.cnblogs.com/myjiejie/archive/2010/12/04/1896327.html][http_www.cnblogs.co

雨点打透心脏的1/2处/ 2022年06月18日 06:45/ 0 赞/ 236 阅读

相关 Javascript 鼠标点击冒泡特效

一个用JS写的鼠标左击特效点击鼠标左键会出现红心”❤”或者字符表情“(๑•́ ₃ •̀๑)”… 常用Emoji 可以自行替换，如需复制，请从底部链接移步至Git

灰太狼/ 2022年06月14日 00:49/ 0 赞/ 218 阅读

相关鼠标点击不选中文字

前言：经常遇见很讨厌的事情，就是在鼠标双击或者连续单击的时候会选中问题，这次在做图片滚动的时候，左边采用了<，没有采用图片，在用户连续点击的时候就会选中这个箭头，用户体验非常

╰半夏微凉°/ 2022年06月05日 08:51/ 0 赞/ 292 阅读

相关鼠标点击显示冒泡文字

逛网站的时候遇到一个有趣的鼠标点击事件： ![这里写图片描述][Image 1] 点击鼠标会有文字不显示，上漂一定时间后消失。现记录作为收藏具体代码：

谁践踏了优雅/ 2022年05月29日 06:57/ 0 赞/ 296 阅读

相关鼠标点击特效·爱心❤和文字

> 爱心特效❤ <script type="text/javascript"> / 网页鼠标点击特效（爱心）/ !fu

末蓝、/ 2021年09月23日 16:30/ 0 赞/ 326 阅读