鼠标监听DIV一半区域

Question

偶尔看看picasa画廊，发现里面有一个左右（上一页、下一页）的按钮。可以根据DIV一半面积进行鼠标监听。
鼠标在DIV偏左部分时，左箭头ADDCLASS；偏右部分时，右箭头ADDCLASS；
请问，这种鼠标监听DIV一半区域，是怎么实现的？
偶只会对一整个DIV进行处理。随便贴一个picasa的相册，做示例。
https://picasaweb.google.com/115067876375080098238/MaldivesManta#5282980803043633154

Answer 1

肯定是根据目标div又弄了两个透明的div在两边 。

Answer 2

就如腾讯相册之类的。  你可以用firebug看看到底是怎么回事情，并不是把事件区分为左边右边，而上这个里面还有两个html元素各占一边，事件在他们身上

Answer 3

1楼做法比较简单，但是要考虑IE下的index……
2楼做法比较复杂，PICASA可能就是采用这个，它的JS技术背靠GOOGLE，看不懂。说起腾讯，倒的确也是是酱紫的。而且它的JS代码很容易看懂。这就去了~~

Answer 4

不可以根据div的大小来判断么?

Answer 5

@qianjin036a， 怎么判断？还没想到。也是判断鼠标坐标？

Answer 6

最近又找了些文档，做了个用offsetWidth判别DIV区域的代码。
但是offsetWidth在jquery 1.62min下不起作用，一定要下载完整版的jquery.js，而且下面的代码在FIREFOX里不起作用。继续请教大家。  <script type='text/javascript' src='jquery.js'></script>  
  <style type='text/css'> 
    #thediv {
    width: 300px;
    height: 300px;
    background-color: red;
}
  </style> 
  
  <script type='text/javascript'> 
  $(window).load(function(){
  $('#thediv').mousemove(function(e) {
    if(e.offsetWidth < 150) {
        $('#thediv').html('show first arrow');
    } else {
        $('#thediv').html('show second arrow');
    }
}).mouseout(function() {
    $('#thediv').html('');
});
  });
  </script>   <div id="thediv"></div> 

Answer 7

还是用监听鼠标坐标吧，可以利用类似于这样JS代码获取鼠标位置，然后再判断添加左右按钮：function rPosition(elementID, mouseX, mouseY) {
  var offset = $('#'+elementID).offset();
  var x = mouseX - offset.left;
  var y = mouseY - offset.top;  return {'x': x, 'y': y};
}