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控件中无法正常工作

回答

相关问题