我这个不是背景图 是img标签插入图 图片每次放大都是以左上角为基点 想转变为以图片的中心给基点放大
这个是用的CSS3实现的吧,鼠标划上去的时候,图片放大1.2倍,离开的时候恢复,要给包着图片的盒子设置溢出隐藏,不然就撑开了。
通过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
使用CSS3的translate可以设置css3 translate origin,把变换坐标原点设置成图片中心点。
话说css3 translate origin似乎默认就是中心点,哈哈
你可以用scale()具体的结构自己去码