一个鼠标跟随的问题,请大虾子们指教!

wtcsy 2008-06-26 01:10:34
<style type="text/css">
.s0{
position:absolute;
visibility:visible;
top:-50px;
font-size:9pt;
color:#99000;
font-weight:bold;
}
.s1{
position:absolute;
visibility:visible;
top:-50px;
font-size:9pt;
color: #FF6633;
font-weight:bold;
}
.s2{
position:absolute;
visibility:visible;
top:-50px;
font-size:9pt;
color: #FF0000;
font-weight:bold;
}
.s3 {
position:absolute;
visibility:visible;
top:-50px;
font-size:9pt;
color: #006600;
font-weight:bold;
}
.s4 {
position:absolute;
visibility:visible;
top:-50px;
font-size:9pt;
color: #66FF00;
font-weight:bold;
}
.s5 {
position:absolute;
visibility:visible;
top:-50px;
font-size:9pt;
color: #3300FF;
font-weight:bold;
}
.s6 {
position:absolute;
visibility:visible;
top:-50px;
font-size:9pt;
color: #6600FF;
font-weight:bold;
}
</style>
<script language="javascript">
var x=0;
var y=0;
var z=0;
var chongfu=null;
var step=20;
var message ="赤橙黄绿青蓝紫";
message =message.split("");
var xpos = new Array();
for(i=0;i <message.length-1;i++)
{ xpos[i]=-50;}
var ypos = new Array();
for(i=0;i <message.length-1;i++)
{ ypos[i]=-50;}

funcation aa(e)
{
x =document.body.scrollLeft+event.clientX;
y =document.body.scrollLeft+event.clientY;
z=1;
}


function abc(){
for(i=message.leng-1;i>=1;i++)
{
xpos[0]=x+step
ypos[0]=y

if (flag==1) {
for (i=message.length-1; i>=1; i--)
{
xpos[i]=xpos[i-1]+step
ypos[i]=ypos[i-1]
}
for (i=0; i<message.length-1; i++)
{
var ac = eval("a"+(i)+".style")
ac.posLeft=xpos[i]
ac.posTop=ypos[i]
}
}
chongfu=setTimeout("abc()",30)
}
</script>
<body onLoad="abc()">
<script>
for (i=0;i <=message.length-1;i++) {
document.write(" <span id='a"+i+"'class='s"+i+"'>")
document.write(message[i])
document.write(" </span>")}
document.onmousemove = aa;
</script>
</body>
这个是有问题的界面　　ccs就不用看了　　其实程序挺简单的．
...全文
107 7 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
7 条回复
切换为时间正序
请发表友善的回复…
发表回复
wtcsy 2008-06-26
  • 打赏
  • 举报
 回复
唉　　
我想问的不是这个
我的问题在第１个回复里面
sd5816690 2008-06-26
  • 打赏
  • 举报
 回复
我是把所有字放在一个层里，让整个层移动
移动代码是上面的
document.getElementById("divMessage").style.left=(event.clientX+document.body.scrollLeft)+"px";
document.getElementById("divMessage").style.top=(event.clientY+document.body.scrollTop)+"px";
wtcsy 2008-06-26
  • 打赏
  • 举报
 回复
....
我也是ie6的
你的代码就没有控制字运动的部分
第一个是按我的理解写的 是有错误的
第二个是我改的别人的 是正确的 (第一个和第二个 我感觉是一样的 但是看不出来错)
第三个才是原代码(嘿嘿 我好象复制错了,我在复制一下,你在看看)
<style type="text/css">
.spanstyle {
position:absolute;
visibility:visible;
top:-50px;
font-size:9pt;
color: #000000;
font-weight:bold;
}</style>
<script>
var x,y
var step=20
var flag=0
var message="javascript源码大全。"
message=message.split("")
var xpos=new Array()
for (i=0;i<=message.length-1;i++) {
xpos[i]=-50}
var ypos=new Array()
for (i=0;i<=message.length-1;i++) {
ypos[i]=-50}
function handlerMM(e){
x = (document.layers) ? e.pageX : document.body.scrollLeft+event.clientX
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] }
xpos[0]=x+step
ypos[0]=y
for (i=0; i<message.length-1; i++) {
var thisspan = eval("span"+(i)+".style")
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()",30)}
</script>
<body onLoad="makesnake()" >
<script>
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 = handlerMM;
</script>
sd5816690 2008-06-26
  • 打赏
  • 举报
 回复
[Quote=引用 3 楼 wtcsy 的回复:]
这个不是原来的代码效果列!
字都不动的
先顶下吧
[/Quote]
不动？不会吧
难道是浏览器兼容问题，我IE6都运行得很好
wtcsy 2008-06-26
  • 打赏
  • 举报
 回复
这个不是原来的代码效果列!
字都不动的
先顶下吧
sd5816690 2008-06-26
  • 打赏
  • 举报
 回复
LZ的代码。。。我不忍心看了。。。

根据原来代码的效果，编写的代码如下：


<style type="text/css"> 

.fontClass{

	width:16px;

	height:16px;

	float:left;

}

#divMessage{

	width:112px;

	height:16px;

	position:absolute;

}

#a0{

	color : red; 

}

#a1{

	color : orange; 

}

#a2{

	color : yellow; 

}

#a3{

	color : lime; 

}

#a4{

	color : #00ffff; 

}

#a5{

	color : blue; 

}

#a6{

	color : purple; 

}

</style> 

<script language="javascript"> 

var message = "赤橙黄绿青蓝紫"; 

message = message.split("");  

function moveDiv(){ 

	document.getElementById("divMessage").style.left=(event.clientX+document.body.scrollLeft)+"px"; 

	document.getElementById("divMessage").style.top=(event.clientY+document.body.scrollTop)+"px"; 

	for(var i=0;i<message.length;i++){

		document.getElementById("a"+i).style.visibility="visible";

	}

	hideCharacters();//如果不调用该方法就一直显示

} 



function hideCharacters(){

	for(var i=0;i<message.length;i++){

		setTimeout("hideElement('a"+i+"')",100*i);

	}

}



function hideElement(theId){

	document.getElementById(theId).style.visibility="hidden";

}

</script> 

<body onmousemove="moveDiv()"> 

<script>

for (i=0;i <message.length;i++) { 

	document.write("<div id='divMessage'>");

	document.write(" <span id='a"+i+"' class='fontClass'>") ;

	document.write(message[i]) ;

	document.write(" </span>");

}

</script> 

</body>
wtcsy 2008-06-26
  • 打赏
  • 举报
 回复
这个是正确的

<style type="text/css">
.s0{
position:absolute;
visibility:visible;
top:-50px;
font-size:10pt;
color:#990000;
font-weight:bold;
}
.s1 {
position:absolute;
visibility:visible;
top:-50px;
font-size:10pt;
color:#FF3300;
font-weight:bold;
}
.s2 {
position:absolute;
visibility:visible;
top:-50px;
font-size:10pt;
color:#FFFF00;
font-weight:bold;
}
.s3 {
position:absolute;
visibility:visible;
top:-50px;
font-size:10pt;
color:#006600;
font-weight:bold;
}
.s4 {
position:absolute;
visibility:visible;
top:-50px;
font-size:10pt;
color:#66FF00;
font-weight:bold;
}
.s5 {
position:absolute;
visibility:visible;
top:-50px;
font-size:10pt;
color:#3300FF;
font-weight:bold;
}
.s6 {
position:absolute;
visibility:visible;
top:-50px;
font-size:10pt;
color:#6600FF;
font-weight:bold;
}
</style>

<script>
var x,y
var step=40
var flag=0
var message="赤橙黄绿青蓝紫"
message=message.split("")
var xpos=new Array()
for (i=0;i<=message.length-1;i++) {
xpos[i]=-50}
var ypos=new Array()
for (i=0;i<=message.length-1;i++) {
ypos[i]=-50}
function handlerMM(e){
x = document.body.scrollLeft+event.clientX
y = document.body.scrollTop+event.clientY
flag=1}
function makesnake() {

if (flag==1) {
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; i++) {
var thisspan = eval("span"+(i)+".style")
thisspan.posLeft=xpos[i]
thisspan.posTop=ypos[i] } }

var timer=setTimeout("makesnake()",30)}
</script>
<body onLoad="makesnake()" >
<script>
for (i=0;i<=message.length-1;i++) {
document.write("<span id='span"+i+"'class='s"+i+"'>")
document.write(message[i])
document.write("</span>")}

document.onmousemove = handlerMM;
</script>

这个别人的一个例子 我拿过来写成了我觉得好理解的样子的了
和前面的我感觉是一样的 实在找不出哪儿错了
请大虾们指教了!
还有顺便问几个问题
红色的部分 我觉得应该把
xpos[0]=x+step
ypos[0]=y[/color]
放前面 但是这样却出现了第1和2个字平行了 请指教了 为什么放后面了?
还有 鼠标一直往左边拖动(下边也一样)回出现滚动条
应该怎么避免这个问题了???


以下是原程序:

<STYLE TYPE="text/css">
<!--
BODY{
overflow:scroll;
overflow-x:hidden;
}
.s1
{
position : absolute;
font-size : 12pt;
color : blue;
visibility: hidden;
}
.s2
{
position : absolute;
font-size : 20pt;
color : red;
visibility : hidden;
}
.s3
{
position : absolute;
font-size : 16pt;
color : gold;
visibility : hidden;
}
.s4
{
position : absolute;
font-size : 14pt;
color : lime;
visibility : hidden;
}
-->
</STYLE>

<body bgcolor="#FFFFFF">
<DIV ID="div1" CLASS="s1">*</DIV>
<DIV ID="div2" CLASS="s2">*</DIV>
<DIV ID="div3" CLASS="s3">*</DIV>
<DIV ID="div4" CLASS="s4">*</DIV>
<script language="javascript" type="text/javascript" class="s5">
var nav = (document.layers);
var tmr = null;
var spd = 50;
var x = 0;
var x_offset = 5;
var y = 0;
var y_offset = 15;
if(nav) document.captureEvents(Event.MOUSEMOVE);
document.onmousemove = get_mouse;
function get_mouse(e)
{
x = (nav) ? e.pageX : event.clientX+document.body.scrollLeft;
y = (nav) ? e.pageY : event.clientY+document.body.scrollTop;
x += x_offset;
y += y_offset;
beam(1);
}
function beam(n)
{
if(n<5)
{
if(nav)
{
eval("document.div"+n+".top="+y);
eval("document.div"+n+".left="+x);
eval("document.div"+n+".visibility='visible'");
}
else
{
eval("div"+n+".style.top="+y);
eval("div"+n+".style.left="+x);
eval("div"+n+".style.visibility='visible'");
}
n++;
tmr=setTimeout("beam("+n+")",spd);
}
else
{
clearTimeout(tmr);
fade(4);
}
}
function fade(n)
{
if(n>0)
{
if(nav)eval("document.div"+n+".visibility='hidden'");
else eval("div"+n+".style.visibility='hidden'");
n--;
tmr=setTimeout("fade("+n+")",spd);
}
else clearTimeout(tmr);
}
// -->
</script>
</body>
android闹铃
闲来无事，整理一下思路，先前项目中需要用到闹铃程序，于是乎先找找是否有现成的轮子，以了解闹铃实现基本原理，经过测试、运行，这两个程序可以对初始开发者有一定的帮助，有需要的可以试试看，...同各位虾子们分享！
幼儿园中班优质数学教案《大嘴巴鱼吃虾》含反思.docx
在幼儿园中班开展数学教学时，教师们往往面临着一个挑战：如何在孩子们天真烂漫、活泼好动的天性与严谨的数学概念之间搭建一座桥梁。《大嘴巴鱼吃虾》这堂课正是通过巧妙地设计游戏和活动，实现了这一目标，使得孩子...
数据集-目标检测系列- 虾子 检测数据集 lobster ＞＞ DataBall
数据集-目标检测系列- 虾子 检测数据集 lobster ＞＞ DataBall 标注文件格式：xml​​ 项目地址：https://github.com/XIAN-HHappy/ultralytics-yolo-webui 通过webui 方式对ultralytics 的 detect 检测任务 进行： 1...
小学语文常用歇后语分类大全有关虾的歇后语
这个歇后语表示跟随着大众，不做独立思考的行为。虾子没有自主游动的能力，只能随水流行动，象征着盲目从众的心态。 5. **煮熟的虾子——红透了** 煮熟的虾子通体红色，形象地表达了事情已经到了无法改变的地步，...
apache-tomacat7.0解压包
Apache Tomcat是一个开源的软件应用服务器，主要用于部署和运行Java Servlet和JavaServer Pages（JSP）应用程序。这个“apache-tomacat7.0解压包”包含了Tomcat 7.0版本的所有必要组件，使得用户可以在本地环境中...
JavaScript

87,996

社区成员

224,709

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章