给自己网站添加鼠标点击显示“富强、民主、和谐”鼠标点击特效，这个特效网上也有许多教程，其实就是一个JS代码，代码如下，放在网站底部就可以了。
/* 鼠标特效 */
var a_idx = 0;
jQuery(document).ready(function($) {
$("body").click(function(e) {
var a = new Array("富强", "民主", "文明", "和谐", "自由", "平等", "公正" ,"法治", "爱国", "敬业", "诚信", "友善");
var $i = $("").text(a[a_idx]);
a_idx = (a_idx + 1) % a.length;
var x = e.pageX,
y = e.pageY;
$i.css({
"z-index": 999999999999999999999999999999999999999999999999999999999999999999999,
"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();
});
});
});
原生 JS 实现代码：window.οnlοad=()=>{
let i=0;//定义获取词语下标
let body=document.getElementsByTagName("body")[0];
body.οnclick=function(e){//点击body时触发事件
const a=["富强","民主", "文明", "和谐","自由", "平等", "公正","法治", "爱国", "敬业","诚信", "友善"];//需要显示的词语
let span=document.createElement("span");//创建span标签
span.innerText=a[(i++)%a.length];//设置词语给span标签
let x = e.pageX;//获取x指针坐标
let y = e.pageY;//获取y指针坐标
span.style.cssText="z-index:999999999999999999999999;top:"+(y - 20)+"px;left:"+x+"px;position:absolute;font-weight:bold;color:#ff6651;";//在鼠标的指针的位置给span标签添加css样式
body.appendChild(span);//在body添加这个span标签
animate(span, {"top" : y - 180,"opacity" : 0}, 15, 0.01, function(){
body.removeChild(span);//时间到了自动删除
})
}
//animate函数执行 CSS 属性集的自定义动画。
function animate(obj, json, interval, sp, fn) {
clearInterval(obj.timer);
function getStyle(obj, arr) {
if(obj.currentStyle){
return obj.currentStyle[arr];//针对ie
} else {
return document.defaultView.getComputedStyle(obj, null)[arr].replace(/px/g,"");
}
}
obj.timer = setInterval(function(){
var flag = true;
for(var arr in json) {
var icur = 0;
if(arr == "opacity") {
icur = Math.round(parseFloat(getStyle(obj, arr))*100);
} else {
icur = parseInt(getStyle(obj, arr));
}
var speed = (json[arr] - icur) * sp;
speed = speed > 0 ? Math.ceil(speed): Math.floor(speed);
if(icur != json[arr]){
flag = false;
}
if(arr == "opacity"){
obj.style.filter = "alpha(opacity : '+(icur + speed)+' )";
obj.style.opacity = (icur + speed)/100;
}else {
obj.style[arr] = icur + speed + "px";
}
}
if(flag){
clearInterval(obj.timer);
if(fn){
fn();
}
}
},interval);
}
}
jQuery 实现代码：jQuery(document).ready(function($) {
let i=0;//定义获取词语下标
$("body").click(function(e) {//点击body时触发事件
let a = ["富强","民主", "文明", "和谐","自由", "平等", "公正","法治", "爱国", "敬业","诚信", "友善"];//需要显示的词语
let $i = $("").text(a[(i++)%a.length]);//设置词语给span标签
let x = e.pageX;
let y = e.pageY;//获取x和y的指针坐标
$i.css({"z-index" : 9999999999999999999,
"top" : y - 20,
"left" : x,
"position" : "absolute",
"font-weight" : "bold",
"color" : "#ff6651"
});//在鼠标的指针的位置给$i定义的span标签添加css样式
$("body").append($i);//在body添加这个标签
/*nimate() 方法执行 CSS 属性集的自定义动画。
*该方法通过CSS样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的，这样就可以创建动画效果。
*详情请看/jquery/effect_animate.asp
*/
$i.animate({
"top" : y - 180,//将原来的位置向上移动180
"opacity" : 0
//1500动画的速度
}, 1500, ()=>{
$i.remove();//时间到了自动删除
});
});
});
版权声明：若无特殊注明，本文为《寒星皓月》原创，转载请保留文章出处。
本文链接：/post-35.html
本作品采用知识共享署名 4.0 国际许可协议进行许可。
正文到此结束
