0

我正在开发一个 Windows HTML5/javascript 应用程序，我完成了 75% 的工作。

在应用程序中，一个部分包含两个垂直滚动的 div 元素。当我滚动 div 时，它应该与另一个 div 中的元素匹配并产生结果。

我试图让滚动 div 元素匹配但失败了。我放了我的应用程序的屏幕截图，你会明白的。

图片

在上面的屏幕中，第一个绿色框是一个滚动 div，另一个红色是另一个。在中心靠近“+”的 div 中的元素匹配并在下一个玫瑰框中产生结果。

请指导我通过提供解决方案来完成应用程序，以使用 HTML5 CSS3 滑块匹配不同 div 中的元素。

提前致谢

我用于此应用程序的代码是

<!DOCTYPE html>
<html>
<head>
    <title>Uyirmei</title>
    <link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
<script src="//Microsoft.WinJS.1.0/js/base.js"></script>
<script src="//Microsoft.WinJS.1.0/js/ui.js"></script>
    <!-- Uyireluthu References-->
<link href="/css/uyirmei.css" rel="stylesheet" />
<script src="/js/uyirmei.js"></script>
</head>
<body>

    <img src="images/uyirmei.png"  id="full-screen-background-image" />
         <div class="pic-row" style="position:absolute; left: 118px; top: 181.5px;">
            <img src="images/mei/off/01.png" />
            <img src="images/mei/off/02.png" style="width: 137px; height: 146px;" />
            <img src="images/mei/off/03.png" />
            <img src="images/mei/off/04.png" />
            <img src="images/mei/off/05.png" />
            <img src="images/mei/off/06.png" />
            <img src="images/mei/off/07.png" />
            <img src="images/mei/off/08.png" />
            <img src="images/mei/off/09.png" />
            <img src="images/mei/off/10.png" />
            <img src="images/mei/off/11.png" />
            <img src="images/mei/off/12.png" />
            <img src="images/mei/off/13.png" />
            <img src="images/mei/off/14.png" />
            <img src="images/mei/off/15.png" />
            <img src="images/mei/off/16.png" />
            <img src="images/mei/off/17.png" />
            <img src="images/mei/off/18.png" />
         </div>

    <div class="pic-row1" style="position:absolute; left: 491.5px; top: 201px;">
        <img src="images/uyir/off/01.png" style="width: 138px; height: 116px;" />
        <img src="images/uyir/off/02.png" style="width: 158.5px; height: 137px;" />
        <img src="images/uyir/off/03.png" style="width: 144px; height: 128px;" />
        <img src="images/uyir/off/04.png" />
        <img src="images/uyir/off/05.png" />
        <img src="images/uyir/off/06.png" />
        <img src="images/uyir/off/07.png" />
        <img src="images/uyir/off/08.png" />
        <img src="images/uyir/off/09.png" />
        <img src="images/uyir/off/10.png" />
        <img src="images/uyir/off/11.png" />
        <img src="images/uyir/off/12.png" />
        <img src="images/uyir/off/13.png" />
    </div>
    <a href="default.html">
      <img style="position: absolute; width: 200px; height: 200px; left: -31.5px; top: -45px;" src="images/h_on.png">
    </a>
</body>
</html>
4

0 回答 0