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

描述:

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

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'});
                });

 

 

 

 

posted @ 2012-11-22 09:17  蚊子吃青蛙  阅读(335)  评论(0编辑  收藏  举报