私は 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>