var scaleTo = 0.5,
itemWidth = $('.scaleB').width(),
itemHeight = $('.scaleB').height()
;
function scaleThis(meausure) {
var output = meausure * scaleTo;
return output;
}
$('.scaleB').on({
'mouseover': function(event) {
$(this).css({
'width' : scaleThis(itemWidth) + 'px',
'height' : scaleThis(itemHeight) + 'px'
});
},
'mouseout': function(event) {
$(this).css({
'width' : itemWidth + 'px',
'height' : itemHeight + 'px'
});
}
});
.wrapper {
background-color: #cccccc;
}
.wrapper:after {
content: "normal";
}
.wrapperScale {
background-color: #dddddd;
}
.wrapperScale:after {
content: "wrapped";
}
.wrapper_jQuery:after {
content: "jQuery";
}
.wrapper div:nth-of-type(even),
.wrapperScale div:nth-of-type(even) {
background: blue;
}
.wrapper div:nth-of-type(odd),
.wrapperScale div:nth-of-type(odd) {
background: red;
}
.scale, .wrapperScale div, .scaleB {
width: 50px;
height: 50px;
}
.scale:hover, .wrapperScale:hover {
transform: scale(0.5);
transform-origin: top left;
}
这就是CSS转换实际上做的,它不会影响周围的元素,你可以尝试将DIV包装在另一个元素中并将缩放应用于该元素,但它不会影响外部的其他元素,只会影响内容,除此之外,您将不得不通过Java Script或js库(如jQuery)操纵DIV的实际大小.