jQuery 기반 marquee 빈 틈 없 는 스크롤 플러그 인 구현
코드 는 다음 과 같 습 니 다:
/**
* :jQuery.marquee
* : jquery marquee
* :http://www.miaoqiyuan.cn/
* :[email protected]
* :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 = '<table><tr><td>[TABLE]</td><td>[TABLE]</td></tr></table>';
break;
case "top":
case "bottom":
opt.weight = "height";
opt.margin = "margin-top";
opt.tpl = '<table><tr><td>[TABLE]</td></tr></tr><td>[TABLE]</td></tr></table>';
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 == 'width' ? $(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;
};
}
모두 세 개의 선택 가능 한 매개 변수 가 있 고,하나의 반전 방법 이 있다.direction,이동 방향:왼쪽:왼쪽 오른쪽:오른쪽 위:상단 아래:bottom 지원;
pixels,매번 이동 하 는 픽 셀 수
speed,두 번 이동 하기 전의 간격(밀리초)
호출 방법 은 다음 과 같 습 니 다.
$("scroll-a").marquee();
$("scroll-b").marquee({direction:'top'});
$("scroll-c").marquee({direction:'top',pixels:2,speed:30});
$("scroll-d").marquee({direction:"top",pixels:2,speed:30}, function(){
console.log(" ");
});
위 에서 말 한 것 은 jQuery 를 바탕 으로 marquee 의 빈 틈 없 는 스크롤 을 실현 하 는 플러그 인 입 니 다.여러분 에 게 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 저 에 게 메 시 지 를 남 겨 주세요.편집장 은 제때에 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
jQuery 전후 예이 기사에서는 jquery after() 및 before() 메소드의 예를 볼 것입니다. before() 메서드는 선택한 요소 앞에 지정된 콘텐츠를 삽입합니다. after() 메서드는 선택한 요소 뒤에 지정된 콘텐츠...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.