Question

我有从MySQL和PHP中提取数据的事件日历，以便在页面上显示它。现在，客户希望当人们打开页面时，它会滑动到下一个即将发生的事件。过去的日期仍然存在，但下滑即将到来。

以下是实例：http://www.sv-filipjakov.hr/en/calendar-events。

这是日期代码：

<article class="KalendarDogadjanjaBox KalendarCrveni">
    <div class="KalendarDogadjanjaBoxDatum">
        <div class="KalendarDogadjanjaBoxDatum1">21. June</div>
        <div class="KalendarDogadjanjaBoxDatum2"> 09h</div>
    </div>
    <div class="KalendarDogadjanjaBoxOpis">
        <h3>World music day, Sv. Filip i Jakov</h3>
        <p>:)</p>
    </div>
    <div class="clear"></div>
</article>

也许只是约会我的文章的数据属性，格式化它，然后用jQuery滑动？有人有什么建议吗？

Answer 1

这是我的解决方案。我在文章中添加了一个日期作为id：

    <article id="23-05-15" class="KalendarDogadjanjaBox ">
      <div class="KalendarDogadjanjaBoxDatum">
        <div class="KalendarDogadjanjaBoxDatum1">23. May</div>
        <div class="KalendarDogadjanjaBoxDatum2">23.-31.05 h</div>
      </div>
      <div class="KalendarDogadjanjaBoxOpis">
                  <a class="right" style=" position:relative; top:10px; right:-20px;" href="/slike/18052015_6377721205.jpg" rel="prettyPhoto[100]" title="Izložba radova 8.Likovne kolonije  „Svibanj 2015“"><img style="width:130px; height:100px;" src="/slike/male/18052015_6377721205.jpg"> </a>
                <h3>Izložba radova 8.Likovne kolonije  „Svibanj 2015“</h3>
        <p>Likovna kolonija Maj 2015 Turanj , okuplja umjetnike iz društava Slovenaca „Triglav“ iz Splita, „Istra“ iz Pule, Slovenski dom iz Karlovca, Slovenski dom iz Zagreba , „Bazovica“ iz Rijeke, i  „Lipa“ iz Zadra,  a pridružuju im se i likovni umjetnici iz Zadra i Sv. Filip i Jakova, Turnja i Zagreba.<br />
Svoje sudjelovanje na likovnoj koloniji potvrdili  su i slikari  umjetnici  iz Sežane i Dolenjskih toplic  iz Slovenije.</p>
      </div>
    <div class="clear"></div>
    </article>

并创建php函数来调用即将发生的事件：

<?php 
function KalendarSlideTo(){
global $link;
$rezultat = mysqli_query($link, "SELECT * FROM kalendar_dogadjanja WHERE KalendarDatum >= '".date('Y-m-d')."' LIMIT 1");
$redak = mysqli_fetch_array($rezultat);
echo date('d-m-y', strtotime($redak['KalendarDatum']));
}?>

和这个jquery代码：

$('html, body').animate({
    'scrollTop':   $('#<?php KalendarSlideTo(); ?>').offset().top
}, 1);

Php日历事件

1 个答案: