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

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

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

이 글은 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 || 'left';
    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("执行了一次");
});

관련 권장 사항:

WeChat 애플릿 구성 요소 marquee 인스턴스 공유

marquee 태그에 대한 자세한 소개 html

marquee 태그 사용 예 요약 JS 선택 윤곽 스크롤 효과를 얻으려면 자세한 예

위 내용은 jQuery 선택 윤곽 원활한 스크롤 플러그인 구현 튜토리얼의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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