css 指向图片放大缩放效果代码

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实现平移动画效果示例代码