Category: 其他

const detectScrollDirection = () => {
  let lastScrollTop = 0;
  window.addEventListener("scroll", () => {
    const header = document.querySelector(".site_nav");
    const currentScrollTop =
      document.body.scrollTop || document.documentElement.scrollTop;
    if (currentScrollTop < lastScrollTop) { //<向下滚动，>向上滚动
      header.classList.remove("scroll");
    } else {
      header.classList.add("scroll");
    }
    lastScrollTop = currentScrollTop;
  });
};
detectScrollDirection();

////.split-lines文本拆成行
      const splitLines = (container) => {
        const spans = container.children;
        let top = 0;
        let tmp = "";

        container.innerHTML = container.textContent.replace(
          /\S+/g,
          "<n>$&</n>"
        );
        for (let i = 0; i < spans.length; i++) {
          const rect = spans[i].getBoundingClientRect().top;
          if (top < rect) {
            tmp +=
              "</div></div><div class='overflow-hidden'><div class='text_inner'>";
          }
          top = rect;
          tmp += spans[i].textContent + " ";
        }

        container.innerHTML = tmp + "</div></div>";
      };
      document.querySelectorAll(".split-lines").forEach(element => {
        splitLines(element);
      });

/*title文本拆多个字符*/
const splitLetters = () => {
        document.querySelectorAll(".title").forEach((title) => {
          title.innerHTML = [...title.textContent].map((letter) =>`<span class="${letter.trim() === "" ? "empty" : ""}">${letter}</span>`).join("");
        });
      };
      splitLetters();

//滚动过程中给隐藏的文本添加动态效果
      const showParaInviewport = () => {
        const observerCallbackFun = (entries, observer) => {
          entries.forEach((entry) => {
            if (entry.isIntersecting) {
              const paraElement = entry.target;
              paraElement.classList.add("active");
              observer.unobserve(paraElement);
            }
          });
        };
        const observerOptions = {
          root: null, // Use the viewport as the root
          rootMargin: "0px 0px -20% 0px", // Trigger when 20% of the element is visible from the bottom
          threshold: 0.1, // Trigger as soon as any part of the element is visible
        };
        const observer = new IntersectionObserver(
          observerCallbackFun,
          observerOptions
        );
        document.querySelectorAll(".split-lines").forEach((paraElement) => {
          observer.observe(paraElement);
        });
      };
      showParaInviewport();

const showParaInviewport = () => {
        const observerCallbackFun = (entries, observer) => {
          entries.forEach((entry) => {
            if (entry.isIntersecting) {
              const paraElement = entry.target;
              paraElement.classList.add("active");
              observer.unobserve(paraElement);
            }
          });
        };
        const observerOptions = {
          root: null, // Use the viewport as the root
          rootMargin: "0px 0px -20% 0px", // Trigger when 20% of the element is visible from the bottom
          threshold: 0.1, // Trigger as soon as any part of the element is visible
        };
        const observer = new IntersectionObserver(
          observerCallbackFun,
          observerOptions
        );
        document.querySelectorAll(".split-lines").forEach((paraElement) => {
          observer.observe(paraElement);
        });
      };
      showParaInviewport();

\d:表示一个十进制的数字[0-9]
\D:表示非数字
\w:表示一个字[0-9a-zA-Z]
\W:表示除[0-9a-zA-Z]之外的字符

$& 表示整个用于匹配的原字符串。

var $element = $(".plan-number-strong");
        $element.each(function() {
            var modifiedText = $(this).text().replace(/\d+/g, '<span>$&</span>');
            $(this).html(modifiedText);
        })

h1 {
        position: absolute;
        clip: rect(1px, 1px, 1px, 1px);
        clip-path: inset(0px 0px 99.9% 99.9%);
        overflow: hidden;
        height: 1px;
        width: 1px;
        padding: 0;
        border: 0;
    }

JS事件模型为向上冒泡，如onclick事件在某一DOM元素被触发后，事件将跟随节点向上传播，直到有click事件绑定在某一父节点上，如果没有将直至文档的根。

function stopFunc(e) {
        e.stopPropagation ? e.stopPropagation() : e.cancelBubble = true;
      }

function leftScroll() {
        var $ttl = $('.scroll_left');
        $ttl.each(function () {
            var $this = $(this);
            var $scrolled = $(window).scrollTop();
            var $a = $(this).offset().top;
            $scrolled = $a - $scrolled;
            $this.css({
                "transform": "matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, "+($scrolled * 0.5) + ", 0, 0, 1)",
            })
        })
    }

<ul class="socialList">
            <li><a href="http://www.facebook.com/sharer.php?u=<?php the_permalink(); ?>" target="_blank"
                    title="Facebook">facebook</a></li>
            <li><a href="http://twitter.com/intent/tweet?text=<?php the_permalink(); ?>" target="_blank"
                    title="Twitter">twitter</a></li>
            <li><a href="http://b.hatena.ne.jp/add?mode=confirm&url=<?php the_permalink(); ?>" target="_blank" title="はてブ">b!</a>
            </li>
            <li><a href="http://line.naver.jp/R/msg/text/?<?php the_permalink(); ?>" target="_blank" title="LINE">line</a>
            </li>
        </ul>

在地址后面添加 &mute=1

<iframe src="https://www.youtube.com/embed/uNRGWVJ10gQ?rel=0&autoplay=1&mute=1" width="560" height="315" frameborder="0" allowfullscreen></iframe>

$('.slider-for').slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    arrows: false,
    fade: true,        
    autoplay:true,
    //trigger after the slide appears
    // i is current slide index
    onAfterChange:function(slickSlider,i){
         //remove all active class
         $('.slider-nav .slick-slide').removeClass('slick-active');
         //set active class for current slide
         $('.slider-nav .slick-slide').eq(i).addClass('slick-active');         
     }

});


//set active class to first slide
$('.slider-nav .slick-slide').eq(0).addClass('slick-active');