页面导航：首页 → 网络编程 → JavaScript → 网页特效 → 鼠标特效 → 正文内容

跟随鼠标旋转的文字

发布：dxy 字体：[增加减小] 类型：转载

点击运行可以看到效果:

<SCRIPT LANGUAGE="JavaScript">  
if (document.all) {  
yourLogo = "脚本之家欢迎您的光临";  
logoFont = "宋体";  
logoColor = "000000";  
yourLogo = yourLogo.split('');  
L = yourLogo.length;  
TrigSplit = 360 / L;  
Sz = new Array()  
logoWidth = 100;  
logoHeight = -30;  
ypos = 0;  
xpos = 0;  
step = 0.03;  
currStep = 0;  
document.write('<div id="outer" style="position:absolute;top:0px;left:0px"><div style="position:relative">');  
for (i = 0; i < L; i++) {  
document.write('<div id="ie" style="position:absolute;top:0px;left:0px;'  
+'width:10px;height:10px;font-family:'+logoFont+';font-size:12px;'  
+'color:'+logoColor+';text-align:center">'+yourLogo[i]+'</div>');  
}  
document.write('</div></div>');  
function Mouse() {  
ypos = event.y;  
xpos = event.x - 5;  
}  
document.onmousemove=Mouse;  
function animateLogo() {  
outer.style.pixelTop = document.body.scrollTop;  
for (i = 0; i < L; i++) {  
ie[i].style.top = ypos + logoHeight * Math.sin(currStep + i * TrigSplit * Math.PI / 180);  
ie[i].style.left = xpos + logoWidth * Math.cos(currStep + i * TrigSplit * Math.PI / 180);  
Sz[i] = ie[i].style.pixelTop - ypos;  
if (Sz[i] < 5) Sz[i] = 5;  
ie[i].style.fontSize = Sz[i] / 1.7;  
}  
currStep -= step;  
setTimeout('animateLogo()', 20);  
}  
window.onload = animateLogo;  
}  
</script>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

这是一段跟随鼠标旋转的文字，我希望字体在旋转的时候，每一个字的颜色都互不相同。不知道应该如何实现呢？

点击运行可以看到效果:

<SCRIPT LANGUAGE="JavaScript">  
if (document.all) {  
yourLogo = "七度空间欢迎您的光临";  
logoFont = "宋体";  
logoColor = ["F0F8FF","FAEBD7","00FFFF","7FFFD4","F0FFFF","F5F5DC","FFE4C4","000000","FFEBCD","0000FF","8A2BE2","A52A2A","DEB887","5F9EA0","7FFF00","D2691E","FF7F50","6495ED","FFF8DC","DC143C","00FFFF","00008B","008B8B","B8860B","A9A9A9","006400","BDB76B","8B008B","556B2F","FF8C00","9932CC","8B0000","E9967A","8FBC8B","483D8B","2F4F4F","00CED1","9400D3","FF1493","00BFFF","696969","1E90FF","B22222","FFFAF0","228B22","FF00FF","DCDCDC","F8F8FF","FFD700","DAA520","808080","008000","ADFF2F","F0FFF0","FF69B4","CD5C5C","4B0082","FFFFF0","F0E68C","E6E6FA","FFF0F5","7CFC00","FFFACD","ADD8E6","F08080","E0FFFF","FAFAD2","90EE90","D3D3D3","FFB6C1","FFA07A","20B2AA","87CEFA","778899","B0C4DE","FFFFE0","00FF00","32CD32","FAF0E6","FF00FF","800000","66CDAA","0000CD","BA55D3","9370DB","3CB371","7B68EE","00FA9A","48D1CC","C71585","191970","F5FFFA","FFE4E1","FFE4B5","FFDEAD","000080","FDF5E6","808000","6B8E23","FFA500","FF4500","DA70D6","EEE8AA","98FB98","AFEEEE","DB7093","FFEFD5","FFDAB9","CD853F","FFC0CB","DDA0DD","B0E0E6","800080","FF0000","BC8F8F","4169E1","8B4513","FA8072","F4A460","2E8B57","FFF5EE","A0522D","C0C0C0","87CEEB","6A5ACD","708090","FFFAFA","00FF7F","4682B4","D2B48C","008080","D8BFD8","FF6347","40E0D0","EE82EE","F5DEB3","F5F5F5","FFFF00","9ACD32"];  
yourLogo = yourLogo.split('');  
L = yourLogo.length;  
TrigSplit = 360 / L;  
Sz = new Array()  
logoWidth = 100;  
logoHeight = -30;  
ypos = 0;  
xpos = 0;  
step = 0.03;  
currStep = 0;  
document.write('<div id="outer" style="position:absolute;top:0px;left:0px"><div style="position:relative">');  
for (i = 0; i < L; i++) {  
document.write('<div id="ie" style="position:absolute;top:0px;left:0px;'  
+'width:10px;height:10px;font-family:'+logoFont+';font-size:12px;'  
+'color:'+logoColor[Math.floor(Math.random()*logoColor.length)]+';text-align:center">'+yourLogo[i]+'</div>');  
}  
document.write('</div></div>');  
function Mouse() {  
ypos = event.y;  
xpos = event.x - 5;  
}  
document.onmousemove=Mouse;  
function animateLogo() {  
outer.style.pixelTop = document.body.scrollTop;  
for (i = 0; i < L; i++) {  
ie[i].style.top = ypos + logoHeight * Math.sin(currStep + i * TrigSplit * Math.PI / 180);  
ie[i].style.left = xpos + logoWidth * Math.cos(currStep + i * TrigSplit * Math.PI / 180);  
Sz[i] = ie[i].style.pixelTop - ypos;  
if (Sz[i] < 5) Sz[i] = 5;  
ie[i].style.fontSize = Sz[i] / 1.7;  
}  
currStep -= step;  
setTimeout('animateLogo()', 20);  
}  
window.onload = animateLogo;  
}  
</script>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

Tags：跟随鼠标旋转的文字

浏览次数：载入中... 打印本文关闭本文返回首页

顶一下

上一篇文章：没有文章
下一篇文章：javascript跟随鼠标的文字带滚动效果

·在百度中搜索关于“跟随鼠标旋转的文字”相关内容
·在谷歌中搜索关于“跟随鼠标旋转的文字”相关内容

文章评论

共有位脚本之家网友发表了评论我来说两句

跟随鼠标旋转的文字

文章评论

同类文章

最近更新

热点排行

跟随鼠标旋转的文字

文章评论

同 类 文 章

最 近 更 新

热 点 排 行

同类文章

最近更新

热点排行