Цитата:
жаль, что zoom изменяет размер не векторно, а расторно. есть ли способ с помощью фильтров изменить размер векторным образом? </оффтопик> |
я тут http://webandad.com/ использовал zoom и scale вроде нормально, единственное проблема в ИЕ, то что zoom размер меняет к центру а scale к левому-верхнему углу. Или наоборот, точно не помню уже
|
devote, у него и с фильтром поворота тоже беда - он по-другому поворачивает*. поэтому поворот "как во всех браузерах" можно сделать только тогда, когда есть под рукой элемент, а не CSSStyleDeclaration :(. и это печально.
*величина "кривизны" зависит от размеров элемента PS. что-то я вспомнил про expressions... хм, может, еще получится сделать нормальный поворот, не имея на руках элемент. |
Цитата:
Работает во всех браузерах кроме ИЕ8
<style type="text/css">
#to_rotate {
position: absolute;
width: 100px;
height: 100px;
background-color: #f00;
filter:expression("progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand',M11="+(this.style.Rotate?1:(this.style.Rotate=0),(this.xWidth?1:(this.xWidth=this.offsetWidth,this.xHeight=this.offsetHeight,1)),(this.style.marginLeft=(-Math.round((this.offsetWidth-this.xWidth)/2))+"px"),(this.style.marginTop=(-Math.round((this.offsetHeight-this.xHeight)/2))+"px"),Math.cos((this.style.Rotate*Math.PI)/180.0))+",M12="+(-(Math.sin((this.style.Rotate*Math.PI)/180.0)))+",M21="+(Math.sin((this.style.Rotate*Math.PI)/180.0))+",M22="+(Math.cos((this.style.Rotate*Math.PI)/180.0))+")");
}
</style>
<div style="position: relative;">
<div id="to_rotate">test text</div>
</div>
<script type="text/javascript">
setInterval(function() {
var el = document.getElementById('to_rotate');
// специальное свойство для IE ниже восьмой версии
el.style.Rotate = (el.style.Rotate||0) + 2;
// для все остальных
el.style.OTransform =
el.style.MozTransform =
el.style.WebkitTransform =
el.style.msTransform =
el.style.transform = "rotate(" + el.style.Rotate + "deg)";
}, 50);
</script>
|
если кому то нужно кросс-браузерный rotate с помощью скриптов, то вот:
<style type="text/css">
#to_rotate {
position: relative;
width: 100px;
height: 100px;
background-color: #f00;
}
</style>
<div id="to_rotate">test text</div>
<script type="text/javascript">
function rotateElem( elem, deg ) {
var style = elem.style;
if ( elem.ownerDocument && elem.ownerDocument.defaultView ) {
style = elem.ownerDocument.defaultView.getComputedStyle( elem, null );
} else if ( elem.currentStyle ) {
style = elem.currentStyle;
}
if ( eval("/*@cc_on @_jscript_version;@*/") <= 5.8 ) {
var rad = ( deg * Math.PI ) / 180.0,
cos = Math.cos(rad),
sin = Math.sin(rad);
elem.originalWidth = elem.originalWidth || elem.offsetWidth;
elem.originalHeight = elem.originalHeight || elem.offsetHeight;
elem.style.filter = style.filter.replace( /progid:DXImageTransform.Microsoft.Matrix\([^)]*\)[;]?/g, "" ) +
"progid:DXImageTransform.Microsoft.Matrix("+
"sizingMethod='auto expand',M11="+cos+",M12="+(-sin)+",M21="+sin+",M22="+cos+")";
elem.style.marginLeft = -Math.round( ( elem.offsetWidth - elem.originalWidth ) / 2 );
elem.style.marginTop =- Math.round( ( elem.offsetHeight - elem.originalHeight ) / 2 );
} else {
var Transform = (
style.transform ||
style.OTransform ||
style.MozTransform ||
style.WebkitTransform ||
style.msTransform
)+"";
elem.style.OTransform =
elem.style.MozTransform =
elem.style.WebkitTransform =
elem.style.msTransform =
elem.style.transform =
Transform.replace( /(none|[\s]?(rotate|matrix)\([^)]*\))/g, "" ) + " rotate(" + deg + "deg)";
}
}
setInterval((function(){
var start = 0;
return function() {
rotateElem( document.getElementById('to_rotate'), start+=2 );
}
})(), 50);
</script>
работает во всех браузерах. |
Цитата:
тогда.. придется только для него получать список элементов (слава Богу, он поддерживает querySelectorAll - кстати, не без глюков?). получается объёмненько, если так ветвиться - три раза. но это уже лучше, чем ничего :) |
Цитата:
|
Deff, спасибо,страница уменьшилась : )
А можно задать какой то определенный размер страницы в % или px???? Теперь объясните пожалуйста как вставить эту страницу в DIV??? Если источником будет являться страница с php, в которую я буду вставлять свою html-страницу, то что изменится??? Если можно то привидите пожалуйста пример способа реализации. Очень благодарен за ответы.:) |
Цитата:
|
Раед, да, но только когда я вставляю страницу уменьшенную в iframe, то размер опять становиться прежним : (
|
| Часовой пояс GMT +3, время: 04:18. |