谁能给我一个元素随着鼠标移动的例子？

脚本说明:
把如下代码加入<body>区域中
<SCRIPT language="JavaScript">
<!--
B=document.all;
C=document.layers;
T1=new Array("http://community.csdn.net/images/CSDN_logo.GIF",38,35,"http://community.csdn.net/images/CSDN_logo.GIF",30,31,"http://community.csdn.net/images/CSDN_logo.GIF",28,26,"http://community.csdn.net/images/CSDN_logo.GIF",22,21,"http://community.csdn.net/images/CSDN_logo.GIF",16,16)
nos=parseInt(T1.length/3)
rate=50
ie5fix1=0;
ie5fix2=0;
for (i=0;i<nos;i++){
createContainer("CUR"+i,i*10,i*10,i*3+1,i*3+2,"","<img src='"+T1[i*3]+"' width="+T1[(i*3+1)]+" height="+T1[(i*3+2)]+" border=0>")}
function createContainer(N,Xp,Yp,W,H,At,HT,Op,St){
with (document){
write((!B) ? "<layer id='"+N+"' left="+Xp+" top="+Yp+" width="+W+" height="+H : "<div id='"+N+"'"+" style='position:absolute;left:"+Xp+"; top:"+Yp+"; width:"+W+"; height:"+H+"; ");
if(St){
if (C)
write(" style='");
write(St+";' ")
}
else write((B)?"'":"");
write((At)? At+">" : ">");
write((HT) ? HT : "");
if (!Op)
closeContainer(N)
}
}
function closeContainer(){
document.write((B)?"</div>":"</layer>")
}
function getXpos(N){
return (B) ? parseInt(B[N].style.left) : C[N].left
}
function getYpos(N){
return (B) ? parseInt(B[N].style.top) : C[N].top
}function moveContainer(N,DX,DY){
c=(B) ? B[N].style :C[N];c.left=DX;c.top=DY
}
function cycle(){
//if (IE5) 
if (document.all&&window.print){
ie5fix1=document.body.scrollLeft;
ie5fix2=document.body.scrollTop;
}
for (i=0;i<(nos-1);i++){
moveContainer("CUR"+i,getXpos("CUR"+(i+1)),getYpos("CUR"+(i+1)))
}
}
function newPos(e){
moveContainer("CUR"+(nos-1),(B)?event.clientX+ie5fix1:e.pageX+2,(B)?event.clientY+ie5fix2:e.pageY+2
)
}
if(document.layers)
document.captureEvents(Event.MOUSEMOVE)
document.onmousemove=newPos
setInterval("cycle()",rate)//-->
</SCRIPT>

解决方案 »

  1.   

    这个直接能用的
    脚本说明:
    把如下代码加入<head>区域中
    <SCRIPT language=javascript>
    <!--//This is a JS program for Sword Jin's JoyFM homepage.All rights reserved.
    var cx=0;
    var cy=0;
    var val=0;
    function locate()
    { cx=window.event.x;
    cy=window.event.y;

    }
    document.onmousemove=locate;
    function follow(i)
    { var x;
    if(i<4)x=cx-50+i*10;
    else x=cx-25+i*10;
    var y=cy-20+Math.floor(Math.random()*40);
    w=eval("word"+i);
    with(w.style)
    {
    left=x.toString()+"px";
    top=y.toString()+"px";
    }
    }
    function show(i)
    {
    var w=eval("word"+i);
    with(w.style)
    {
    visibility="visible";
    s=parseInt(fontSize);
    if(s>=200)s-=100;
    else if(s>90&&s<=100)
    {
    s-=85;
    clearInterval(val);
    if(i<5)val=setInterval("show("+(i+1)+")",20);
    }
    fontSize=s;
    }

    }
    function start()
    { for(i=1;i<=5;i++)
    {
    val=setInterval("show(1)",20);
    setInterval("follow("+i+")",100);

    }
    } //-->
    </SCRIPT>
    <SCRIPT language=javascript>
    var word=new Array(5);
    word[1]="J";word[2]="o";word[3]="y";word[4]="F";word[5]="m";
    for(i=1;i<=5;i++)
    document.write("<div id='word"+i+"' style='width:20px;height:20px;position:absolute;font-size:1000;visibility:hidden'><font face='Forte' color='#00FF00'>"+word[i]+"</font></div>");start(); </SCRIPT>
      

  2.   

    以前的一段代码，挺简单的。应该对你有用，呵呵。
    <script language="javascript">
    <!--
      var drag=null;
      window.document.body.onload=function(){
        if(drag==null){
          drag = document.createElement("DIV");
          var _html="";
          _html+="<table style='font-size:9pt;width:100%;";
          _html+=" border-collapse:collapse' bgcolor=#eeeeee cellpadding=0";
          _html+=" cellspacing=0 border=1 bordercolor='#C0C0C0'><tr><td>";
         //_html+="<font color=red>"+GetCookie("CHINARENUSER")+":</font><br>";
          _html+="来了就留言呀！<br>&nbsp;&nbsp;--Lzhm.net...";
          _html+="</td></tr></table>";
          drag.innerHTML=_html;
          drag.style.filter    ="Alpha(Opacity=70)";
          drag.style.zIndex     = 65530;
          drag.style.position   = "absolute";
          drag.style.width    = "90px";
          document.body.insertBefore(drag);
        }  
      }
      window.document.body.onmousemove=function(){
        if(drag!=null){
          drag.style.left =parseInt(event.x,10)+10+document.body.scrollLeft;
          drag.style.top  =parseInt(event.y,10)+10+document.body.scrollTop;
        }
      }
    //-->
    </script>
      

  3.   

    拿你的这个例子来，可以这么搞，这是最简单的例子了，复杂的可以看看上面几位仁兄的。<div id=drag>这里随鼠标移动</div>
    <script>
      window.document.body.onmousemove=function(){
        if(drag!=null){
          window.drag.style.left =parseInt(event.x,10)+10+document.body.scrollLeft;
          window.drag.style.top  =parseInt(event.y,10)+10+document.body.scrollTop;
        }
      }
    </script>
      

  4.   

    呵呵，可惜楼上各位给出的，firefox下都不行~~关注一下，我最近也遇到类似的问题~~在IE下好解决，FIREFOX里老是解决不了~
      

  5.   

    谢谢各位~~~~ 但正如冲浪所说，在 firefox下确实不行~
      

  6.   

    <html>
    <head>
    <script language=javascript>
    function move()
    {
    document.all.ddd.style.left=window.event.x
    document.all.ddd.style.top=window.event.y
    }
    </script>
    </head>
    <body onMousemove=move() >
    <div style="position:absolute;left=12;top=10">
    <img src=1.jpg>
    </div>
    <div id=ddd style="position:absolute;left=12;top=100;color=red;font-size=30">
    跟随鼠标的文字!
    </div></body>
    </html>