水平滚动日历

Question

我使用了以下脚本 http://valums.com/scroll-menu-jquery/ 建立一个水平滚动的日历。

这是我的实现方式。

http://zifimusic.com/testing/horizontalCalendar.html

我预期的日历活动中有 90% 发生在当前日期的一两个月内。但是，我认为我需要提供选择任何月份的能力。 我打算使用 jQuery 日期选择器，但认为这种格式允许用户始终看到当前选择的日期，并允许我在一个有趣但相当简单的界面中标记需要注意的几周或几天，其中（当设置样式时）应该比适当的日历占用更少的高度。

我确定我以前见过这样的日历，但我找不到制作日历的脚本。

这个日历有两个问题。 1) 年份滚动到页面外，因此您看不到您正在查看的年份。 我已经添加了这一行

 var windowWidth=jQuery(window).width();
  div.mousemove（函数（e）{

    jQuery('li.year').each(function(){

    if(jQuery(this).offset().left>0 && jQuery(this).offset().left
但它似乎没有达到让年份保持可见并在日期滚动中有点对齐的预期效果。 

2) 滚动有点讨厌。它有时会跳得很远，我无法获得更流畅的动画。如果你进入左边的滚动区域，它需要一个巨大的跳跃，因为它使用窗口偏移量作为它应该滚动多远的定义。
我认为如果它只在用户向左/向右滚动时动画会更好，但我无法做到这一点。我试过限制滚动行进的距离，但是我没有得到整个日历。 

我真正在寻找的是在这样的东西上启用滚动的最佳方式。 

我应该说日历的使用实际上是用于选择周，而不是单独的日子，这再次使这种格式更容易，因为我可以直观地交替周以创建可见的分组。 
    

Answer 1

我将尝试在没有实际代码的情况下为您提供一些想法，因为我只登录了第二个 :)

1.，您可以将数据范围存储在一个或两个变量中，例如var startYear = 2009;，然后隐藏你用所有这些日期绘制的年份（我希望你理解 :D）添加一个绝对 div 来显示当前年份，你将在每次鼠标移动时重新计算。

如果您知道时间轴上有三年，并且您知道 offsetLeft（示例）在范围内（0；时间轴 div 宽度的 1/3），那么您知道，用户正在查看的那一年是最低，可以用$('year-in-view').html('<b>'+startYear+'</b>');之类的东西来绘制它

2.，您可以将先前的位置（再次:) ）存储在某个变量中，并检查 X 轴差异是否大于 100 像素（或 200 像素...您的选择），如果是（abs(current.x-last.x) > 100），以不同的方式为 div 设置动画，因此用户会明白他已经经历了两年。

希望对你有帮助， 亚当