鼠标划上图片放大

weixin_30468137

于 2016-05-12 10:56:00 发布

阅读量71

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/mbyund/p/5484827.html

本文详细介绍了如何使用jQuery实现图片的动态放大与缩小效果，并通过CSS进行样式优化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//大图
        $(".li_left img").on({
            "mouseover":function(){
                if(!$(this).is(":animated")){
                    $(this).animate({
                        width: '382px',
                        height: '272px',
                        marginLeft: '-25px',
                        marginTop: '-25px'
                    }, 400 );
                }
            },
            "mouseout":function(){
                    $(this).animate({
                        marginLeft: 0,
                        marginTop: 0,
                        width: '332px',
                        height: '222px'
                    }, 0 );
            }
        });


图片放大：
.CardLists .List .img img    {width: 100%;transition: all 0.8s;}
.CardLists .List:hover .img img {transform:scale(1.2);}

转载于:https://www.cnblogs.com/mbyund/p/5484827.html