码迷,mamicode.com
首页 > Web开发 > 详细

jQuery实现的鼠标滑过切换图片代码实例

时间:2015-12-30 13:32:38      阅读:141      评论:0      收藏:0      [点我收藏+]

标签:

jQuery实现的鼠标滑过切换图片代码实例:
有时候网页需要这样的简单效果,那就是当鼠标滑过默认图片的时候,能够实现图片的切换,可能在实际应用中,往往没有这么简单,不过大家可以自行扩展一下,下面简单介绍一下次效果。
html静态代码如下:

<body> 
<img src="images/mayi.jpg" /> 
</body>

jquery切换代码:

$(document).ready(function(){ 
  var newImage=new Image();
  var oldImage=$(‘img‘).attr(‘src‘); 
  newImage.src=‘images/new.jpg‘; 
  $(‘img‘).hover(function(){ 
    $(‘img‘).attr(‘src‘,newImage.src); 
  }, 
  function(){ 
    $(‘img‘).attr(‘src‘,oldImage); 
  })
})

以上代码是实现切换的核心,原理很简单,就是为图片的注册hover事件处理函数,当鼠标悬浮的时候,修改图片的src属性值即可。
相关阅读:
1.attr()函数可以参阅jQuery的attr()方法一章节。
2.hover事件可以参阅jQuery的hover事件一章节。

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=9098

更多内容可以参阅:http://www.softwhy.com/jquery/

jQuery实现的鼠标滑过切换图片代码实例

标签:

原文地址:http://www.cnblogs.com/nulifendou/p/5088442.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!