JavaScript를 사용하여 다음 스크롤 버퍼 모션 광고 상자를 완성하는 방법은 무엇입니까?-JS 튜토리얼-php.cn

JavaScript를 사용하여 다음 스크롤 버퍼 모션 광고 상자를 완성하는 방법은 무엇입니까?

黄舟

풀어 주다： 2017-07-17 11:30:17

원래의

2179명이 탐색했습니다.

이 글에서는 주로 자세히 소개합니다JavaScript스크롤링 버퍼 모션 광고 프레임을 따르는 페이지의 왼쪽과 오른쪽에 광고 프레임을 따라가며 특정 참조 값이 있으므로 관심 있는 친구들이 참고할 수 있습니다

우리가 할 때 일부 탐색 웹 페이지를 탐색할 때 페이지 가장자리에 광고 이미지가 있는 것을 발견할 수 있습니다. 스크롤 막대를 스크롤하면 이러한 광고 이미지가 페이지의 움직임을 따라갑니다(여기서는 이를 광고 상자라고 부릅니다). 일부 웹페이지의 광고 프레임은 브라우저에 고정되어 있으며 배경: 고정;을 사용하여 구현할 수 있습니다. 여기서는 스크롤 버퍼와 함께 움직이는 광고 상자를 만들기 위해 JavaScript를 사용했습니다.

제작 원리는 상대적으로 간단합니다. 누구나 완벽한 js 모션 프레임워크를 가지고 있으며, 여기에서 모션 버퍼링에 사용해야 합니다. 여기의 광고 상자는 스크롤 바 버퍼의 움직임을 따라 브라우저의 중간 위치로 이동하도록 설정되어 있습니다. 이해해야 할 것은 이동 거리 계산 및 일부 세부 사항 처리입니다(일부 버그 방지)

여기에서 사용하는 JS 이동 프레임워크는 매개변수가 하나만 전달되어 완벽한 이동 프레임워크가 아닙니다. . 전달된 매개변수는 광고 프레임의 이동 거리이므로 이동 프레임 내에서 객체를 다시 가져옵니다.

var timer=null;
    function startMover(iTarget){
      var op=document.getElementById(&#39;p1&#39;);
      clearInterval(timer);
      timer=setInterval(function(){
          var ispeed=(iTarget-op.offsetTop)/8;
          //速度设置为逐渐减小
          ispeed=ispeed>0?Math.ceil(ispeed):Math.floor(ispeed);
          //避免速度产生小数点
          if(op.offsetTop==iTarget){
            clearInterval(timer);
          }
          else{
          op.style.top=op.offsetTop+ispeed+"px";
          }

    },30);
    };

로그인 후 복사

스타일 및 레이아웃 코드

  <style>
    #p1{
      width: 100px;
      height: 100px;
      background: #ccc;
      position: absolute;
      //使用绝对定位让其处于右上方
      right: 0;
      top: 0;
  </style>

  <body style="height: 2000px;">
    <p id="p1"></p>
  </body>

로그인 후 복사

js 코드

여기에 .onscroll 속성이 추가됩니다. 스크롤 막대를 스크롤할 때 페이지를 로드하여 광고 상자가 스크롤 막대와 함께 이동할 수 있도록 하는 것이 목적입니다. . .onresize 속성도 추가했는데, 광고 상자가 항상 브라우저의 중간 위치로 이동한다는 점을 알고 싶었지만, 브라우저 높이를 변경할 때 광고의 움직임도 인식해야 합니다. 상자에 크기가 변경되면 브라우저가 로드될 때 이 속성을 추가합니다.

<script>
    window.onload=window.onscroll=window.onresize=function(){

      var op=document.getElementById(&#39;p1&#39;);
      var scrolltop=document.documentElement.scrollTop||document.body.scrollTop;
"scrolltop"是滚动条滚动的距离，这里有一个兼容chrome不支持document.documentElement.scrollTop获取语句，其他浏览器支持。          
      var t=(document.documentElement.clientHeight-op.offsetHeight)/2;
"t"为让广告框处于中间位置的高度距离，（获取浏览器的总高度-广告框自身高度）/2      
      startMover(parseInt(t+scrolltop));
"parseIn"返回一个整数，避免小数生成。这里广告框的总移动距离为（t+scrolltop）    
    };

    var timer=null;
    function startMover(iTarget){
      var op=document.getElementById(&#39;p1&#39;);
      clearInterval(timer);
      timer=setInterval(function(){
          var ispeed=(iTarget-op.offsetTop)/8;

          ispeed=ispeed>0?Math.ceil(ispeed):Math.floor(ispeed);

          if(op.offsetTop==iTarget){
            clearInterval(timer);
          }
          else{
          op.style.top=op.offsetTop+ispeed+"px";
          }

    },30);
    };

  </script>

로그인 후 복사

스크롤바가 메뉴 위치로 스크롤되면 브라우저 상단에 고정하는 방법, 스크롤바가 원래 위치로 돌아오면 거기서 멈추는 방법.
인터넷상의 많은 사람들이 jquery 플러그인을 인용해야 하는데, 이는 매우 귀찮은 일입니다.
이런 효과는 어떻게 작성하나요?

대략적인 아이디어를 적어보자. jQuery 플러그인을 직접 참조하는 것보다 직접 디버깅하는 것이 더 번거로울 것이므로 모두가 플러그인을 차례로 사용하게 될 것이다.

onscroll 이벤트를 사용하여 사용자의 스크롤을 결정한다. 위치를 지정하고 메뉴 요소의 offsetTop 속성을 사용하여 표시 위치를 결정합니다

메뉴 상단으로 스크롤하면 메뉴 표시가 고정으로 변경됩니다.

다음 메뉴가 적절한 특정 위치로 스크롤되면 변경됩니다. 원래 메뉴 표시를 뒤로 하고 새 메뉴를 고정으로 변경합니다

위 내용은 JavaScript를 사용하여 다음 스크롤 버퍼 모션 광고 상자를 완성하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!