JQuery/JavaScript日历滑块_Javascript_Jquery_Html_Css

JQuery/JavaScript日历滑块

javascript jquery html css

JQuery/JavaScript日历滑块,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我目前正在编程一个日历，并有一个想法，设计它像一个滑块比如：选定的日期应以视口为中心，并应在稍后的不同事件中显示在下面我已经创建了一个flex box，并为每天创建了一个圆角div容器，并将父容器设置为溢出，以隐藏不相关的日期带JavaScript的HTML： <!DOCTYPE html> <html> <head> <title><%= title %></title> <link re

我目前正在编程一个日历，并有一个想法，设计它像一个滑块

比如：

选定的日期应以视口为中心，并应在稍后的不同事件中显示在下面

我已经创建了一个flex box，并为每天创建了一个圆角div容器，并将父容器设置为溢出，以隐藏不相关的日期

带JavaScript的HTML：

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
    <script src="/javascripts/jquery-1.11.3.min.js"></script>
  </head>
  <body>
    <section id="top_container">
    <div id="date_rotation">
    </div>
    </section>
    <nav id="menu_bar">
    </nav>
    <section id="event_container">
      jj
    </section>
    <script>

      // Variables

      var date = new Date();
      var daynames = ["Sonntag","Montag","Dienstag","Mittwoch","Donnerstag","Freitag","Samstag"]
      var monthnames = ["Januar","Februar","März","April","Mai","Juni","Juli","August","September","Oktober",
          "November","Dezember"];
      var calStart = new Date(2015, 4, 28);
      var selectedYear = calStart.getFullYear();
      var selectedMonth = calStart.getMonth();
      var selectedDay = calStart.getDate();
      var calLength = 2000;

      //Functions

      function daysofMonths(myyear,mymonth) {  
        var monthStart = new Date(myyear, mymonth, 1);
        var monthEnd = new Date(myyear, mymonth + 1, 1);
        var monthLength = (monthEnd - monthStart) / (1000 * 60 * 60 * 24);
        return monthLength;
        }

      // Creating Calender

          for (var i=0; i <= calLength; i++) {
            currentDate = new Date(selectedYear, selectedMonth, selectedDay);
            if (selectedDay > daysofMonths(selectedYear,selectedMonth)) {
              selectedDay = 1;
              selectedMonth ++;
                if (selectedMonth > 11) {
                  selectedMonth = 0;
                  selectedYear ++;
                }
              $("#date_rotation").append('<div class="date_picker" id="' + selectedDay + selectedMonth + selectedYear + '"><p>' + selectedDay + monthnames[selectedMonth] + '<br>' + daynames[currentDate.getDay()] + ' ' + selectedYear + '</p></div>');
              console.log("First");
            } else {
              $("#date_rotation").append('<div class="date_picker" id="' + selectedDay + selectedMonth + selectedYear + '"><p>' + selectedDay + monthnames[selectedMonth] + '<br>' + daynames[currentDate.getDay()] + ' ' + selectedYear + '</p></div>');
              selectedDay ++;
              console.log("Secound");
            }
          }

      // Rotate Calender

      // Get Position relative to Container

      $(".date_picker").click(function( event ) {
        var thisPos = $(this).position();
        var parentPos = $(this).parent().position();
        var x = thisPos.left - parentPos.left;
        var y = thisPos.top - parentPos.top;
        var width = $("#date_rotation").width();
        $("#menu_bar").text(x + "px, " + y + "px," + width + "px"); 
    </script>
  </body>
</html>

我试图归档的是将单击的div与类日期选择器放在一起，从而移动整个父溢出容器

我完全卡住了，不知道如何准确地移动父容器，直到选定的子项完全居中为止=/Id希望有一个动画解决方案或提示如何实现我的目标

非常感谢您提供一些提示/答案=）

解决方案：

$(".date_picker").click(function( event ) {
        var thisPos = $(this).position();
        var parentPos = $(this).parent().position();
        var x = thisPos.left - parentPos.left;
        var y = thisPos.top - parentPos.top;
        var width = $("#date_rotation").width();
        $("#menu_bar").text(x + "px, " + y + "px," + width + "px");

        //Center Selected child-items

        var selectedDate = $(document).width() / 2;
        var selectedLeft = $(this).position().left
        console.log(selectedLeft);
        var dateCentering = selectedLeft - selectedDate;
            dateCentering += 150;
        $("#date_rotation").animate({
          'left' : -dateCentering
          });
      });

我能想到的是计算居中元素的左偏移量（l-cen），当前元素的左偏移量（l-curr），然后计算差值=l-cen-l-curr；（居中元素减去你想去的那个…所以，如果它在左边，你得到一个正值，如果它在右边，你得到一个负值）。在#日期#旋转时将差异应用于转换（如果它是右的，则为负值，则div将向左移动）。这应该行得通。从技术上讲，您也可以在第一个datepicker元素上应用转换

获取像您提供的图像中的元素的旋转将更加棘手，但基于相同的原则。

谢谢，您给了我正确的提示=）在底部添加了我的解决方案。很高兴我能提供帮助！完成后请告诉我，我很想看到它的实际应用

$(".date_picker").click(function( event ) {
        var thisPos = $(this).position();
        var parentPos = $(this).parent().position();
        var x = thisPos.left - parentPos.left;
        var y = thisPos.top - parentPos.top;
        var width = $("#date_rotation").width();
        $("#menu_bar").text(x + "px, " + y + "px," + width + "px");

        //Center Selected child-items

        var selectedDate = $(document).width() / 2;
        var selectedLeft = $(this).position().left
        console.log(selectedLeft);
        var dateCentering = selectedLeft - selectedDate;
            dateCentering += 150;
        $("#date_rotation").animate({
          'left' : -dateCentering
          });
      });