如何制作像picasa一样的jquery箭头显示/隐藏？

Question

如何制作像picasa一样显示/隐藏的jquery箭头？

鼠标悬停在图像div的左侧部分，显示左箭头， 鼠标悬停在图像div的右侧，显示右箭头？

像https://picasaweb.google.com/104706700962389688105/TheWave2011CoyoteButtesNorthVermilionCliffs?feat=featured#5621945010772287442

这样的例子

感谢。

一些得到鼠标位置的代码：

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;
}

Answer 1

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

在这里查找代码：

http://www.switchonthecode.com/tutorials/jquery-snippet-relative-mouse-position

Answer 2

这是一个开始，你需要设计箭头：http://jsfiddle.net/7cBwU/。

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