开发者社区> 问答> 正文

图片每次 鼠标滑入图片放大 鼠标离开 图片恢复默认大小

screenshot
我这个不是背景图 是img标签插入图 图片每次放大都是以左上角为基点 想转变为以图片的中心给基点放大

展开
收起
杨冬芳 2016-06-12 11:33:08 2420 0
1 条回答
写回答
取消 提交回答
  • IT从业

    通过CSS3的transform可以实现。

    img{
        -webkit-transition: ease .2s;
        transition: ease .2s;
        -webkit-transform-origin:50% 50%; /* transform-origin默认值就是居中,可以不加 */
        transform-origin:50% 50%; /* transform-origin默认值就是居中,可以不加 */
    }
    .hover{
        -webkit-transform: scale(1.2); /*放大1.2倍*/
        transform: scale(1.2); /*放大1.2倍*/
    }
    
    $('img').hover(function(){
        $(this).addClass('hover')
    },function(){
        $(this).removeClass('hover')
    });

    兼容IE8的方法。既然不能用transform,那么只能从position入手了,你在增加宽度的同时,需要对应减半top,left值,就能保证在像从中间开始伸缩一样。我写了个demo,可以按照这个思路去调整。

    img{
        width:100px;
        position: absolute;
        top:50px;
        left:50px;
    }
    $('img').hover(function(){
        $(this).animate({width:"150px",top:"25px",left:"25px"},200)
    },function(){
        $(this).animate({width:"100px",top:"50px",left:"50px"},200)
    });

    原理可以看下面的图片,原本你的宽度想要增加50px,那么便会像右扩展50px,所以通过left减小25px,所以就变成了左边扩展25px,右边扩展25px,同理高度也一样,这样就实现了从中心扩展的效果。
    screenshot

    2019-07-17 19:33:36
    赞同 展开评论 打赏
问答地址:
问答排行榜
最热
最新

相关电子书

更多
3D动画的菜谱式灯光与云渲染 立即下载
低代码开发师(初级)实战教程 立即下载
阿里巴巴DevOps 最佳实践手册 立即下载