2012-07-27 140 views
0

我想轉換一些事件上的圖片..說點擊。它在linux甚至XP中的chrome中工作正常,但在Windows 7或8中的chrome不能正確顯示它。Windows 7中的Chrome CSS轉換錯誤

如果你在firefox中打開下面的鏈接,在windows 7或8中打開chrome,你會知道我的問題是什麼。

http://blacksheepinc.in/temp.php

示例代碼:

<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> 

任何人面對它?

謝謝你的時間!

回答

1

你有沒有試過使這個更多的CSS和更少的JS?我比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> 
+0

並刪除「onclick」事件當然 – moettinger 2012-07-27 19:26:25

+0

謝謝moettinger !!! – user1558399 2012-09-17 12:43:54