求解!!JS文字跟随鼠标 精通javascript和jQuery源代码4-10 为什么在firefox下没效果
源代码如下:<html><head><title>文字跟随鼠标</title><styletype="text/css"><!--body{background-colo...
源代码如下:
<html>
<head>
<title>文字跟随鼠标</title>
<style type="text/css">
<!--
body{
background-color:#004593;
}
.spanstyle{
color:#fff000;
font-family:"Courier New";
font-size:18px;
font-weight:bold;
position:absolute; /* 绝对定位 */
top:-50px;
}
-->
</style>
<script language="javascript">
var x,y; //鼠标当前在页面上的位置
var step=10; //字符显示间距，为了好看，step=0则字符显示没有间距
var flag=0;
var message="Cascading Style Sheet"; //跟随鼠标要显示的字符串
message=message.split(""); //将字符串分割为字符数组
var xpos=new Array() //存储每个字符的x位置的数组
for (i=0;i<message.length;i++) {
xpos[i]=-50;
}
var ypos=new Array() //存储每个字符的y位置的数组
for (i=0;i<message.length;i++) {
ypos[i]=-50;
}
for (i=0;i<message.length;i++) { //动态生成显示每个字符span标记,
//使用span来标记字符，是为了方便使用CSS，并可以自由的绝对定位
document.write("<span id='span"+i+"' class='spanstyle'>");
document.write(message[i]);
document.write("</span>");
}
if (document.layers){
document.captureEvents(Event.MOUSEMOVE);
}
function handlerMM(e){ //从事件得到鼠标光标在页面上的位置
e=e||window.event;
x = (document.layers) ? e.pageX : document.body.scrollLeft+e.clientX;
y = (document.layers) ? e.pageY : document.body.scrollTop+e.clientY;
flag=1;
}
function makesnake() { //重定位每个字符的位置
if (flag==1 && document.all) { //如果是IE
for (i=message.length-1; i>=1; i--) {
xpos[i]=xpos[i-1]+step; //从尾向头确定字符的位置，每个字符为前一个字符“历史”水平坐标+step间隔，
//这样随着光标移动事件，就能得到一个动态的波浪状的显示效果
ypos[i]=ypos[i-1]; //垂直坐标为前一字符的历史“垂直”坐标，后一个字符跟踪前一个字符运动
}
xpos[0]=x+step //第一个字符的坐标位置紧跟鼠标光标
ypos[0]=y
//上面的算法将保证，如果鼠标光标移动到新位置，则连续调用makenake将会使这些字符一个接一个的移动的新位置
// 该算法显示字符串就有点象人类的游行队伍一样，
for (i=0; i<=message.length-1; i++) {
var thisspan = eval("span"+(i)+".style"); //妙用eval根据字符串得到该字符串表示的对象
thisspan.posLeft=xpos[i];
thisspan.posTop=ypos[i];
}
}
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++) {
var thisspan = eval("document.span"+i);
thisspan.left=xpos[i];
thisspan.top=ypos[i];
}
}
var timer=setTimeout("makesnake()",10) //设置10毫秒的定时器来连续调用makesnake(),时刻刷新显示字符串的位置。
}
document.onmousemove = handlerMM;
</script>
</head>
<body onLoad="makesnake();">
</body>
</html> 展开
<html>
<head>
<title>文字跟随鼠标</title>
<style type="text/css">
<!--
body{
background-color:#004593;
}
.spanstyle{
color:#fff000;
font-family:"Courier New";
font-size:18px;
font-weight:bold;
position:absolute; /* 绝对定位 */
top:-50px;
}
-->
</style>
<script language="javascript">
var x,y; //鼠标当前在页面上的位置
var step=10; //字符显示间距，为了好看，step=0则字符显示没有间距
var flag=0;
var message="Cascading Style Sheet"; //跟随鼠标要显示的字符串
message=message.split(""); //将字符串分割为字符数组
var xpos=new Array() //存储每个字符的x位置的数组
for (i=0;i<message.length;i++) {
xpos[i]=-50;
}
var ypos=new Array() //存储每个字符的y位置的数组
for (i=0;i<message.length;i++) {
ypos[i]=-50;
}
for (i=0;i<message.length;i++) { //动态生成显示每个字符span标记,
//使用span来标记字符，是为了方便使用CSS，并可以自由的绝对定位
document.write("<span id='span"+i+"' class='spanstyle'>");
document.write(message[i]);
document.write("</span>");
}
if (document.layers){
document.captureEvents(Event.MOUSEMOVE);
}
function handlerMM(e){ //从事件得到鼠标光标在页面上的位置
e=e||window.event;
x = (document.layers) ? e.pageX : document.body.scrollLeft+e.clientX;
y = (document.layers) ? e.pageY : document.body.scrollTop+e.clientY;
flag=1;
}
function makesnake() { //重定位每个字符的位置
if (flag==1 && document.all) { //如果是IE
for (i=message.length-1; i>=1; i--) {
xpos[i]=xpos[i-1]+step; //从尾向头确定字符的位置，每个字符为前一个字符“历史”水平坐标+step间隔，
//这样随着光标移动事件，就能得到一个动态的波浪状的显示效果
ypos[i]=ypos[i-1]; //垂直坐标为前一字符的历史“垂直”坐标，后一个字符跟踪前一个字符运动
}
xpos[0]=x+step //第一个字符的坐标位置紧跟鼠标光标
ypos[0]=y
//上面的算法将保证，如果鼠标光标移动到新位置，则连续调用makenake将会使这些字符一个接一个的移动的新位置
// 该算法显示字符串就有点象人类的游行队伍一样，
for (i=0; i<=message.length-1; i++) {
var thisspan = eval("span"+(i)+".style"); //妙用eval根据字符串得到该字符串表示的对象
thisspan.posLeft=xpos[i];
thisspan.posTop=ypos[i];
}
}
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++) {
var thisspan = eval("document.span"+i);
thisspan.left=xpos[i];
thisspan.top=ypos[i];
}
}
var timer=setTimeout("makesnake()",10) //设置10毫秒的定时器来连续调用makesnake(),时刻刷新显示字符串的位置。
}
document.onmousemove = handlerMM;
</script>
</head>
<body onLoad="makesnake();">
</body>
</html> 展开
2个回答
展开全部
你这段代码需要修改两个地方：
第一，else if (flag==1 && document.layers) 这里改成else，不要后面的if判断
第二，var thisspan = eval("document.span"+i);改成var thisspan=document.getElementById("span"+i).style;
另外，flag的使用其实是多余的，反而会造成困扰，直接把相关代码都删掉。
感觉你这段代码好像很老了，为了适应老的浏览器而烦复了很多。其实应该更简单的。
以下为我亲测可以在FF和IE上运行的代码：
<html>
<head>
<title>文字跟随鼠标</title>
<style type="text/css">
<!--
body{
background-color:#004593;
}
.spanstyle{
color:#fff000;
font-family:"Courier New";
font-size:18px;
font-weight:bold;
position:absolute; /* 绝对定位 */
top:-50px;
}
-->
</style>
<script language="javascript">
var x,y; //鼠标当前在页面上的位置
var step=10; //字符显示间距，为了好看，step=0则字符显示没有间距
var message="Cascading Style Sheet"; //跟随鼠标要显示的字符串
message=message.split(""); //将字符串分割为字符数组
var xpos=new Array() //存储每个字符的x位置的数组
for (i=0;i<message.length;i++) {
xpos[i]=-50;
}
var ypos=new Array() //存储每个字符的y位置的数组
for (i=0;i<message.length;i++) {
ypos[i]=-50;
}
for (i=0;i<message.length;i++) { //动态生成显示每个字符span标记,
//使用span来标记字符，是为了方便使用CSS，并可以自由的绝对定位
document.write("<span id='span"+i+"' class='spanstyle'>");
document.write(message[i]);
document.write("</span>");
}
if (document.layers){
document.captureEvents(Event.MOUSEMOVE);
}
function handlerMM(e){ //从事件得到鼠标光标在页面上的位置
e=e||window.event;
x = (document.layers) ? e.pageX : document.body.scrollLeft+e.clientX;
y = (document.layers) ? e.pageY : document.body.scrollTop+e.clientY;
}
function makesnake() { //重定位每个字符的位置
if (document.all) { //如果是IE
for (i=message.length-1; i>=1; i--) {
xpos[i]=xpos[i-1]+step; //从尾向头确定字符的位置，每个字符为前一个字符“历史”水平坐标+step间隔，
//这样随着光标移动事件，就能得到一个动态的波浪状的显示效果
ypos[i]=ypos[i-1]; //垂直坐标为前一字符的历史“垂直”坐标，后一个字符跟踪前一个字符运动
}
xpos[0]=x+step //第一个字符的坐标位置紧跟鼠标光标
ypos[0]=y
//上面的算法将保证，如果鼠标光标移动到新位置，则连续调用makenake将会使这些字符一个接一个的移动的新位置
// 该算法显示字符串就有点象人类的游行队伍一样，
for (i=0; i<=message.length-1; i++) {
var thisspan = eval("span"+(i)+".style"); //妙用eval根据字符串得到该字符串表示的对象
thisspan.posLeft=xpos[i];
thisspan.posTop=ypos[i];
}
}
else{
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++) {
var thisspan = document.getElementById("span"+i).style;
thisspan.left=xpos[i];
thisspan.top=ypos[i];
}
}
var timer=setTimeout("makesnake()",10) //设置10毫秒的定时器来连续调用makesnake(),时刻刷新显示字符串的位置。
}
document.onmousemove = handlerMM;
</script>
</head>
<body onLoad="makesnake();">
</body>
</html>
第一，else if (flag==1 && document.layers) 这里改成else，不要后面的if判断
第二，var thisspan = eval("document.span"+i);改成var thisspan=document.getElementById("span"+i).style;
另外，flag的使用其实是多余的，反而会造成困扰，直接把相关代码都删掉。
感觉你这段代码好像很老了，为了适应老的浏览器而烦复了很多。其实应该更简单的。
以下为我亲测可以在FF和IE上运行的代码：
<html>
<head>
<title>文字跟随鼠标</title>
<style type="text/css">
<!--
body{
background-color:#004593;
}
.spanstyle{
color:#fff000;
font-family:"Courier New";
font-size:18px;
font-weight:bold;
position:absolute; /* 绝对定位 */
top:-50px;
}
-->
</style>
<script language="javascript">
var x,y; //鼠标当前在页面上的位置
var step=10; //字符显示间距，为了好看，step=0则字符显示没有间距
var message="Cascading Style Sheet"; //跟随鼠标要显示的字符串
message=message.split(""); //将字符串分割为字符数组
var xpos=new Array() //存储每个字符的x位置的数组
for (i=0;i<message.length;i++) {
xpos[i]=-50;
}
var ypos=new Array() //存储每个字符的y位置的数组
for (i=0;i<message.length;i++) {
ypos[i]=-50;
}
for (i=0;i<message.length;i++) { //动态生成显示每个字符span标记,
//使用span来标记字符，是为了方便使用CSS，并可以自由的绝对定位
document.write("<span id='span"+i+"' class='spanstyle'>");
document.write(message[i]);
document.write("</span>");
}
if (document.layers){
document.captureEvents(Event.MOUSEMOVE);
}
function handlerMM(e){ //从事件得到鼠标光标在页面上的位置
e=e||window.event;
x = (document.layers) ? e.pageX : document.body.scrollLeft+e.clientX;
y = (document.layers) ? e.pageY : document.body.scrollTop+e.clientY;
}
function makesnake() { //重定位每个字符的位置
if (document.all) { //如果是IE
for (i=message.length-1; i>=1; i--) {
xpos[i]=xpos[i-1]+step; //从尾向头确定字符的位置，每个字符为前一个字符“历史”水平坐标+step间隔，
//这样随着光标移动事件，就能得到一个动态的波浪状的显示效果
ypos[i]=ypos[i-1]; //垂直坐标为前一字符的历史“垂直”坐标，后一个字符跟踪前一个字符运动
}
xpos[0]=x+step //第一个字符的坐标位置紧跟鼠标光标
ypos[0]=y
//上面的算法将保证，如果鼠标光标移动到新位置，则连续调用makenake将会使这些字符一个接一个的移动的新位置
// 该算法显示字符串就有点象人类的游行队伍一样，
for (i=0; i<=message.length-1; i++) {
var thisspan = eval("span"+(i)+".style"); //妙用eval根据字符串得到该字符串表示的对象
thisspan.posLeft=xpos[i];
thisspan.posTop=ypos[i];
}
}
else{
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++) {
var thisspan = document.getElementById("span"+i).style;
thisspan.left=xpos[i];
thisspan.top=ypos[i];
}
}
var timer=setTimeout("makesnake()",10) //设置10毫秒的定时器来连续调用makesnake(),时刻刷新显示字符串的位置。
}
document.onmousemove = handlerMM;
</script>
</head>
<body onLoad="makesnake();">
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
您好！很高兴为您答疑。
走读了一下您的代码，主要发现2个问题：
1、行55~行84的这个语法嵌套中第二个if的判断表达式存在问题，(flag==1 && document.layers)这个表达式的值因为document.layers始终为undefined，故而其值永远是false，及后面这个情况永远无法执行，这也就是火狐中没有样式显示的根本原因。因为您的这个判别式只有2种情况，因此建议您后一种情况中考虑移除判断表达式即可；
2、这是您对象获取上的bug，您在67行明明是循环输出了若干id是"span"+(i)+".style"的对象，却在80行以：id="document.span"+i来获取对象，自然也全部是undefined。此处只要将：var thisspan = eval("document.span"+i);改为：var thisspan = eval("span"+i+".style");即可。
如果对我们的回答存在任何疑问，欢迎继续问询。
走读了一下您的代码，主要发现2个问题：
1、行55~行84的这个语法嵌套中第二个if的判断表达式存在问题，(flag==1 && document.layers)这个表达式的值因为document.layers始终为undefined，故而其值永远是false，及后面这个情况永远无法执行，这也就是火狐中没有样式显示的根本原因。因为您的这个判别式只有2种情况，因此建议您后一种情况中考虑移除判断表达式即可；
2、这是您对象获取上的bug，您在67行明明是循环输出了若干id是"span"+(i)+".style"的对象，却在80行以：id="document.span"+i来获取对象，自然也全部是undefined。此处只要将：var thisspan = eval("document.span"+i);改为：var thisspan = eval("span"+i+".style");即可。
如果对我们的回答存在任何疑问，欢迎继续问询。
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
