집 >웹 프론트엔드 >JS 튜토리얼 >jQuery_jquery 작성을 기반으로 한 원활한 스크롤 플러그인

jQuery_jquery 작성을 기반으로 한 원활한 스크롤 플러그인

WBOY원래의: 2016-05-16 16:40:331097검색

먼저 HTML 스켈레톤을 살펴보면 다음과 같습니다.

<div class="box">
    <ul>
      <li>111</li>
      <li>222</li>
      <li>333</li>
    </ul>
</div>

구조가 단순하고 명확해서 딱히 할 말이 없습니다.

구현 원칙에 대해 이야기해 보겠습니다.
div 상자는 가장 바깥쪽 상자입니다. 지정된 너비와 높이를 지정하세요. 스크롤이 확실히 상자를 초과하므로 상자에 Overflow:hidden(숨겨진 내용) 스타일을 추가하는 것을 잊지 마세요.
스크롤을 달성하기 위해 js를 사용하여 ul 태그의 여백을 제어합니다. 가로 스크롤은 왼쪽 여백을 제어하고, 세로 스크롤은 여백 상단을 제어합니다.
초기 상태에서는 스크롤 여부를 결정하기 위해 조건부 판단도 수행해야 합니다. 즉, ul의 길이가 외부 상자의 길이보다 작으면 스크롤이 수행되지 않고, 그렇지 않으면 스크롤이 수행됩니다.
ul의 길이는 ul에 있는 단일 li의 길이에 li의 수를 곱하여 계산됩니다. ul_width = li_width * li_num;
매끄러운 스크롤링이 가능한 이유는 스크롤의 길이가 단일 li의 길이보다 조금 더 커질 때마다 ul의 첫 번째 li을 ul의 끝으로 이동시키고 주기가 무한히 반복해서 시작되기 때문입니다. (이것에 대해
한 가지, 먼저 Overflow:hidden을 설정하지 않고도 확인할 수 있습니다.

원칙을 말하는 것은 내 자신을 표현하는 능력을 테스트하는 것입니다.

플러그인의 구현 코드를 살펴보겠습니다.

(function ($) {
  $.fn.Scroll = function (options) {
    //将当前上下文对象存入root
    var root = this;

    //默认配置
    var settings = {
      speed: 40,   //滚动速度,值越大速度越慢
      direction: "x" //滚动方向("x"或者"y" [x横向;y纵向])
    };

    //不为空，则合并参数
    if (options)
      $.extend(settings, options);


    var timer = [];   //计时器
    var marquee;    //滚动器(函数)
    var isRoll;     //判断是否滚动(函数)

    var _ul = $("> ul", root);     //ul标签
    var _li = $("> ul > li", root);   //li标签(集合)

    var li_num = _li.length;  //li标签个数
    var li_first = _li.first();  //获取单个li标签


    //判断为纵向还是横向，并进行相应操作
    if (settings.direction == "x") {
　　　　　　　
　　　　　　 var li_w = li_first.outerWidth(true); //单个li标签的宽度
　　　　　　 var ul_w = li_w * li_num; 　　　　　　 //ul标签的宽度

      _ul.css({ width: ul_w }); //设置ul宽度

      marquee = function () {
        _ul.animate({ marginLeft: "-=1" }, 0, function () {
          var _mleft = Math.abs(parseInt($(this).css("margin-left")));
          if (_mleft > li_w) { //滚动长度一旦大于单个li的长度
            $("> li:first", $(this)).appendTo($(this)); //就把第一个li移到最后
            $(this).css("margin-left", 0); //滚动长度归0
          }
        });
      };
      //ul长度小于box长度时则不滚动，反之滚动
      isRoll = function (t) {
        if (ul_w <= root.width())
          clearInterval(t);
        else
          marquee();
      }
    }
    else {
　　　　　　 var li_h = li_first.outerHeight(true); //单个li标签的高度 
　　　　　　 var ul_h = li_h * li_num; //ul标签的高度

      _ul.css({ height: ul_h }); //设置ul高度

      marquee = function () {
        _ul.animate({ marginTop: "-=1" }, 0, function () {
          var _mtop = Math.abs(parseInt($(this).css("margin-top"))); //取绝对值
          if (_mtop > li_h) { 
            $("> li:first", $(this)).appendTo($(this));
            $(this).css("margin-top", 0);
          }
        });
      };
      //ul长度小于box长度时则不滚动，反之滚动
      isRoll = function (t) {
        if (ul_h <= root.height())
          clearInterval(t);
        else
          marquee();
      }
    }

    //遵循链式原则，并进行初始化
    return root.each(function (i) {
      //超出内容隐藏，防止用户没写overflow样式
      $(this).css({ overflow: "hidden" });

      timer[i] = setInterval(function () {
        isRoll(timer[i]);
      }, settings.speed);

      //鼠标进入停止滚动，离开继续滚动
      $(this).hover(function () {
        clearInterval(timer[i]);
      }, function () {
        timer[i] = setInterval(function () {
          isRoll(timer[i]);
        }, settings.speed);
      });

    });

  };
})(jQuery);

기본 코드 설명 주석이 매우 명확하게 작성되었습니다. 개인별 지식 포인트에 대한 설명은 다음과 같습니다.

1.) var 타이머=[]; 이전에는 데모를 작성할 때 페이지에 두 개의 원활한 스크롤 애플리케이션이 동시에 있었기 때문에 타이머가 배열 유형으로 선언되지 않았습니다. ), 버그가 나타났습니다.

둘이 타이머를 공유하기 때문에 둘 중 하나에 마우스가 들어가면 다른 하나의 타이머도 지워집니다. 그런 다음 코드를 수정하여 배열 객체로 선언한 다음 root.each()를 사용하여
을 구현합니다. 이제 각 플러그인 애플리케이션에는 자체 독립 타이머가 있어 서로 간섭하지 않습니다. 즉, 이 플러그인은 페이지에서 동시에 여러 개의 원활한 스크롤 애플리케이션을 지원합니다.

2.) 외부Width() /outerHeight() 함수. 이 기능은 더 강력하며 요소의 너비/높이 이상의 기능을 가져옵니다.

실제로는 externalWidth()=width borderLeft borderRight marginLeft marinRight;
true로 설정된 경우, 즉 externalWidth(true)는 패딩도 계산합니다:
externalWidth()=너비 테두리왼쪽 테두리오른쪽 여백왼쪽 마린오른쪽 패딩왼쪽 패딩오른쪽;

어때요, 엄청 강력하지 않나요!

데모 코드는 아래와 같습니다:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
  *{ margin:0; padding:0;}
  ul,ul li{ list-style:none;}  
  .wrap{ width:1000px; margin:50px auto;}  
  .box1,.box2,.box3{ overflow:hidden; float:left;border:1px solid gray;}  
  .box1{ width:200px; height:450px;}
  .box1 ul li{ width:200px; height:100px;} 
  .box2,.box3{ width:450px;height:150px; margin:40px;}
  .box2 ul li,.box3 ul li{ width:100px; height:150px; float:left;}
  
</style>
</head>

<body>
<div class="wrap">

  <div class="box1">
    <ul>
      <li>111纵向</li>
      <li>222纵向</li>
      <li>333纵向</li>
      <li>444纵向</li>
      <li>555纵向</li>
      <li>666纵向</li>
    </ul>
  </div>

  <div class="box2">
    <ul>
      <li>111横向</li>
      <li>222横向</li>
      <li>333横向</li>
      <li>444横向</li>
      <li>555横向</li>
      <li>666横向</li>
    </ul>
  </div> 
  
  <div class="box3">  
    <ul>
      <li>ul长度小于box长度，不滚动</li>
      <li>222横向</li>
      <li>333横向</li>      
    </ul>
  </div>  
</div>

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.similar.scroll.js"></script>
<script type="text/javascript">
  $(function () {
    //奇数背景设置为灰色
    $('.box1 li:even,.box2 li:even,.box3 li:even').css({ backgroundColor: "gray" });

    $(".box1").Scroll({ direction: "y" }); //设置为纵向滚动
    $(".box2").Scroll(); //默认横向滚动
    $(".box3").Scroll();
  });
</script>
</body>
</html>

효과 사진:

데모에서는 스타일 문제로 인해 직접 꾸미실 수 있습니다.

성명：

이전 기사：JavaScript 함수의 매개변수 전달 문제 예에 대한 토론_Javascript 기술다음 기사：JavaScript 함수의 매개변수 전달 문제 예에 대한 토론_Javascript 기술

jQuery_jquery 작성을 기반으로 한 원활한 스크롤 플러그인

관련 기사