story time colors

Kicamon · Jun 6, 2024 · c90d8b2 · c90d8b2
1 parent 1c1b0ba
commit c90d8b2
Show file tree

Hide file tree

Showing 4 changed files with 2 additions and 90 deletions.
diff --git a/css/timeline.css b/css/timeline.css
@@ -67,7 +67,7 @@
   transition: 0.4s;
   padding: 0 10px;
   box-sizing: border-box;
-  color: #fff;
+  color: #B0E0E6;
 }
 
 .content-desc {

diff --git a/pages/story.html b/pages/story.html
@@ -9,7 +9,6 @@
   <link rel="icon" href="../static/love.ico">
   <link href="../css/timeline.css" rel="stylesheet">
   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
-  <script type="module" src="../scripts/story.js"></script>
 </head>
 
 <body>
@@ -25,9 +24,9 @@ <h3 class="subtitle">我们的故事</h3>
       <h2 class="endtitle">我们的故事，未完待续……</h2>
     </div>
   </div>
-
   </div>
 
+  <script type="module" src="../scripts/story.js"></script>
   <script type="module" src="../scripts/timeline.js"></script>
 </body>
 

diff --git a/scripts/story.js b/scripts/story.js
@@ -1,22 +1,3 @@
-//let $timeline = $(".timeline")
-//
-//let Timeline = function() {
-//  $.getJSON("../static/img-story/timeline.json", function(data) {
-//    $.each(data, function(_, item) {
-//      $timeline.append(`
-//        <div class="item" data-text="《执子之手，与子偕老》">
-//          <div class="content">
-//            <img src="../static/img-story/${item.img}" alt="" class="img">
-//            <h2 class="content-title">${item.time}</h2>
-//            <p class="content-desc">${item.text}</p>
-//          </div>
-//        </div>
-//      `)
-//    })
-//  })
-//}
-//
-//Timeline()
 let $timeline = $(".timeline");
 
 let Timeline = function() {

diff --git a/scripts/timeline.js b/scripts/timeline.js
@@ -1,71 +1,3 @@
-//(function ($) {
-//  $.fn.timeline = function () {
-//    let selectors = {
-//      id: $(this),
-//      item: $(this).find(".item"),
-//      activeClass: "item--active",
-//      img: ".img"
-//    };
-//    // 将第一个时间轴项目激活，并设置时间轴背景图片为第一个项目的图片
-//    selectors.item.eq(0).addClass(selectors.activeClass);
-//    selectors.id.css(
-//      "background-image",
-//      "url(" +
-//      selectors.item.first()
-//        .find(selectors.img)
-//        .attr("src") +
-//      ")"
-//    );
-//    // 获取时间轴项目的总数
-//    let itemLength = selectors.item.length;
-//    // 当页面滚动时，触发滚动事件
-//    $(window).scroll(function () {
-//      let max, min;
-//      // 获取页面滚动的距离
-//      let pos = $(this).scrollTop();
-//      selectors.item.each(function (i) {
-//        // 获取当前时间轴项目的最小和最大高度
-//        min = $(this).offset().top;
-//        max = $(this).height() + $(this).offset().top;
-//        let that = $(this);
-//        // 如果滚动到最后一个项目，并且超过了当前项目高度的一半，
-//        // 则将最后一个项目设置为激活状态，并设置背景图片为最后一个项目的图片
-//        if (i == itemLength - 2 && pos > min + $(this).height() / 2) {
-//          selectors.item.removeClass(selectors.activeClass);
-//          selectors.id.css(
-//            "background-image",
-//            "url(" +
-//            selectors.item.last()
-//              .find(selectors.img)
-//              .attr("src") +
-//            ")"
-//          );
-//          selectors.item.last().addClass(selectors.activeClass);
-//        }
-//        // 如果当前滚动位置在当前项目的最小和最大高度之间，
-//        // 则将当前项目设置为激活状态，并设置背景图片为当前项目的图片
-//        else if (pos <= max - 10 && pos >= min) {
-//          selectors.id.css(
-//            "background-image",
-//            "url(" +
-//            $(this)
-//              .find(selectors.img)
-//              .attr("src") +
-//            ")"
-//          );
-//          selectors.item.removeClass(selectors.activeClass);
-//          $(this).addClass(selectors.activeClass);
-//        }
-//      });
-//    });
-//  };
-//})(jQuery)
-///*
-//最后，我们调用 timeline 插件并传入时间轴的 ID 作为参数。
-//这将启用时间轴插件并为该时间轴绑定滚动事件。
-//*/
-//$("#shell").timeline();
-//
 (function($) {
   $.fn.timeline = function() {
     let selectors = {