JQuery Rotate在WinForms WebBrowser控件中無法正常工作

我有一個使用JQuery Rotate製作的動態定時器的小型網頁。JQuery Rotate在WinForms WebBrowser控件中無法正常工作

它在Chrome，Firefox和IE中很好用。問題是，我寫它在Winforms應用程序的WebBrowser控件內工作。

enter image description here

當通過WinForms應用程序看，Z-分層不能正常工作，而且紡紗的圖像似乎真正調整，因爲它們旋使他們改變覆蓋下的位置。

enter image description here

我試圖想出一個辦法還是做雙贏的形式這種控制，而不訴諸製作一些圖片，並只刪除部分爲「動畫」它。它必須有動態的時機，所以我不能把它變成一個gif。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript" src="jQueryRotateCompressed.js"></script> 
<script type="text/javascript"> 
    $(document).ready(function() { 
     $('#f').fadeTo(0, 0.6); 


     var OrigSecs = getParameterByName('Seconds'); 

     if (OrigSecs == null || OrigSecs == '') { 
      OrigSecs = 10; 
     } 

     OriginalMS = OrigSecs * 1000; 

     Start = +new Date(); 

     setInterval('rotate();', Interval); 
    }); 

    var OriginalMS = 0; 
    var Interval = 20; 
    var Start; 


    function rotate() { 


     var End = +new Date(); 

     var CurrentMS = End - Start; 

     var rotation = CurrentMS/OriginalMS * 360; 

     if (rotation < 361) { 
      $('#e').rotate(rotation); 
      if (rotation <= 180) { 
       $('#c').rotate(rotation); 
      } 
     } 

     if (rotation >= 180) { 
      $('#c').hide(); 
      $('#e').css('z-index', 3); 
      if (rotation >= 360) { 
       $('#e').hide(); 
      } 
     } 

    } 


    function getParameterByName(name) { 
     name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]"); 
     var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"), 
     results = regex.exec(location.search); 
     return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " ")); 
    } 
</script> 
</head> 
<body> 
    <div style="height:209px;width:209px;position:fixed;top:0px;left:0px;"> 
     <img id="a" src="Images/Lock.png" height="208px" style="position:fixed;top:0;left:0;z-index:0;" /> 
     <img id="b" src="Images/WhiteBot.png" height="208px" style="position:fixed;top:0;left:0;z-index:2;" /> 
     <img id="c" src="Images/BlueBot.png" height="208px" style="position:fixed;top:0;left:0;z-index:3;" /> 
     <img id="d" src="Images/WhiteTop.png" height="208px" style="position:fixed;top:2px;left:0;z-index:4;" /> 
     <img id="e" src="Images/BlueTop.png" height="208px" style="position:fixed;top:0;left:0;z-index:5;" /> 
     <img id="f" src="Images/LockOverlay.png" height="208px" style="position:fixed;top:0;left:0;z-index:6;" /> 
    </div> 
</body> 
</html>

我能想到的只有三種方式來解決這個問題：

找到一個WinForms控制，可以模仿這個網頁我做了EXACTLY
修正了一些JavaScript的這樣它就不會在winforms瀏覽器中搞砸了
找到一種方法使瀏覽器與我的網頁兼容

任何人都可以指向我的解決方案嗎？

來源

2014-09-20 Jrud

你能設置一個重現錯誤行爲的小提琴嗎？ – ariel 2014-09-20 03:41:48

是和不是......小提琴會在所有瀏覽器中顯示正確的行爲，您將不得不實際擁有我編寫的網頁並在.NET窗體應用程序中運行它以查看問題。 – Jrud 2014-09-22 14:38:21

經過一段時間的修補之後，我想出了一個解決方案。通過將行爲不端的圖像自身div標籤裏，那麼對他們同樣的z-index的交換機是否能夠正常工作WebBrowser控件：

HTML變化：

<body> 
    <div style="height:209px;width:209px;position:fixed;top:0px;left:0px;"> 
     <img id="a" src="Images/Lock.png" height="208px" style="position:fixed;top:0;left:0;z-index:0;" /> 
     <img id="b" src="Images/WhiteBot.png" height="208px" style="position:fixed;top:0;left:0;z-index:2;" /> 
     <div style="height:208px;position:fixed;top:0px;left:0px;z-index:3;overflow:hidden;"> 
      <img id="c" src="Images/BlueBot.png" height="208px" style="position:fixed;top:0;left:0;z-index:3;" /> 
     </div> 
     <img id="d" src="Images/WhiteTop.png" height="208px" style="position:fixed;top:2px;left:0;z-index:4;" /> 
     <div id="e2" style="height:208px;position:fixed;top:0px;left:0px;z-index:5;overflow:hidden;"> 
      <img id="e" src="Images/BlueTop.png" height="208px" style="position:fixed;top:0;left:0;z-index:5;" /> 
     </div> 
     <img id="f" src="Images/LockOverlay.png" height="208px" style="position:fixed;top:0;left:0;z-index:6;" /> 
    </div> 
</body>

的Javascript變化：

if (rotation >= 180) { 
      $('#c').hide(); 
      $('#e').css('z-index', 3); 
      $('#e2').css('z-index', 3); 
      if (rotation >= 360) { 
       $('#e').hide(); 
      } 
     }

來源

2014-09-22 16:17:31 Jrud

JQuery Rotate在WinForms WebBrowser控件中無法正常工作

回答

相關問題