Question

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

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

enter image description here

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

enter image description here

我正试图想出一种方法来在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浏览器中搞砸
找到一种方法使浏览器与我的网页兼容

有人能指出这些解决方案之一吗？

Answer 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();
            }
        }

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

1 个答案: