给自己网站添加鼠标点击显示“富强、民主、和谐”鼠标点击特效，这个特效网上也有许多教程，其实就是一个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属性值是逐渐改变的，这样就可以创建动画效果。

*详情请看http://www.w3school.com.cn/jquery/effect_animate.asp

*/

$i.animate({

"top" : y - 180,//将原来的位置向上移动180

"opacity" : 0

//1500动画的速度

}, 1500, ()=>{

$i.remove();//时间到了自动删除

});

});

});

版权声明：若无特殊注明，本文为《寒星皓月》原创，转载请保留文章出处。

本文链接：https://www.wanghanyue.com/post-35.html

本作品采用知识共享署名 4.0 国际许可协议进行许可。

正文到此结束