代码演示: Mr.F - 简易的JavaScript文字跟随鼠标移动特效 -- KIENG博客
Document
.sp{
font-size:30px;
font-family: 楷体;
color:#00A1d6;
font-weight:700;
position:absolute;
top:-50px;
}
var str = '这是JavaScript写出来的文字跟随鼠标移动特效哈哈哈哈哈哈哈----By:Mr.F';
var colorarr = ['pink','red','blue','lightgreen','yellow','orange','#00A1d6','violet'];//随机颜色数组
var a = 30;
for (var i = 0; i < str.length; i++) {
document.write('');
document.write(str[i]);
document.write('');
}
document.onmousemove = function(e){
var e = e || event;
document.title = e.clientX + ' - ' + e.clientY;
var m = 0;
var timmer = setInterval(function(){
if (m < str.length) {
span = document.getElementById('str' + m);
var s = Math.floor(Math.random()*colorarr.length);//随机颜色下标
span.style.color = colorarr[s];//赋予颜色
span.style.left = parseInt(e.clientX) + (m*30) + 'px';
span.style.top = e.clientY + 'px';
m++;
}else{
clearInterval(timmer);
}
},100);
}
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?f84e07df8353f7596cb357b2195828a7";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();