>웹 프론트엔드 >JS 튜토리얼 >원활한 스크롤 효과를 달성하기 위한 Node.js_javascript 기술

원활한 스크롤 효과를 달성하기 위한 Node.js_javascript 기술

WBOY
WBOY원래의
2016-05-16 15:24:301152검색

본 글의 예시에서는 js가 원활한 스크롤 효과를 구현하기 위해 필요한 기능과 주요 js 코드를 소개하고 있으며, 참고용으로 공유합니다

작업 렌더링:

아래에서 배운 지식을 조합하여 모의 종합 확장 운동을 만들어 보세요~~ 일반적인 기능은 다음과 같습니다.

  • 1. HTML을 클릭하면 사진이 자동으로 이동하여 표시됩니다
  • 2. 왼쪽 및 오른쪽 방향을 클릭하여 사진 이동 방향을 변경합니다(왼쪽, 양수 ​​또는 음수 값 변경)
  • 3. 마우스가 이미지 안팎으로 이동한 후 이미지가 일시 중지됩니다(setInterval,clearInterval)
  • 4. 사진 위에 마우스를 올려 강조표시하세요(a:hover)
  • 5. 작은 사진을 클릭하면 아래 큰 사진이 변경됩니다
  • 6. 그림이 바뀌면서 텍스트 영역도 변경됩니다. (실패, 개선 필요)

특정 코드:

window.onload = function(){

  //声明部分( 现在的习惯是要写什么声明什么, 一起写容易搞忘了。。也不知道好不好这样)

  var oDiv = document.getElementById('box');

  var oUl = oDiv.getElementsByTagName('ul');

  var oLi = oUl.getElementsByTagName('li');

  var speed = 2;

  var timer = null;

   

  //让ul的内容增一倍,从而实现无缝滚动

  oUl.innerHTML = oUl.innerHTML + oUl.innerHTML;

  oUl.style.width = oLi[1].offsetWidth * oLi.length + 'px';

  //move函数

  function move(){
    oUl.style.left = oUl.offsetLeft + speed + 'px';
    //控制左
    if(oUl.offsetLeft < -oUl.offsetWidth/2){
    oUl.style.left = 0;
    }

    //控制右
    if(oUl.offsetLeft > 0){
    oUl.style.left = -oUl.offsetWidth/2 + 'px';
    }

  }

    //图标点击~ 控制移动方向

    var oLeft = document.getElementById('jt_left');
    var oRight= document.getElementById('jt_right');

    oLeft.onclick = function(){
    speed = -2;
    }

    oRight.onclick = function(){
    speed = 2;
    }

    //鼠标移入移出效果

    oDiv.onmouseover = function(){
      clearInterval(timer);
    }

    oDiv.onmouseout = function(){
      timer = setInterval(move,20);
    }
    timer = setInterval(move,20); 

    //点击获取大图

    

    var aA = oDiv.getElementsByTagName('a');
    for(var i=0;i<aA.length;i++){
      aA[i].onclick = function(){
        showPic(this);
        return false;
      }
    }
    
    function showPic(whichpic){
      var source = whichpic.href;
      var placeholder = document.getElementById('placeholder');
      placeholder.src = source;
    }

}

최종 텍스트 교체 효과를 위해 사진을 사용하여 텍스트 상자에 해당하는 숫자를 변경하려고 했습니다~~ 이유는 잘 모르겠습니다. 좋은 제안을 해주세요. 그러나 js의 원활한 스크롤은 여전히 ​​모든 사람에게 도움이 될 수 있기를 바랍니다.

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.