jQuery实现翻滚图像（附代码）

翻滚图像只是通过鼠标光标移动到图像上来触发的一个图像交换(改变图片文件的路径)。换句话说，直接给mouseover鼠标事件分配一个图像交换。例如，假设你在页面上有一个ID为photo的图像。当鼠标光标移动到图像上时，我们希望出现一个新的图像。可以使用jQuery来完成，如下所示：

1. ＜script src="js/jquery-1.6.3.min.js"＞＜/script＞
2. ＜script＞
3. $（document）.ready（function（）{
4. var newPhoto=new Image（）；
5.  newPhoto.src='images/newImage.jpg'；
6. $（'#photo'）.mouseover（function（）{
7. $（this）.attr（'src'，newPhoto.src）；
8. }）；//end mouseover
9. }）；//end ready
10. ＜/script＞

第3行和第4行预载入了要交换的图像。第5行等待HTML载入，然后，JavaScript可以访问HTML的当前图像。代码剩下的部分给图像分配一个mouseover事件，以及改变图像的src属性以匹配新图像的函数。

既然滚动图像通常会在鼠标光标移开的时候恢复到旧的图像，我们也需要一个mouseout事件来换回图像。jQuery提供了自己的事件，叫做hover()事件，它负责mouseover和mouseout事件：

1. ＜script src="js/jquery-1.6.3.min.js"＞＜/script＞
2. ＜script＞
3. $（document）.ready（function（）{
4. var newPhoto=new Image（）；
5. newPhoto.src='images/newImage.jpg'；
6. var oldSrc=$（'#photo'）.attr（'src'）；
7. $（'#photo'）.hover（
8.  function（）{
9. $（this）.attr（'src'，newPhoto.src）；
10. }，
11.  function（）{
12. $（this）.attr（'src'，oldSrc）；
13. }）；//end hover
14. }）；//end ready
15. ＜/script＞

hover（）函数接收两个参数：第一个参数是一个函数，告诉浏览器当鼠标光标移动到图像上的时候做些什么；第二个参数也是一个函数，告诉浏览器当鼠标光标从图像上移开的时候做些什么。这段代码还添加了一个变量oldSrc，通过它来记录原始图像的src属性，也就是当页面载入的时候出现的图像的文件路径。

我们不仅限于翻滚图像，还可以为任何标签（包括一个链接、一个表单元素，甚至一个段落）添加一个hover（）函数。通过这种方式，页面上的任何标签都可以触发页面其他位置的一幅图像发生变化。例如，假设当鼠标光标移动到页面的＜h1＞标签上，我们希望更换一幅照片。假设目标图像和前面的例子相同。修改的代码如粗体所示：

1. ＜script src="js/jquery-1.6.3.min.js"＞＜/script＞
2. ＜script＞
3. $（document）.ready（function（）{
4. var newPhoto=new Image（）；
5. newPhoto.src='images/newImage.jpg'；
6. 6var oldSrc=$（'#photo'）.attr（'src'）；
7. $（'h1'）.hover（
8.  function（）{
9. $（'#photo'）.attr（'src'，newPhoto.src）；
10. }，
11.  function（）{
12. $（'#photo'）.attr（'src'，oldSrc）；
13. }）；//end hover
14. }）；//end ready
15. ＜/script＞

转载请注明出处：http://uphtm.com/js/165.html