Question

我正试图在某个事件上改变图片..说点击。它在Linux甚至XP中的chrome工作正常，但是Windows 7或8中的chrome无法正常显示。

如果您在Windows 7或8中打开firefox和chrome中的以下链接，您将知道我的问题是什么。

示例代码：

<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
<script type='text/javascript' src='jquery.js'></script>
<script type='text/javascript'>
function rtt() { 
  $('#logo').css('-webkit-transition', 'all 2s ease-in')
  $('#logo').css('-moz-transition', 'all 2s ease-in')
  $('#logo').css('-webkit-transform','rotate(270deg)');
  $('#logo').css('-moz-transform','rotate(270deg)');
}
</script>
</head>
<body>
<pre>
Click on the pic
</pre>
<img id='logo' src='logo.png' onclick='rtt()' style='position:absolute;'/>
</body>
</html>

还有其他人面对吗？

感谢您的时间!!!

Answer 1

您是否尝试过制作更多CSS而不是JS？我比我的动画更信任CSS而不是jQuery。像这样：

<style type="text/css">

  .logo {
    -webkit-transition:all 2s ease-in;
    -moz-transition: all 2s ease-in;
  }
  .logo.end {
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
  }

</style>
<script type='text/javascript'>

  $('#logo').click(function() {
    $(this).addClass('end');
  });

</script>

Windows 7中的Chrome CSS转换错误

1 个答案: