怎样实现一个随鼠标拖动而实时提示的效果？

比如，有个坐标轴，拖动鼠标，旁边的提示信息（可能是在一个方框里）跟着刷新，显示1，2，3等，幅度是根据纵轴坐标来定的。

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

仁兄还是用上次那个YUI框架吧。这个需要更改resize.js脚本库。
找到  this._status.innerHTML = '<strong>' + parseInt(h, 10) + ' x ' + parseInt(w, 10) + '</strong><em>' + ((diffH > 0) ? '+' : '') + diffH + ' x ' + ((diffW > 0) ? '+' : '') + diffW + '</em>';
这句，改成你自己的业务逻辑。有问题继续contact me。
<body>
<script type="text/javascript">
function mousePosition(ev){
     if(ev.pageX || ev.pageY){
      return {x:ev.pageX, y:ev.pageY};
      }
      return {
       x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
       y:ev.clientY + document.body.scrollTop  - document.body.clientTop
       };
} function mouseMove(ev){
    ev = ev || window.event;
    var mousePos = mousePosition(ev);
    document.getElementById('xxx').innerHTML = mousePos.x;
  document.getElementById('yyy').innerHTML = mousePos.y;
  document.getElementById('zzz').style.top= (mousePos.y+10)+"px";
document.getElementById('zzz').style.left= (mousePos.x)+10+"px";
} document.onmousemove = mouseMove;
</script>
<div style="position:absolute;top:0px;left:0px;" id="zzz">
<span id="xxx"></span> <span id="yyy"/></span>
</div>
</body>
<html>
<head>
<title>显示鼠标坐标</title>
<style type="text/css">
</style>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head><body bgcolor="#fef4d9" onMousemove="micro$oftMouseMove()">
<br>
<br>
<center><font color=red face="隶书" size=6>显示鼠标坐标</font></center>
<br>
<center>
<SCRIPT LANGUAGE="JavaScript">
if (navigator.appName == 'Netscape')
{
document.captureEvents(Event.MOUSEMOVE);
document.onmousemove = netscapeMouseMove;
}function netscapeMouseMove(e) {
if (e.screenX != document.test.x.value && e.screenY != document.test.y.value)
{
document.test.x.value = e.screenX;
document.test.y.value = e.screenY;
}
}function micro$oftMouseMove() {
if (window.event.x != document.test.x.value && window.event.y != document.test.y.value)
{
document.test.x.value = window.event.x;
document.test.y.value = window.event.y;
}
}
</SCRIPT>
<FORM NAME="test">
X: <INPUT TYPE="TEXT" NAME="x" SIZE="4"> Y: <INPUT
TYPUE="TEXT" NAME="y" SIZE="4">
</FORM>
</td></tr></table></center>
<br>
<br>
<center><SCRIPT LANGUAGE="JavaScript">
</script>
<FORM METHOD="post">
<INPUT TYPE="button" VALUE="返回" onClick="goHist(-1)" style="background-color: #8000FF; color: rgb(255,255,255)">
</form>
</center>
<br>
<center>
试试这个是你要的效果不
如果是显示坐标的话,在后面建立个影射div来获取(其实就是把你的屏幕坐标影射对应成html画的坐标),然后显示出来id=pointline 的div就是这个作用这里还是简单的html实现,如果功能复杂还是借助框架好些
<html><head>
        <META http-equiv=Content-Style-Type content=text/css>
        <style>
            rv\:* { behavior:url(#default#VML); }
        </style>
        <script>
            function arrowLine(x1,y1,x2,y2,lnclr,lnsw){
                return '<rv:line style="position:absolute;" from="'+x1+','+y1+'" to="'+x2+','+y2+'" strokecolor="'+lnclr+'" strokeweight="'+lnsw+'"><rv:stroke dashstyle="solid" endarrow="classic" /></rv:line>';
            }
            function line(x1,y1,x2,y2,lnclr,lnsw){
                return '<rv:line style="position:absolute;" from="'+x1+','+y1+'" to="'+x2+','+y2+'" strokecolor="'+lnclr+'" strokeweight="'+lnsw+'" />';
            }
            window.onload=function(){
                draw();
                drawAxis()
            }            function draw(){
                document.getElementById("wave").innerHTML= arrowLine(0,500,0,0,"red",1)+arrowLine(0,500,500,500,"red",1);            }            function drawAxis(){
                var xaxis=document.getElementById("xaxis");
                var yaxis=document.getElementById("yaxis");
                var tmpx=[];
                var tmpy=[]
                for(var i=0;i<=5;i++){
                    tmpx.push('<span style="position:relative;');
                    tmpx.push(';width:98px">');
                    tmpx.push(i);   //值
                    tmpx.push('</span>');
                    if(i!=5)
                        tmpx.push(line(0,-10,0,-5,"red",2)); //刻度
                }
                for(var j=0;j <=10;j++){
                    tmpy.push(' <span style="position:absolute;height:49px;top:');
                    tmpy.push(500-49*j);
                    tmpy.push('">');
                    tmpy.push(j);  //值
                    tmpy.push('</span>');
                    if(j!=0)
                        tmpy.push(line(15,500-49*j,20,500-49*j,"red",2)); //y刻度
                }
                xaxis.innerHTML=tmpx.join("");
                yaxis.innerHTML=tmpy.join("");
            }
            function mouseMove(ev){
                ev = ev || window.event;
                var  CursorPos = parseInt( ev.x - document.getElementById("pointline").offsetLeft );
                var xpos=CursorPos/100;
                 document.getElementById("xpos").style.left=parseInt(ev.offsetX)+20;
                 var ypos=10-(ev.offsetY)/50
                 document.getElementById("xpos").style.top=ev.offsetY;
                document.getElementById("xpos").innerHTML=xpos+" , "+(ypos).toFixed(2);            }
        </script>    </head>
    <body>
        <div id="wave" style="position:absolute;left:100px;"></div>
        <div id="yaxis" style="position:absolute;left:80px;height:600px;width:40px"></div>
        <div id="xaxis" style="position:absolute;top:520px;width:600px;left:95px"></div>
        <div style="position:absolute;top:0px;left:95px;width:500px;height:500px;top:25px;" id="pointline" onmousemove=" mouseMove(event)">
            <span id="xpos" style="position:absolute;border:1px solid black"></span>
    </div>
</body>
</html>