img标签拔出图片每次缩小都因此左上角为基点 想改变为以图片的中间给基点缩小，经由过程CSS3的transform能够完成img{-webkit-transition: ease .2s;transition: ease .2s;-webkit-transfor

img标签拔出图片每次缩小都因此左上角为基点 想改变为以图片的中间给基点缩小，经由过程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，能够根据这个思绪去调剂。代码傍边须要增添 jquery-1.8.3.min.js  <script type="text/javascript" src="jquery-1.8.3.min.js"></script>

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，同理高度也一样，如许就完成了从中间扩大的结果。

上一篇：CSS多图排版消弭图片之间裂缝 下一篇：操纵CSS3完成平挪动画结果示例代码