网站特效中心 - 爱心
https://webeffect.muanxue.cn/tag/%E7%88%B1%E5%BF%83/
-
点击爱心(dianji)
https://webeffect.muanxue.cn/archives/54/
2024-06-06T08:37:00+08:00
预览特效特效代码(JS)var a_idx = 0;
$("html").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": 144469,
"top": y - 20,
"left": x,
"position": "absolute",
"font-weight": "bold",
"color": "#f00"
});
$("body").append($i);
$i.animate({
"top": y - 160,
"opacity": 0
},
1500,
function() {
$i.remove()
})
});调用教程调用本地(推荐)将JS代码保存在dianji.js(请根据实际更改)文件里然后将以下代码放在你喜欢的地方(推荐foot或head文件)<script src="./dianji.js"></script>//请根据实际更改调用云端(不推荐)调用云端是使用本站的云储存,主要方便于使用者测试,如果需要稳定请使用本地调用。<script src="https://files.webeffect.muanxue.cn/assets/js/dianji.js"></script>//可以直接调用可修改内容点击内容:可以将特效代码第4行中的 "❤️", "💛", "🧡", "💚", "💙" 改为自己喜欢的内容(包括文字)元素区域单独显示:可以将特效代码第2行中的html 改为你仅仅想要在某个区域显示的元素,比如:body、form等等注意如果特效没有显示,那么请引入 jQuery 库:<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>