jquery特效当鼠标悬停显示大图(animate方法)

发布时间:2019-11-23编辑:脚本学堂
有关jquery实现鼠标悬停时,图片显示大图的例子,鼠标hover每个小图片上,相应的在ID为large处显示大图,并且伴有渐隐渐显的效果,并介绍了jquery animate动画特效的实现方法。

效果:
鼠标hover每个小图片上,相应的在ID为large处显示大图。并且伴有渐隐渐显的效果。

如图:
<a href=http://www.jb200.com/jb/jquery/ target=_blank class=infotextkey>jquery</a>特效当鼠标悬停显示大图

1,html部分
 

复制代码 代码示例:
<div id="images">
<a href="pic1.jpg"><img src="pic1.jpg" alt="" /></a>
<a href="pic2.jpg"><img src="pic2.jpg" alt="" /></a>
<a href="pic3.jpg"><img src="pic3.jpg" alt="" /></a>
<a href="pic4.jpg"><img src="pic4.jpg" alt="" /></a>
<a href="pic5.jpg"><img src="pic5.jpg" alt="" /></a>
<a href="pic6.jpg"><img src="pic6.jpg" alt="" /></a>
</div>
<!--显示放大图片-->
<div><img id="large" src="" alt=""/></div>

2,css部分
 

复制代码 代码示例:
#images a img{
border: 1px solid black;
width: 50px;
height: 50px;
margin: 10px;
}

3、jquery部分
 

复制代码 代码示例:

$('#images a').hover(function(){
$imgpath = $(this).attr('href');
$('#large').stop(true,true).fadeTo('normal', 0, function(){
$(this).attr('src', $imgpath);
}).fadeTo('normal', 1);

}
);

也可以用animate:
 

复制代码 代码示例:

$('#images a').hover(function(){

$imgpath = $(this).attr('href');

$('#large').stop(true,true).animate({
'opacity':'0'
}, 'normal', function(){
$(this).attr('src', $imgpath);
$(this).animate({
'opacity':'1'
}, 'normal');
});

}
);