点睛之笔，让你的网站变得与众不同～～
将下列js代码 粘贴至 代码可运行到的 script 标签中，即可~效果一：鼠标点击轮播——爱国文字
需要引入jQuery
"富强","民主", "文明", "和谐","自由", "平等", "公正","法治", "爱国", "敬业","诚信", "友善"
此效果未找到原创出处，欢迎小伙伴们提供，支持原创～
//定义获取词语下标
var a_idx = 0;
jQuery(document).ready(function($) {
//点击body时触发事件
$("body").click(function(e) {
//需要显示的词语
var a = new Array("富强","民主", "文明", "和谐","自由", "平等", "公正","法治", "爱国", "敬业","诚信", "友善");
//设置词语给span标签
var $i = $("<span/>").text(a[a_idx]);
//下标等于原来下标+1 余 词语总数
a_idx = (a_idx + 1)% a.length;
//获取鼠标指针的位置，分别相对于文档的左和右边缘。
//获取x和y的指针坐标
var x = e.pageX, y = e.pageY;
//在鼠标的指针的位置给$i定义的span标签添加css样式
$i.css({"z-index" : 999999999999999999999999999999999999999999999999999999999999999999999,
"top" : y - 20,
"left" : x,
"position" : "absolute",
"font-weight" : "bold",
"color" : "#ff6651"
});
//在body添加这个标签
$("body").append($i);
//animate() 方法执行 CSS 属性集的自定义动画。
//该方法通过CSS样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的，这样就可以创建动画效果
$i.animate({
//将原来的位置向上移动180
"top" : y - 180,
"opacity" : 0
//1500动画的速度
}, 1500, function() {
//时间到了自动删除
$i.remove();
});
});
});效果图
效果二：鼠标点击——铆效果
(function(window, document, undefined) {
var hearts = [];
window.requestAnimationFrame = (function() {
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
function(callback) {
setTimeout(callback, 1000 / 60);
}
})();
init();
function init() {
//css(".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: absolute;}.heart:after{top: -5px;}.heart:before{left: -5px;}");
css(".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: absolute;}.heart:after{top: -5px; left: -5px;}.heart:before{top: -5px; left: -5px;}");
attachEvent();
gameloop();
}
function gameloop() {
for (var i = 0; i < hearts.length; i++) {
if (hearts[i].alpha <= 0) {
document.body.removeChild(hearts[i].el);
hearts.splice(i, 1);
continue;
}
hearts[i].y--;
hearts[i].scale += 0.050; //hearts[i].scale += 0.004;
hearts[i].alpha -= 0.013; //hearts[i].alpha -= 0.013;
hearts[i].el.style.cssText = "left:" + hearts[i].x + "px;top:" + hearts[i].y + "px;opacity:" + hearts[i].alpha + ";transform:scale(" + hearts[i].scale + "," + hearts[i].scale + ") rotate(45deg);background:" + hearts[i].color;
}
requestAnimationFrame(gameloop);
}
function attachEvent() {
var old = typeof window.onclick === "function" && window.onclick;
window.onclick = function(event) {
old && old();
createHeart(event);
}
}
function createHeart(event) {
var d = document.createElement("div");
d.className = "heart";
hearts.push({
el: d,
x: event.clientX - 5,
y: event.clientY - 5,
scale: 1,
alpha: 1,
color: randomColor()
});
document.body.appendChild(d);
}
function css(css) {
var style = document.createElement("style");
style.type = "text/css";
try {
style.appendChild(document.createTextNode(css));
} catch(ex) {
style.styleSheet.cssText = css;
}
document.getElementsByTagName('head')[0].appendChild(style);
}
function randomColor() {
return "rgb(" + (~~ (Math.random() * 255)) + "," + (~~ (Math.random() * 255)) + "," + (~~ (Math.random() * 255)) + ")";
}
})(window, document);效果图
效果三：鼠标点击——水波纹效果
原创地址：https://blog.csdn.net/slzs_zyt/article/details/82688349
document.onclick = function(e) {
/**
* 根据鼠标点击坐标初始化dom，通过过渡属性实现动画效果
* dom渲染完成后设置目标偏移位置及目标透明度
* 过渡结束后移除dom
* @author:slzs
*/
var symbol = document.createElement("div");
symbol.style.position = "absolute";
symbol.style.left = (e.pageX) + "px";
symbol.style.top = (e.pageY) + "px";
symbol.style.zIndex = 9999;
symbol.style.transition="all 1.5s";
symbol.style.border="1px red solid";
symbol.style.borderColor = `rgb(${Math.floor(Math.random()*256)},${Math.floor(Math.random()*256)},${Math.floor(Math.random()*256)})`; // 随机颜色
symbol.style.borderRadius="100%";
symbol.style.width = "0px";
symbol.style.height = "0px";
symbol.addEventListener("transitionend",function(et){ // 动画结束移除dom
if(et.propertyName == "opacity" && et.srcElement.style.opacity==0)
et.srcElement.remove();
});
document.body.appendChild(symbol);
requestAnimationFrame(()=>{
symbol.style.width = "80px";
symbol.style.margin = "-7px -40px";
symbol.style.height = "14px";
symbol.style.opacity = 0;
});
};效果图
效果四：鼠标点击——Emoji 随机表情😀(强烈推荐)
window.onload = function () {
let click_cnt = 0;
let $html = document.getElementsByTagName("html")[0];
let $body = document.getElementsByTagName("body")[0];
$html.onclick = function (e) {
let $elem = document.createElement("b");
$elem.style.color = "#E94F06";
$elem.style.zIndex = "9999";
$elem.style.position = "absolute";
$elem.style.select = "none";
let x = e.pageX;
let y = e.pageY;
$elem.style.left = (x - 10) + "px";
$elem.style.top = (y - 20) + "px";
let anim;
clearInterval(anim);
let emoji = ["😃", "😄", "😁", "😆", "😅", "😂", "🤣", "☺", "😊", "😚", "😙", "😗", "😘", "😍", "😌", "😉", "🙃", "🙂", "😇", "😋", "😜", "😝", "😛", "🤑", "🤗", "🤓", "😎", "🤡", "🤠", "😖", "😣", "☹", "🙁", "😈", "🤕", "🤒", "😷", "🤧", "🤢", "👻", "💀", "☠", "👽", "👾", "🤖", "🎃", "😸", "😹", "🙏", "👏", "🙌", "👐", "😾", "😿", "🙀", "😽", "😼", "😻", "😀", "OωO", "( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃", "╮(｡>口<｡)╭", "qzroc.com", "૮( ᵒ̌皿ᵒ̌ )ა", "(╯°口°)╯(┴—┴", "(๑•́ ∀ •̀๑)", "（￣へ￣）", "(๑•̀_•́๑)", "(๑•́ ₃ •̀๑)", "❤", "😀"];
let emojis = emoji.sort(() => Math.random() - 0.5);
switch (++click_cnt) {
case 5:
$elem.innerText = "qzroc.com";
break;
case 10:
$elem.innerText = "谢谢访问哟~";
break;
default:
for (let i = 0; i < emojis.length; i++) {
$elem.innerText = emojis[i];
}
break;
}
$elem.style.fontSize = Math.random() * 10 + 8 + "px";
let increase = 0;
setTimeout(function () {
anim = setInterval(function () {
if (++increase == 150) {
clearInterval(anim);
$body.removeChild($elem);
}
$elem.style.top = y - 20 - increase + "px";
$elem.style.opacity = (150 - increase) / 120;
}, 8);
}, 70);
$body.appendChild($elem);
};
};
fv
?