Question

代码（可以复制/粘贴到.html文件，并运行它）：

<HTML>
<HEAD>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<style>
*{margin:0;}
#main{
    background-image:url('http://clip2net.com/clip/m10494/1277192389-c-811b.png');
    width:660px;
    height:320px;
}
</style>
</HEAD>
<BODY><div id="main"></div></BODY>
</HTML>
<script>
var CELL_WIDTH=66;  //diamond area width
var CELL_HEIGHT=32; //diamond area height
var activeCell=$("<img src=http://clip2net.com/clip/m10494/1277193046-block-698b.png>")
    .appendTo("#main")
    .css({"position": "absolute"});

//active diamond area
function overCell(x,y){
    var xC=parseInt(x/(CELL_WIDTH/2));
    var yC=parseInt(y/(CELL_HEIGHT/2));
    var xO=(xC%2==1);
    var yO=(yC%2==0);
    if((xO&&yO) || (!xO&&!yO)){
        //skip
    }else{
        activeCell.css({
            "left":(xC*(CELL_WIDTH/2))+"px",
            "top" :(yC*(CELL_HEIGHT/2))+"px"
        });
    }
}
$(function(){
    $("#main").mousemove(function(e){
        overCell(e.pageX,e.pageY);
   });  
});
</script>

我希望当我将鼠标移到钻石区域上时，在其上显示activeCell。

但现在，它并不好，因为鼠标移动到右下方的钻石区域，它会活动下一个区域，不是很精确。

热门优化这些代码？（我想我需要更好的算术）

谢谢大家！：）

Answer 1

这个功能可以解决问题：

function overCell(x,y)
{ 
    //top left
    var f1 = -CELL_HEIGHT/CELL_WIDTH * (x%CELL_WIDTH) + CELL_HEIGHT/2;
    //bottom left
    var f2 =  CELL_HEIGHT/CELL_WIDTH * (x%CELL_WIDTH) + CELL_HEIGHT/2;
    //top right
    var f3 =  CELL_HEIGHT/CELL_WIDTH * (x%CELL_WIDTH) - CELL_HEIGHT/2;
    //bottom right
    var f4 = -CELL_HEIGHT/CELL_WIDTH * (x%CELL_WIDTH) + 3*CELL_HEIGHT/2;

    if (f1 > 0 && f1 < CELL_HEIGHT/2 && y%CELL_HEIGHT <= f1)
    {
        activeCell.css({ 
            "left":(x-x%CELL_WIDTH - CELL_WIDTH/2)+"px", 
            "top" :(y-y%CELL_HEIGHT - CELL_HEIGHT/2)+"px" 
        }); 
    }
    else if (f2 > CELL_HEIGHT/2 && f2 < CELL_HEIGHT && y%CELL_HEIGHT >= f2)
    {
        activeCell.css({ 
            "left":(x-x%CELL_WIDTH - CELL_WIDTH/2)+"px", 
            "top" :(y-y%CELL_HEIGHT + CELL_HEIGHT/2)+"px" 
        }); 
    }
    else if (f3 > 0 && f3 < CELL_HEIGHT/2 && y%CELL_HEIGHT <= f3)
    {
        activeCell.css({ 
            "left":(x-x%CELL_WIDTH + CELL_WIDTH/2)+"px", 
            "top" :(y-y%CELL_HEIGHT - CELL_HEIGHT/2)+"px" 
        }); 
    }
    else if (f4 < CELL_WIDTH/2 && f4 > CELL_WIDTH/4 && y%CELL_HEIGHT >= f4)
    {
        activeCell.css({ 
            "left":(x-x%CELL_WIDTH + CELL_WIDTH/2)+"px", 
            "top" :(y-y%CELL_HEIGHT + CELL_HEIGHT/2)+"px" 
        }); 
    }
    else
    {
        activeCell.css({ 
            "left":(x-x%CELL_WIDTH)+"px", 
            "top" :(y-y%CELL_HEIGHT)+"px" 
        });
    }
}

如何测试坐标是否在钻石区域？

1 个答案: