JQuery Rotate 在 winforms WebBrowser 控件中无法正常工作答案

【问题标题】：JQuery Rotate isn't working correctly in winforms WebBrowser controlJQuery Rotate 在 winforms WebBrowser 控件中无法正常工作
【发布时间】：2014-09-20 00:19:23
【问题描述】：

我有一个使用 JQuery Rotate 制作的带有动态计时器的小网页。

它在 chrome、firefox 和 IE 中运行良好。问题是，我编写它是为了在 winforms 应用程序的 WebBrowser 控件内部工作。

通过 winforms 应用查看时，Z-layering 无法正常工作，并且旋转的图像在旋转时似乎实际上会调整大小，从而导致它们在叠加层下改变位置。

我正在尝试想出一种方法来在 win-forms 中仍然执行此控制，而无需制作一堆图像并仅删除部分以“动画”它。它必须有动态时间，所以我不能把它做成 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控件
以某种方式修复 javascript，使其不会在 winforms 浏览器中出错
想办法让浏览器与我的网页兼容

谁能指出这些解决方案之一？

【问题讨论】：

你能设置一个重现错误行为的小提琴吗？
是和否...小提琴将在所有浏览器中显示正确的行为，您必须实际拥有我编写的网页并在 .NET 表单应用程序中运行它才能看到问题。

标签： javascript jquery .net winforms

【解决方案1】：

经过一段时间的修补，我想出了一个解决方案。通过将行为不端的图像放在它们自己的 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();
            }
        }

【讨论】：