transform #83
Description
Module.extend('Util', function(util) {
var dom = util.DOM;
var setOriginOffset = function(el) {
el.IESUCKS = {
width : el.offsetWidth,
height: el.offsetHeight
};
};
var transformKey = function() {
style = document.body.style;
var keys = ['transform', 'msTransform', 'MozTransform', 'webkitTransform', 'OTransform'];
for (var i = keys.length; i--;) {
if (keys[i] in style) {
return keys[i];
}
}
return null;
}();
dom.rotateAndScale = function(el, angle, scale) {
scale = scale || 1;
angle = angle || 0;
if(transformKey) {
var rs = 'rotate(' + angle + 'deg) scale(' + scale + ')';
el.style[transformKey] = rs;
}else { ////ie8- Matrix filter .
var filterType = 'DXImageTransform.Microsoft.Matrix';
var fullFilterType = 'progid:' + filterType;
var currentFilter = el.style.filter;
var filterIndex = currentFilter.indexOf(fullFilterType);
if(currentFilter == '') {
el.style.filter = fullFilterType;
}else if (filterIndex < 0) {
el.style.filter = currentFilter + ' ' + fullFilterType;
}
var filters = el.filters;
var rad = angle * Math.PI / 180;
var sinA = Math.sin(rad);
var cosA = Math.cos(rad);
var m11 = cosA * scale;
var m12 = -sinA * scale;
var m21 = sinA * scale;
var m22 = cosA * scale;
filters.item(filterType).M11 = m11;
filters.item(filterType).M12 = m12;
filters.item(filterType).M21 = m21;
filters.item(filterType).M22 = m22;
filters.item(filterType).SizingMethod = "auto expand";
if (!el.IESUCKS) {
setOriginOffset(el)
}
var offset = el.IESUCKS;
var originWidth = offset.width;
var originHeight = offset.height;
var scaleOffsetWidth = (originWidth - scale * originWidth) / 2 / scale;
var scaleOffsetHeight = (originHeight - scale * originHeight) / 2 / scale;
var coefficient = 14.2;
var fixedWidth = originHeight / coefficient / scale;
var fixedHeight = originWidth / coefficient / scale;
fixedWidth = fixedheight = 0;
//mlgbd ie 的修正值.都要考虑scale的影响.所以,所有修正系数都要和scale重新计算后再进行修正.
el.style.marginLeft = (originWidth - el.offsetWidth) / 2 + scaleOffsetWidth - fixedWidth + 'px';
el.style.marginTop = (originHeight - el.offsetHeight) / 2 + scaleOffsetHeight - fixedHeight + 'px';
}
};
});
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>sidebar</title>
<style>
.p{
width : 200px;height:200px;font-size:1px;
position:absolute; border:solid 1px #000;
}
#fuck{
border:none;width:100px;height:100px;position:absolute;top:50px; left:50px;background:red
}
</style>
</head>
<body>
<div class="p" style="left:400px;top:400px;">
<div id="fuck" class="p" style="right:50px;bottom:50px">1</div>
</div>
<script>
var transformKey = function () {
style = document.body.style;
var keys = ['transform', 'msTransform', 'MozTransform', 'webkitTransform', 'OTransform'];
for(var i = keys.length; i--; ){
if(keys[i] in style){
return keys[i];
}
}
return null;
}();
var setOriginOffset = function(el) {
if (!el.IESUCKS) {
el.IESUCKS = {
width : el.offsetWidth,
height : el.offsetHeight
};
}
};
var rotateAndScale = function (el, angle, scale) {
scale = scale || 1;
angle = angle || 0;
var rs = 'rotate(' + angle + 'deg) scale(' + scale + ')';
if(transformKey){
el.style[transformKey] = rs;
}else{ ////ie8- Matrix filter .
var filterType = 'DXImageTransform.Microsoft.Matrix';
var fullFilterType = 'progid:' + filterType;
var currentFilter = el.style.filter;
var filterIndex = currentFilter.indexOf(fullFilterType);
if(currentFilter == ''){
el.style.filter = fullFilterType;
}else if(filterIndex < 0){
el.style.filter = currentFilter + ' ' + fullFilterType;
}
var filters = el.filters;
var rad = angle * Math.PI / 180;
var sinA = Math.sin(rad);
var cosA = Math.cos(rad);
var m11 = cosA * scale;
var m12 = -sinA * scale;
var m21 = sinA * scale;
var m22 = cosA * scale;
filters.item(filterType).M11 = m11;
filters.item(filterType).M12 = m12;
filters.item(filterType).M21 = m21;
filters.item(filterType).M22 = m22;
filters.item(filterType).SizingMethod="auto expand";
if(!el.IESUCKS){
setOriginOffset(el)
}
var offset = el.IESUCKS;
var originWidth = offset.width;
var originHeight = offset.height;
var scaleOffsetWidth = (originWidth - scale * originWidth) / 2 / scale;
var scaleOffsetHeight = (originHeight - scale * originHeight ) / 2 / scale;
var coefficient = 14.2;
var fixedWidth = originHeight / coefficient / scale;
var fixedHeight = originWidth / coefficient / scale;
//mlgbd ie 的修正值.都要考虑scale的影响.所以,所有修正系数都要和scale重新计算后再进行修正.
var marginLeft = (originWidth - el.offsetWidth)/2 + scaleOffsetWidth - fixedWidth;
var marginTop = (originHeight - el.offsetHeight)/2 + scaleOffsetHeight - fixedHeight;
el.style.marginLeft = marginLeft + 'px';
el.style.marginBottom = -marginTop + 'px'
}
};
var el = document.getElementById('fuck');
var angle = 0;
document.onclick = function () {
timer = setInterval(function () {
angle += 10;
if(angle === 360){
angle = 0;
clearInterval(timer);
}
rotateAndScale(el, angle, 1);
}, 50)
};
</script>
</body>
</html>然后,更傻逼的地方在于..ie8 和ie6的行为是相反的.....
贵妃】教主Franky
``html
<!doctype html>
<div class="p" style="left:400px;top:400px;">
<div id="fuck" class="p" style="right:50px;bottom:50px">1</div>
</div>
<script>
var transformKey = function () {
style = document.body.style;
var keys = ['transform', 'msTransform', 'MozTransform', 'webkitTransform', 'OTransform'];
for(var i = keys.length; i--; ){
if(keys[i] in style){
return keys[i];
}
}
return null;
}();
var setOriginOffset = function(el) {
if (!el.IESUCKS) {
el.IESUCKS = {
width : el.offsetWidth,
height : el.offsetHeight
};
}
};
var rotateAndScale = function (el, angle, scale) {
scale = scale || 1;
angle = angle || 0;
var rs = 'rotate(' + angle + 'deg) scale(' + scale + ')';
if(transformKey){
el.style[transformKey] = rs;
}else{ ////ie8- Matrix filter .
var filterType = 'DXImageTransform.Microsoft.Matrix';
var fullFilterType = 'progid:' + filterType;
var currentFilter = el.style.filter;
var filterIndex = currentFilter.indexOf(fullFilterType);
if(currentFilter == ''){
el.style.filter = fullFilterType;
}else if(filterIndex < 0){
el.style.filter = currentFilter + ' ' + fullFilterType;
}
var filters = el.filters;
var rad = angle * Math.PI / 180;
var sinA = Math.sin(rad);
var cosA = Math.cos(rad);
var m11 = cosA * scale;
var m12 = -sinA * scale;
var m21 = sinA * scale;
var m22 = cosA * scale;
filters.item(filterType).M11 = m11;
filters.item(filterType).M12 = m12;
filters.item(filterType).M21 = m21;
filters.item(filterType).M22 = m22;
filters.item(filterType).SizingMethod="auto expand";
if(!el.IESUCKS){
setOriginOffset(el)
}
var offset = el.IESUCKS;
var originWidth = offset.width;
var originHeight = offset.height;
var scaleOffsetWidth = (originWidth - scale * originWidth) / 2 / scale;
var scaleOffsetHeight = (originHeight - scale * originHeight ) / 2 / scale;
var coefficient = 14.2;
var fixedWidth = originHeight / coefficient / scale;
var fixedHeight = originWidth / coefficient / scale;
//mlgbd ie 的修正值.都要考虑scale的影响.所以,所有修正系数都要和scale重新计算后再进行修正.
var marginLeft = (originWidth - el.offsetWidth)/2 + scaleOffsetWidth - fixedWidth;
var marginTop = (originHeight - el.offsetHeight)/2 + scaleOffsetHeight - fixedHeight;
// el.style.marginLeft = marginLeft + 'px';
//el.style.marginTop = marginTop + 'px'
}
};
var el = document.getElementById('fuck');
var angle = 0;
document.onclick = function () {
timer = setInterval(function () {
angle += 10;
if(angle === 360){
angle = 0;
clearInterval(timer);
}
rotateAndScale(el, angle, 1);
}, 50)
};
</script>
【贵妃】教主Franky
2014/4/6 12:27:09
你看 现在ie6 往左上偏 ,ie8往右下偏
就是因为用的right, bottom定位...