집 > 기사 > 웹 프론트엔드 > jQuery 선택 윤곽 원활한 스크롤 플러그인 구현 튜토리얼

jQuery 선택 윤곽 원활한 스크롤 플러그인 구현 튜토리얼

小云云원래의: 2018-01-22 17:38:491826검색

이 글은 jQuery 기반의 marquee Seamless Scrolling을 구현한 플러그인을 주로 소개하고 있습니다. 매우 훌륭하고 참고할만한 가치가 있으니, 모두에게 도움이 되었으면 좋겠습니다.

jQuery를 기반으로 marquee Seamless 스크롤링을 구현하는 플러그인이 git.oschina.net에 출시되었으며, 데모는 추후 업데이트 예정입니다. (http://git.oschina.net/mqycn/jQueryMarquee로 업데이트) .

코드는 다음과 같습니다.

/**
 * 类库名称：jQuery.marquee
 * 实现功能：基于 jquery 实现的 marquee 无缝滚动插件
 * 作者主页：http://www.miaoqiyuan.cn/
 * 联系邮箱：mqycn@126.com
 * 使用说明：http://www.miaoqiyuan.cn/p/jquery-marquee
 * 最新版本：http://git.oschina.net/mqycn/jQueryMarquee
*/
jQuery.fn.extend({
  marquee : function(opt, callback){
    opt = opt || {};
    opt.speed = opt.speed || 30;
    opt.direction = opt.direction || &#39;left&#39;;
    opt.pixels = opt.pixels || 2;
    switch( opt.direction ){
      case "left":
      case "right":
        opt.weight = "width";
        opt.margin = "margin-left";
        opt.tpl = &#39;<table><tr><td>[TABLE]</td><td>[TABLE]</td></tr></table>&#39;;
        break;
      case "top":
      case "bottom":
        opt.weight = "height";
        opt.margin = "margin-top";
        opt.tpl = &#39;<table><tr><td>[TABLE]</td></tr></tr><td>[TABLE]</td></tr></table>&#39;;
        break;
      default:
        throw Error("[jQuery.marquee.js] Options.direction Error!");
    }
    switch( opt.direction ){
      case "left":
      case "top":
        opt.addon = -1;
        break;
      case "right":
      case "bottom":
        opt.addon = 1;
        break;
      default:
        throw Error("[jQuery.marquee.js] Options.direction Error!");
    }
    callback = typeof callback == "function" ? callback : function(){};
    //设置宽度
    $(this).each(function(){
      if( this.control ){
        clearInterval(this.control);
      } else {
        //如果第一次执行，初始化代码
        $(this)
          .data(opt.weight, opt.weight == &#39;width&#39; ? $(this).find("table").width() : $(this).find("table").height())
          .width($(this).data(opt.weight) * 2)
          .html(opt.tpl.replace(/\[TABLE\]/ig, $(this).html()))
          .mouseover(function(){
            $(this).data("pause", true);
          }).mouseout(function(){
            $(this).data("pause", false);
          });
      }
      this.control = setInterval((function(){
        if( $(this).data("pause") ){
          return;
        }
        var _margin = parseInt($(this).css(opt.margin)) + opt.addon * opt.pixels;
        if( opt.addon == -1 && _margin + $(this).data(opt.weight) < 0 ){
          _margin = 0;
        }else if( opt.addon == 1, _margin > 0 ){
          console.log(_margin < 0,$(this).data(opt.weight));
          _margin = -1 * $(this).data(opt.weight);
        }
        $(this).css(opt.margin, _margin + "px");
        callback.bind(this)();
      }).bind(this), opt.speed);
    });
    return $(this);
  }
});

IE9 이하에서 사용하는 경우 이전에 다음 코드를 추가해야 합니다.

/**
 * IE8插件（解决 function 不支持 bind 的问题），非原创
*/
if (!Function.prototype.bind) {
  Function.prototype.bind = function(oThis) {
    if (typeof this !== "function") {
      throw new TypeError("[jQuery.marquee.ie8] Caller is not a function");
    }
    var aArgs = Array.prototype.slice.call(arguments, 1),
      fToBind = this,
      fNOP = function() {},
      fBound = function() {
        return fToBind.apply(this instanceof fNOP && oThis ? this : oThis, aArgs.concat(Array.prototype.slice.call(arguments)));
      };
    fNOP.prototype = this.prototype;
    fBound.prototype = new fNOP();
    return fBound;
  };
}

3개의 선택적 매개변수와 콜백 메소드가 있습니다.

방향, 이동 방향: 왼쪽: 왼쪽, 오른쪽: 오른쪽, 위쪽: 위쪽, 아래쪽: 아래쪽 지원

픽셀, 매번 이동하는 픽셀 수

속도, 두 이동 사이의 간격 수(밀리초)

통화 방법 다음과 같습니다:

$("scroll-a").marquee();
$("scroll-b").marquee({direction:&#39;top&#39;});
$("scroll-c").marquee({direction:&#39;top&#39;,pixels:2,speed:30});
$("scroll-d").marquee({direction:"top",pixels:2,speed:30}, function(){
  console.log("执行了一次");
});

jQuery 선택 윤곽 원활한 스크롤 플러그인 구현 튜토리얼

관련 기사