0

私は Windows HTML5/javascript アプリを開発しており、その作業の 75% を完了しました。

アプリでは、セクションに垂直方向にスクロールする 2 つの div 要素が含まれています。div をスクロールすると、他の div の要素と一致し、結果が生成されます。

スクロールする div 要素を一致させようとしましたが、失敗しました。アプリのスクリーンショットを置いたので、理解していただけると思います。

画像

上記の画面では、最初の緑色のボックスが 1 つのスクロール div であり、もう 1 つの赤いボックスが互いに関連しています。中央の「+」に近づくと、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