0

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

这是我实现它的方式。

http://zifimusic.com/testing/horizo​​ntalCalendar.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<windowWidth){
               jQuery('h1',this).scrollLeft(offset().left-windowWidth);

但它似乎并没有达到让年份保持可见并且在日期滚动中有点对齐的预期效果。

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

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

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

4

1 回答 1

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 设置动画，所以用户会明白，他搬了两年。

希望它有帮助，亚当

于 2010-01-16T15:08:06.823 回答