如何使jquery箭头像picasa一样显示/隐藏？

如何使jquery箭头像picasa一样显示/隐藏

将鼠标悬停在图像div的左侧，显示左箭头， 将鼠标悬停在图像div的右侧，是否显示右箭头

例如

谢谢

有些人获取鼠标位置的代码：

function checkS(e){
// capture the mouse position
    var posx = 0;
    var posy = 0;
    if (!e) var e = window.event;
    if (e.pageX || e.pageY)
    {
        posx = e.pageX;
        posy = e.pageY;
    }
    else if (e.clientX || e.clientY)
    {
        posx = e.clientX;
        posy = e.clientY;
    }

    document.getElementById('pos').innerHTML = 'Mouse position is: X='+posx+' Y='+posy;

    document.getElementById('pos').style.left = posx;
    document.getElementById('pos').style.top = posy;
}

---

只需获取鼠标相对于图像的位置

请在此处查找代码：

---

这只是一个开始，您需要设计箭头：

$（'thediv'）。mousemove（函数（e）{
如果（e.offsetX<150）{
$（'thediv'）.html（'show first arrow'）；
}否则{
$（'thediv'）.html（'show second arrow'）；
}
}).mouseout（函数（）{
$（'#thediv'）.html（''）；
});

我知道如何获取鼠标位置，但怎么做？获取图片的大小，除以2，然后决定显示什么图像。既然标记了

jquery

，为什么不使用

$（“#id”）

和所有令人惊奇的jquery内容，而不是

document.getElementById（'id'）

？

$('#thediv').mousemove(function(e) {
    if(e.offsetX < 150) {
        $('#thediv').html('show first arrow');
    } else {
        $('#thediv').html('show second arrow');
    }
}).mouseout(function() {
    $('#thediv').html('');
});