比如有个div层<div style="width:766px;height:10px;float:left;"></div>,这长度表示一天的时间,鼠标在这层上移动时会显示出鼠标位置的时间。这个如何实现呢,求指点!!。有类似的代码示例最好了

解决方案 »

  1.   

    添加onmouseover事件 然后获取鼠标的位置 计算出鼠标距离轴开始点的长度 然后用该长度与全长的比例来确定档期的时间
      

  2.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>无标题文档</title>
    <style type="text/css">
    div{
    background-color:#FF6600;
    width:4000px;
    height:10px;
    }
    </style>
    <script type="text/javascript">
    function getPosition(obj){
    var style="";
    if(document.defaultView&&document.defaultView.getComputedStyle){
    style=document.defaultView.getComputedStyle(obj);
    }else{
    style=obj.currentStyle;
    }
    return{
    'y':style.top=="auto"?obj.offsetTop:style.top,
    'x':style.left=="auto"?obj.offsetLeft:style.left
    }
    }
    function getMousePosition(e){
    var a=e||window.event;
    var x=a.pageX||(a.clientX+(document.documentElement.scrollLeft||document.body.scrollLeft));
    var y=a.pageY||(a.clientY+(document.documentElement.scrollTop||document.body.scrollTop));
    return {
    'x':x,
    'y':y
    }
    }
    function init(){
    var div=document.getElementById("test");
    var div2=document.getElementById("test2");
    var k=getPosition(div);
    div.onmousemove=function(e){
    var t=getMousePosition(e);
    div2.innerHTML=t.x-k.x+":"+(t.y-k.y);
    }
    }
    window.onload=init;
    </script>
    </head><body>
    <div id="test"></div>
    <div id="test2"></div>
    </body>
    </html>
    类似这样试试
      

  3.   

    jquery的mouseover事件可以提取里面的width数值。然后再按24小时比例来换算即可