<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>标题页</title>
<STYLE>.spanstyle {
COLOR: #0066ff; FONT-FAMILY: 隶书; FONT-SIZE: 14pt; FONT-WEIGHT: normal; POSITION: absolute; TOP: -50px; VISIBILITY: visible
}
</STYLE>
<SCRIPT language=javascript>
var message="欢 迎 参 加 北 京 奥 运 会！"; //要跟随鼠标的文本
var x,y;
var step=15; //文本之间的距离
var flag=0;
message=message.split(""); //将文本切换成数组
var xpos=new Array();
for (i=0;i<=message.length-1;i++) { //设置所有文本的初始x坐标
xpos[i]=-50;
}
var ypos=new Array();
for (i=0;i<=message.length-1;i++) { //设置所有文本的初始Y坐标
ypos[i]=-50;
}
function handlerXY(e) {
//根据浏览器的不同，获取鼠标的x,y坐标
x = (document.layers) ? e.pageX : document.body.scrollLeft+event.clientX+10;
y = (document.layers) ? e.pageY : document.body.scrollTop+event.clientY;
flag=1;
}
function makesnake() {
if (flag==1 && document.all) {
for (i=message.length-1; i>=1; i--) {
xpos[i]=xpos[i-1]+step; //设置文本之间的显示距离
ypos[i]=ypos[i-1]; //设置文本的y坐标
}
xpos[0]=x+step;
ypos[0]=y;
for (i=0; i<=message.length-1; i++) {
var thisspan = eval_r("span"+(i)+".style");
thisspan.posLeft=xpos[i];
thisspan.posTop=ypos[i];
thisspan.color=Math.random() * 255 * 255 * 255 + Math.random() * 255 * 255 + Math.random() * 255;
}
}
else if (flag==1 && document.layers) {
for (i=message.length-1; i>=1; i--) {
xpos[i]=xpos[i-1]+step;
ypos[i]=ypos[i-1];
}
xpos[0]=x+step;
ypos[0]=y;
for (i=0; i<message.length-1; i++) //根据字符的个数创建多个span元素，用来显示字符
{
var thisspan = eval_r("document.span"+i);
thisspan.left=xpos[i]; //指定span的x坐标
thisspan.top=ypos[i]; //指定span的y坐标
//创建随机的颜色值
thisspan.color=Math.random() * 255 * 255 * 255 + Math.random() * 255 * 255 + Math.random() * 255;
}
}
}
for (i=0;i<=message.length-1;i++) { //循环输出文本信息
document.write("<span id='span"+i+"' class='spanstyle'>");
document.write(message[i]);
document.write("</span>");
}
if (document.layers) {
document.captureEvents(Event.MOUSEMOVE);
}
document.onmousemove = handlerXY;
function firstLoad() { //窗体一加载便触发的事件
makesnake(); //实现跟随鼠标文本的方法
window.setTimeout("firstLoad();", 5);//定时执行此方法
}
</SCRIPT>
</head>
<body bgcolor="#fef4d9" onload=javascript:firstLoad()>
</body>
</html>
<!-- 正文结束 -->
分享到：
相关推荐
js 实现 跟随鼠标的彩色文字! 值得下载看看!资源免费,大家分享!!
纯JS 脚本制作的跟随鼠标的彩色闪烁文字，效果特炫！
多变的背景、非常COOL的公布式、欢迎页面、加入收藏和设为首页、检测屏幕分辨率、科学计算器、日历、闪烁的超链接、时走动的时钟、讯息公告、...、跟随文字、闪烁的跟随文字、跟随鼠标的彩色方格、跟随鼠标滚动文字...
觉得好，请给我评价，不好不发，如果你是高手，你肯定喜欢！
4.9 跟随鼠标的彩色文字 4.10 跟随鼠标的魔法文字 4.11 跟随鼠标的星星 4.12 跟随鼠标的旋转背景 4.13 图片跟随鼠标 4.14 围绕鼠标的文本 4.15 鼠标旁边的提示信息 4.16 鼠标移到下拉框时自动全部打开 4.17 checkbox...
4.9 跟随鼠标的彩色文字 4.10 跟随鼠标的魔法文字 4.11 跟随鼠标的星星 4.12 跟随鼠标的旋转背景 4.13 图片跟随鼠标 4.14 围绕鼠标的文本 4.15 鼠标旁边的提示信息 4.16 鼠标移到下拉框时自动全部打开 4.17 checkbox...
实例218 跟随鼠标移动的图片 340 实例219 可以左右拖动的图片 340 实例220 随意拖动图片 342 实例221 当鼠标经过图片时显示图片 344 实例222 改变图片获取焦点时的状态 345 实例223 抖动的图片 346 实例224 鼠标移动...
9_4.htm 彩色文字的特殊效果。 9_5.htm 升降文字的特殊效果。 9_6.htm 打字效果的文字特效。 9_7.htm 淡入淡出的文字效果。 9_8.htm 炽热文字的特殊效果。 第10章（\10） 示例描述：页面中的链接...
9_4.htm 彩色文字的特殊效果。 9_5.htm 升降文字的特殊效果。 9_6.htm 打字效果的文字特效。 9_7.htm 淡入淡出的文字效果。 9_8.htm 炽热文字的特殊效果。 第10章（\10） 示例描述：页面中的链接...
37.jquery平滑交换真彩色的图片逐渐变为黑白图像的代码 38.jquery异步加载图片的插件jqGalScroll下载 39.jquery微型相册插件Micro Image Gallery下载 40.jQuery把图片放大及变亮特效插件下载 41.jquery拖动...
8、微语页的站长名字加了解码特效，鼠标悬停或移动文字处，头像出现720度旋转动画效果。正文为16号字体、回复14号字体，这样看起来更舒服、更美观。 9、更换了侧边栏顶部的小图标，所有图标皆是精挑细选的。 10、...
【快速选定数据】 可瞬间选中与用户指定内容相同的当前工作表中所有存储格，方便选定、清除内容或其他操作，支持选中字体彩色是否着色。 【取型号使用范围】 取MATCH的两列数据(Relating Area)中对应MODEL的使用...
【快速选定数据】 可瞬间选中与用户指定内容相同的当前工作表中所有存储格，方便选定、清除内容或其他操作，支持选中字体彩色是否着色。 【取型号使用范围】 取MATCH的两列数据(Relating Area)中对应MODEL的使用...