网站开发积累（鼠标控制图片左右移动）

在最近的网站开发里，需要通过鼠标的位置来控制图片的左右平滑移动，说直接点就是：有一个比较长的图片，不能完全显示在窗口，当鼠标放在窗口右侧的时候，图片会向右移；当鼠标放在窗口左边的时候，图片会向左移；当鼠标放在窗口中间位置的时候，图片就不移动。根据一边查资料一边进行修改实验，终于给整出来了，现在将相关过程记录如下。

（一）首先，是找到一篇博客，题目是“js控制图片左右平滑移动”，里面列出了他控制图片移动的源代码，为了尊重原博主的知识产权，现列出原博客网址（http://hi.baidu.com/kongcheng2012/item/c7707ef497163eda43c36a1e）。这篇博客实现的功能跟我想要的效果已经很像了，他的主要思想是通过两个div实现了，设置上层div为overflow:hidde，相当于一个窗口，对下层div实现裁剪，只显示窗口以内的部分内容；而下层div里就是我们需要左右移动的图片，通过左右滚动，从而实现了图片的左右移动。不过他离我实际需要的效果还是有点点不一样，他是设置了两个button，一个是“向左”，一个是'向右"，通过button.onmouseover（）来检测鼠标是否移到button上了，当鼠标移动到“向左”按钮上时，则通过调用向左滚动的代码，来实现图片向左移动；当鼠标移动到“向右”按钮上时，则通过调用向右滚动的代码，来实现图片向右移动；当鼠标移动到图片上时，则图片不动。

（二）虽然博主通过“向左”、“向右”两个按钮，实现了图片的左移和右移，但我想要的是当鼠标放在图片左边时，则左移；当鼠标放在图片右边时，则右移；当放中间时则不动。很明显，假如我得到了鼠标在图片中间的相对位置，那么我就可以判断鼠标是处于左半部分还是有半部分，然后就可以跟博主的代码结合起来了，达到我想要的效果。

于是我下一步要做的就是“通过js获取鼠标在图片中的相对坐标”。还是在网上搜资料，代码如下：

 
 
 

  
  
  <script type="text/javascript">
 
 
 
window.onload = func