本人js不是很精通，可以说是白菜，请高人指点。---------我想实现鼠标定位追踪显示的效果。


<html>
<head>
<title>定位测试</title>
<style type="text/css">
body {
margin: 0 auto;
padding: 0;
text-align: center;
}div {
magin: 0 auto;
padding: 0;
text-align: center;
}.lac {
margin: 0 auto;
padding: 0;
text-align: center;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: green;
}.square {
margin: 0 auto;
padding: 0;
width: 100px;
height: 100px;
background: blue;
float: left;
display: block;
}.square_over {
margin: 0 auto;
padding: 0;
width: 100px;
height: 100px;
background: red;
float: left;
display: block;
}
</style>
</head>
<body>
<div id="content"></div>
</body>
<script type="text/javascript">
var content=document.getElementById("content");
var width = window.innerWidth;
var height = window.innerHeight;
var w = Math.round((width / 100));
var h = Math.round((height / 100));
for ( var i = 0; i < w; i++) {
for ( var j = 0; j < h; j++) {
var d = document.createElement("div");
d.setAttribute("class", "square");
d.setAttribute("id", i + "," + j);
d.setAttribute("onClick", "select(" + i + "," + j + ")");
content.appendChild(d);
alert("-----");//执行到这就出错了;
}}
function select(w, h) {
for ( var i = 0; i < width; i++) {
for ( var j = 0; j < height; j++) {
var s = document.getElementById(i + "," + j);
if (i == w && j == h) {
s.className = "";
s.className += "square_over";
alert(w + "x" + h);
} else {
s.className = "";
}
}
}
}
</script>
</html>

解决方案 »

  1.   

    定位？  不知道你说什么  但是我知道2个东西1，如果想改变鼠标经过某个区域发生样式的改变 CSS可以搞定  几个属性而已2：如果想鼠标经过某个区域发生什么事情 不是有onmouseover事件么？     
      

  2.   

    感谢1楼，问题是解决了，可是没有准确理解，这样理解这个错误：“html页面在浏览器中加载时有反应时间限制，所以js脚本按1楼这样是可以的，而我这种是不行的（根本就没有加载，浏览器忽略了），把js脚本放在body下面浏览器就会加载，或者是加载body是用onload方法就能加载。”
    换句话说：
    1.浏览器默认先加载body的内容然后再解释其他的，诸如css，js；
    2.浏览器加载的反应时间有限，超过默认值则认为加载失败（这也是为什么，此例在ff浏览器上完美运行，而在ie上则行不通）；
    3.不要再html中做过预耗时的计算。困惑：为什么IE不行？火狐可以；怎么处理js计算的问题？我做这个测试目的，源于想：1.画数据分布图；2.定位板；3.画图板。其实我也知道现在css3+html5可以做出很好的动画效果，但是现在还没学习，所以先从基础学起。求高手帮忙解释一下我的困惑，和指点一下怎么学习者方面的知识。
    效果图：可定位追踪。
    <html>
    <head>
    <title>定位测试</title><style type="text/css">
    body {
    magin: 0 auto;
    padding: 0;
    text-align: center;
    }div {
    magin: 0 auto;
    padding: 0;
    text-align: center;
    }.square {
    margin: 0 auto;
    padding: 0;
    width: 2px;
    height: 2px;
    background: blue;
    float: left;
    }.square_over {
    margin: 0 auto;
    padding: 0;
    width: 2px;
    height: 2px;
    background: red;
    float: left;
    }#content {
    margin: 0 auto;
    padding: 0;
    width: 200px;
    height: 200px;
    border: solid 2px green;
    }.location {
    margin: 2 auto;
    padding: 0;
    text-align: center;
    width: 100px;
    height: 50px;
    line-height: 50px;
    border: solid 2px green;
    background-color: transparent;
    position: fixed;
    }
    </style>
    <script type="text/javascript">
    var width = 200;
    var height = 200;
    var w = Math.round((width / 2));
    var h = Math.round((height / 2));
    function init() {
    var content = document.getElementById("content");
    var f = document.createDocumentFragment();
    for ( var i = 1; i <= w; i++) {
    for ( var j = 1; j <= h; j++) {
    var d = document.createElement("div");
    d.setAttribute("class", "square");
    d.setAttribute("id", i + "," + j);
    d.setAttribute("onClick", "select(" + i + "," + j + ")");
    d.setAttribute("onMouseOver", "select(" + i + "," + j + ")");
    f.appendChild(d);
    } }
    content.appendChild(f);
    }
    function select(w1, h1) {
    var loc = document.getElementById("location");
    loc.setAttribute("value", w1 + "," + h1);
    loc.style.top = w1 * 2 + 16;
    loc.style.left = (window.innerWidth - 406) / 2 + h1 * 2 + 50; for ( var i = 1; i <= w; i++) {
    for ( var j = 1; j <= h; j++) {
    var s = document.getElementById(i + "," + j);
    if (i == w1 || j == h1) {
    s.className = "";
    s.className += "square_over";
    } else {
    s.className = "";
    s.className += "square";
    }
    }
    }
    }
    </script>
    </head>
    <body onload="init()">
    <div id="content"></div> <input type="button" class="location" id="location"></body>
    </html>
      

  3.   

    很抱歉！！！以上总结部分文字，是希望有人指正的内容，含有很多理解性的错误，求改正。代码测试没问题（ie不行，ff火狐可以）！！
      

  4.   

    实现这种效果,LZ你选择了最最最最暴力的一种方法,先不管逻辑上的优化问题,单单是你创建那些动态元素就太费时了,DOM操作一定要慎用,能一次性完成是最好了,将那些要动态创建的div统统转化为字符串,存储于一个数组当中,最后使用content.innerHTML = arr.join('')一次性附加即可下面是优化后的例子,仅供参考:
    <html> 
    <head> 
    <title>定位测试</title> 
      
    <style type="text/css"> body{text-align:center;}  
    .square_over {     width:0px; 
        height:0px; 
        border:1px solid red;  
        position:absolute; 
        float: left;
        line-height:0px;
    } 
      
    #content { 
        margin: 0 auto; 
        padding: 0; 
        width: 200px; 
        height: 200px; 
        border: solid 2px green;
        background:blue; 
    } 
      
    .location { 
        margin: 2 auto; 
        padding: 0; 
        text-align: center; 
        width: 100px; 
        height: 50px; 
        left:100px;
        top:0px;
        line-height: 50px; 
        border: solid 2px green; 
        background-color: transparent; 
        position:absolute; 
    } 
    </style> 
    <script type="text/javascript"> 
        //定义容器的大小
        var boxWidth   = 500,
            boxHeight  = 500; 
        function getMousePos(e){
            /// <summary>
            /// 返回当前鼠标的坐标
            /// </summary>
            /// <param name="e">event对象</param>
            /// <returns>{x:鼠标X轴的坐标,y:鼠标Y轴的坐标,}</returns>
            return (e.pageX || e.pageY)
                    ? {x:e.pageX, y:e.pageY}
                    : { 
                        x:e.clientX + document.body.scrollLeft - document.body.clientLeft, 
                        y:e.clientY + document.body.scrollTop - document.body.clientTop
                      };
        };
        window.onload=function(){
            //获取容器
            var content =   document.getElementById("content"),
                isDraw  =   !1,
                _draw   =   function(ev){
                    ev = ev || window.event;
                    //画线    
                    !isDraw && drawLine(this,getMousePos(ev));
                };
            //设置容器的大小
            content.style.width     =   boxWidth;
            content.style.height    =   boxHeight;
            var GUID=1;
            //绑定事件
            //content.onclick       =   _draw;//onclick事件弃用
            content.onmousemove     =   _draw; 
        };
        function drawLine(ele,pos){
            isDraw      =   !0;
            var loc     =   document.getElementById("location"),//获取坐标提示容器
                x       =   pos.x-ele.offsetLeft,//获取相对坐标：：X轴
                y       =   pos.y-ele.offsetTop,//获取相对坐标：：Y轴
                y_min   =   ele.offsetTop,//获取Y轴的起始坐标：：即父容器距离顶部的偏移量
                y_max   =   y_min + ele.offsetHeight,//获取Y轴的结束坐标：：即父容器距离顶部的偏移量+父容器高度
                arr     =   [];//存储画线时动态创建的元素
               
            //对于X轴的线只需要一根即可，left=父容器的左偏移量，宽度=父容器的宽度
            arr.push('<div class="square_over" style="left:'+ele.offsetLeft+';top:'+pos.y+';width:'+parseInt(ele.offsetWidth-2)+'px;"></div>');
            
            /*
                画Y轴的线，规则：
                1：left=当前鼠标的坐标
                2：top的范围从y_min~y_max
            */
            for ( var i = y_min; i < parseInt(y_max); i++) {
                arr.push('<div class="square_over" style="left:'+pos.x+';top:'+i+'"></div>');
            }
            //将画的线输出至父容器中
            ele.innerHTML   =   arr.join('');
            
            //操作坐标提示容器
            loc.innerHTML   =   x + "," + y; 
            //loc.style.top   =   pos.y; 
            //loc.style.left  =   pos.x;
            isDraw          =   !1;
        };
    </script> 
    </head> 
    <body> 
        <div id="content"></div> 
      
        <div  class="location" id="location"></div> 
      
    </body> 
      
      
    </html>
      

  5.   

    再次优化,Y轴的线其实也只需要一个div,指定高度和left,top即可
    <html> 
    <head> 
    <title>定位测试</title> 
      
    <style type="text/css"> body{text-align:center;}  
    .square_over {     width:0px; 
        height:0px; 
        border:1px solid red;  
        position:absolute; 
        
        line-height:0px;
    } 
      
    #content { 
        margin: 0 auto; 
        padding: 0; 
        width: 200px; 
        height: 200px; 
        border: solid 2px green;
        background:blue; 
    } 
      
    .location { 
        margin: 2 auto; 
        padding: 0; 
        text-align: center; 
        width: 100px; 
        height: 50px; 
        left:100px;
        top:0px;
        line-height: 50px; 
        border: solid 2px green; 
        background-color: transparent; 
        background:white; 
        position:absolute; 
    } 
    </style> 
    <script type="text/javascript"> 
        //定义容器的大小
        var boxWidth   = 500,
            boxHeight  = 500; 
        function getMousePos(e){
            /// <summary>
            /// 返回当前鼠标的坐标
            /// </summary>
            /// <param name="e">event对象</param>
            /// <returns>{x:鼠标X轴的坐标,y:鼠标Y轴的坐标,}</returns>
            return (e.pageX || e.pageY)
                    ? {x:e.pageX, y:e.pageY}
                    : { 
                        x:e.clientX + document.body.scrollLeft - document.body.clientLeft, 
                        y:e.clientY + document.body.scrollTop - document.body.clientTop
                      };
        };
        window.onload=function(){
            //获取容器
            var content =   document.getElementById("content"),
                isDraw  =   !1,
                _draw   =   function(ev){
                    ev = ev || window.event;
                    //画线    
                    !isDraw && drawLine(this,getMousePos(ev));
                };
            //设置容器的大小
            content.style.width     =   boxWidth;
            content.style.height    =   boxHeight;
            
            //绑定事件
            //content.onclick       =   _draw;//onclick事件弃用
            content.onmousemove     =   _draw; 
        };
        function drawLine(ele,pos){
            isDraw      =   !0;
            var loc     =   document.getElementById("location"),//获取坐标提示容器
                x       =   pos.x-ele.offsetLeft,//获取相对坐标：：X轴
                y       =   pos.y-ele.offsetTop,//获取相对坐标：：Y轴
                y_min   =   ele.offsetTop,//获取Y轴的起始坐标：：即父容器距离顶部的偏移量
                y_max   =   y_min + ele.offsetHeight,//获取Y轴的结束坐标：：即父容器距离顶部的偏移量+父容器高度
                arr     =   [];//存储画线时动态创建的元素
               
            //对于X轴的线只需要一个div即可，left=父容器的左偏移量；top=当前鼠标的Y轴坐标；宽度=父容器的宽度
            arr.push('<div class="square_over" style="left:'+ele.offsetLeft+';top:'+pos.y+';width:'+parseInt(ele.offsetWidth-2)+'px;"></div>');        //对于Y轴的线只需要一个div即可，left=当前鼠标的X轴坐标；top=父容器距离顶部的偏移量；高度=父容器的高度
            arr.push('<div class="square_over" style="left:'+pos.x+';top:'+y_min+';height:'+ele.offsetHeight+'"></div>');
            
            //将画的线输出至父容器中
            ele.innerHTML   =   arr.join('');
            
            //操作坐标提示容器
            loc.innerHTML   =   x + "," + y; 
            loc.style.top   =   pos.y+10; 
            loc.style.left  =   pos.x-50;
            isDraw          =   !1;
        };
    </script> 
    </head> 
    <body> 
        <div id="content"></div> 
      
        <div  class="location" id="location"></div> 
      
    </body> 
      
      
    </html>
      

  6.   

    大体理解了，由于基础不是很好，所以还有些不理解地方（红字标明部分），望能够请楼上讲解一下。
    最后请推荐一本javascript的书，或者比较出名的js的教学视频。谢谢了！！！
      

  7.   

    isDraw  =   !1,//是不是可以理解为定义的一种标志？？？
    是的,只是用它来标志当前是否正在进行"画线",不过优化后就写两个div,这个标志的意义已经不大了function(ev){
       ev = ev || window.event;//ev你可以看作是一个事件的实例,包括了与这个事件相关的一系列对象,但是各浏览器之间获取它的方法有差异,比如IE中,直接使用ev是无效的,IE中生效的是window.event对象,这条语句就是为了兼容浏览器而写的
    }!isDraw && drawLine(this,getMousePos(ev));//为什么还要进行 “与操作” ？？？？再次优化之前,因为要一次性写入很多个元素,特别是在IE下有迟滞,所以,加上了一个前提,就是如果当前正在"画线",那现在就不画了.它相当于
    if(!isDraw){drawLine(this,getMousePos(ev));}
      

  8.   

    另外,那个isDraw应该移到window.onload外面去的