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

Question

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

Answer 1

通过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，同理高度也一样，这样就实现了从中心扩展的效果。

Demo: http://runjs.cn/code/rkuutelp

Answer 2

这个是用的CSS3实现的吧，鼠标划上去的时候，图片放大1.2倍，离开的时候恢复，要给包着图片的盒子设置溢出隐藏，不然就撑开了。

Answer 3

你可以用scale（）具体的结构自己去码

Answer 4

使用CSS3的translate可以设置css3 translate origin，把变换坐标原点设置成图片中心点。

话说css3 translate origin似乎默认就是中心点，哈哈