jQuery实现的鼠标滑过切换图片代码实例:
有时候网页需要这样的简单效果,那就是当鼠标滑过默认图片的时候,能够实现图片的切换,可能在实际应用中,往往没有这么简单,不过大家可以自行扩展一下,下面简单介绍一下次效果。
html静态代码如下:
有时候网页需要这样的简单效果,那就是当鼠标滑过默认图片的时候,能够实现图片的切换,可能在实际应用中,往往没有这么简单,不过大家可以自行扩展一下,下面简单介绍一下次效果。
html静态代码如下:
<body>
<img src="images/mayi.jpg" />
</body>jquery切换代码:
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属性值即可。