您的位置:首页 > Web前端 > JQuery

jquery 视觉特效(当鼠标悬停时,放大小图片本身)

2012-11-22 09:17 633 查看
描述:

当鼠标划入小图标时,放大本身;划出时,恢复至原大小

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>


CSS:

#images{
/*使图片纵向显示*/
width: 150px;
margin: auto;
}
#images a img{
border: 1px solid black;
width: 50px;
height: 50px;
margin: 10px;

}


jquery:

$('#images a').hover(function(){
$(this).find('img').css({'width':'150px','height':'150px'});
}, function(){
$(this).find('img').css({'width':'50px','height':'50px'});
});
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: