집 > 기사 > 웹 프론트엔드 > 원활한 스크롤 효과를 구현하는 jQuery 플러그인

원활한 스크롤 효과를 구현하는 jQuery 플러그인

WBOY원래의: 2016-05-16 15:30:031303검색

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

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

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

구현 원칙에 대해 이야기해 보겠습니다.

　div 상자는 가장 바깥쪽 상자에 지정된 너비와 높이를 지정해야 합니다. 확실히 그것은 상자를 초과할 것입니다.

js를 사용하여 ul 태그 의 여백을 제어하여 스크롤을 구현합니다. 가로 스크롤은 margin-left로 제어되고, 세로 스크롤은 margin-top;

으로 제어됩니다.

초기 상태에서는 스크롤 여부를 결정하기 위한 조건부 판단도 필요합니다. 즉, ul의 길이가 외부 상자의 길이보다 작으면 스크롤이 수행되지 않고, 그렇지 않으면 스크롤이 수행됩니다.

　ul의 길이는 ul에 있는 단일 li의 길이에 li의 수를 곱하여 계산됩니다. ul_width = li_width * li_num;

원활한 스크롤이 가능한 이유는 스크롤의 길이가 단일 리의 길이보다 조금 더 커질 때마다 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), externalWidth() /outerHeight() 함수. 이 함수는 상대적으로 강력합니다. 요소의 너비/높이를 얻을 뿐만 아니라 실제로는 externalWidth()=width borderLeft borderRight marginLeft marinRight; 즉, externalWidth(true)로 설정하면 패딩도 계산됩니다. . :outerWidth()=너비 테두리왼쪽 테두리오른쪽 여백왼쪽 마린오른쪽 패딩왼쪽 패딩오른쪽;

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

<!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>

효과 사진:

위는 원활한 스크롤 효과를 얻기 위한 jQuery 플러그인입니다. 효과가 다소 투박하고 아름답지는 않지만 이를 토대로 모두가 아름답게 만들 수 있기를 바랍니다.

성명：

이전 기사：부트스트랩은 매일 드롭다운 메뉴_javascript 기술을 배워야 합니다.다음 기사：부트스트랩은 매일 드롭다운 메뉴_javascript 기술을 배워야 합니다.

원활한 스크롤 효과를 구현하는 jQuery 플러그인

관련 기사