我一直在尝试使用jQuery创建旋转对象,而不使用任何其他插件。在这个link中,我看到了完美的方式使它跨浏览器而不需要太多计算。但是当它使用它时就像这样------
div#test {
behavior:url(resource/-ms-transform.htc);
-ms-transform:rotate(45deg);
background:#333;
color:#fff;
padding:5px 5px;
width:200px;
height:auto;
}
但是像这样的jQuery CSS --------
$(document).ready(function () {
$('div#test').css({
'-ms-transform':'rotate(45deg)'
});
});
它似乎没有在jQuery CSS模式下工作,但是使用正常的CSS模式它似乎工作得很好!任何人都可以解释为什么会发生这种情况并为我提供解决方案(注意:我不想要这个解决方案的任何jQuery插件!)。
这是我的整个页面------
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<script type="text/javascript" src="jquery-1.6.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('div#test').css({
'-ms-transform':'rotate(45deg)',
'-moz-transform':'rotate(45deg)',
'-o-transform':'rotate(45deg)',
'-webkit-transform':'rotate(45deg)',
'-khtml-transform':'rotate(45deg)'
});
});
</script>
<style type="text/css">
div#test {
behavior:url(resource/-ms-transform.htc);
background:#333;
color:#fff;
padding:5px 5px;
width:200px;
height:auto;
}
</style>
</head>
<body>
<div id="test">This is a test!</div>
</body>
</html>
答案 0 :(得分:1)
我不知道有问题的HTC文件(从中获取该文件的链接将是对该问题的方便编辑),但我熟悉其他HTC,例如CSS3Pie。
我对'行为'的工作方式的理解是,行为本身仅在元素触发样式表时运行 - 即通常仅在页面加载时,或者如果您更改元素的类。
使用CSS3Pie的例子,使其比以前完成相同工作的HTC更好的一个关键因素是它还设置了Javascript事件,这些事件可以观察任何变化的元素,并保持行为特征达到-日期。但这并不是大多数HTC所做的功能。
如果不了解更多有关此特定HTC的内容,我无法确定这是否是问题,但我的猜测是它完成初始转换工作后根本没有任何代码来跟踪项目。< / p>
如果是这种情况,您可能会发现调整-ms-transform
样式不会产生任何影响。在这种情况下,我可以建议的唯一选择是拥有一系列具有所需旋转的类,并使用JQuery在这些类之间切换;应该触发behavior
运行。
答案 1 :(得分:0)
我的jQuery有点生疏,但这不应该更像是这样吗?
$(document).ready(function () {
$('div#test').css('-ms-transform:rotate(45deg)');
});
(作为字符串,而不是json。)