以后地位:首页 > 建站常识 > 列表

css 指向图片缩小缩放结果代码

点击: 次时候:2017/1/8关头词:上海网页建造 网站保护
img标签拔出图片每次缩小都因此左上角为基点 想改变为以图片的中间给基点缩小,经由过程CSS3的transform能够完成img{-webkit-transition: ease .2s;transition: ease .2s;-webkit-transfor

<a href=http://3djiangyin.com/tags/shanghaiwangyezhizuo/><strong>上海网页建造</strong></a>

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 排版

预定建站
收费供给网站优化
支付关头词