SlideView 그림 슬라이딩(확장/축소) 표시 효과_javascript 기술
- WBOY원래의
- 2016-05-16 18:21:551288검색
사실 제가 예전에 썼던 그림 슬라이딩 디스플레이 효과를 개선한 버전인데, 이제 좀 더 관심을 끌게 되었습니다.
에는 다음과 같은 기능이 있습니다.
1, 선택할 수 있는 4가지 방향 모드가 있습니다.
2, 다양한 슬라이딩 효과를 얻기 위해 트윈 알고리즘과 결합됩니다.
3, 자동으로 디스플레이를 계산할 수 있습니다.
4. 디스플레이를 사용자 정의하거나 크기를 축소할 수도 있습니다.
5. 슬라이딩 프롬프트 기능을 확장할 수 있습니다.
호환 대상: ie6/7/8, firefox 3.6.8, Opera 10.51, safari 4.0.5, chrome 5.0
프로그램 설명
[기본 원칙]
슬라이딩 요소의 위치 좌표(왼쪽/오른쪽/위/아래)를 설정하여 마우스로 입력한 대상 요소를 슬라이딩 표시할 수 있으며, 다른 요소는 슬라이드 및 축소할 수 있습니다.
어려운 점은 여러 슬라이딩 요소를 동시에 제어하여 서로 다른 슬라이딩을 수행하는 방법입니다. 여기서 핵심은 전체 슬라이딩을 개별 슬라이딩 요소로 분해하여 자체 슬라이딩을 수행하는 것입니다.
각 슬라이딩 요소에 목표값을 설정한 후, 각각의 목표값을 향해 슬라이드하는 방식으로, 모두 목표값에 도달하면 완료됩니다.
[컨테이너 설정]
_initContainer 메소드에서 컨테이너를 구성합니다. 컨테이너는 나중에 슬라이딩 매개변수 계산에 사용되므로 먼저 컨테이너를 설정해야 합니다.
컨테이너 스타일을 먼저 설정하려면 컨테이너의 상대 또는 절대 위치를 설정해야 하며, 컨테이너 크기를 고정하려면 오버플로를 "숨김"으로 설정해야 합니다. 슬라이딩 요소도 절대 위치로 설정해야 합니다.
마우스가 컨테이너 밖으로 이동할 때 _LEAVE 제거 기능이 실행됩니다.
$$E.addEvent( 컨테이너, "mouseleave", this._LEAVE ); >_LEAVE 함수는 다음과 같습니다.
코드
var CLOSE = $$F.bind( this.close, this )
this._LEAVE = $$F.bind( function( ){
clearTimeout(this._timerDelay);
$$CE.fireEvent( this, "leave" )
if ( this.autoClose ) { this._timerDelay = setTimeout( CLOSE, this.delay ) ; }
}, this )
autoClose 속성이 true인 경우 close 메소드가 트리거됩니다.
[슬라이딩 객체]
프로그램이 초기화되면 슬라이딩 요소를 기반으로 슬라이딩 객체 컬렉션이 생성됩니다.
슬라이딩 요소를 먼저 가져옵니다.
var node = opt.nodes ? $$A.map( opt.nodes, function(n) { return n; } )
: $ $ A.filter(container.childNodes, function(n) { return n.nodeType == 1; });
사용자 정의 노드 슬라이딩 요소가 없는 경우 컨테이너에서 childNodes를 슬라이딩 요소로 가져옵니다.
또한 IE 이외의 브라우저는 childNodes의 일부로 공백을 사용하므로 nodeType을 사용하여 필터링합니다.
그런 다음 얻은 슬라이딩 요소를 사용하여 프로그램에 필요한 _nodes 슬라이딩 개체 컬렉션을 생성합니다.
this._nodes = $$A.map( 노드, 함수(노드){ return { " node" : node }; });
슬라이딩 객체는 "node" 속성을 사용하여 슬라이딩 요소를 기록합니다.
그런 다음 _initNodes 메소드에서 슬라이딩 객체를 초기화합니다.
각 슬라이딩 개체에는 슬라이딩 대상 값을 계산하는 데 사용되는 3가지 속성(defaultTarget 기본 대상 값, 최대 디스플레이 크기, 최소 축소 크기)이 있습니다.
맞춤 최대 크기 또는 최소 크기가 있는 경우 맞춤 크기를 기준으로 계산됩니다.
프로그램은 최대값을 기준으로 계산에 우선순위를 부여합니다.
max = Math.max( max <= 1 ? max * clientSize : Math.min( max, clientSize ), defaultSize ) ;
min = (clientSize - max) / maxIndex;
여기서 clientSize는 컨테이너의 표시 영역 크기이고 defaultSize는 평균 할당 크기입니다.
max가 십진수 또는 1인 경우 백분율로 계산한 다음 defaultSize에서 clientSize까지의 범위로 크기를 제한합니다.
그런 다음 최대값을 뺀 후 다른 축소 요소의 평균 크기를 계산하면 최소값을 얻을 수 있습니다.
맞춤 최대값이 없으면 맞춤 최소값에 따라 계산합니다.
min = Math.min( min < 1 ? min * clientSize : min, defaultSize ) ;
max = clientSize - maxIndex * min;
마찬가지로 min이 소수이면 백분율로 계산한 후 범위를 제한한 다음 max를 계산합니다.
마지막으로 사용자 정의 크기 계산 함수 가져오기:
getMax = function(){ return max;
getMin = function(){ return min }; >
사용자 정의된 최대값 또는 최소값이 없으면 요소 크기를 기준으로 계산됩니다.
getMax = function(o){ return Math.max( Math.min( o.node[ offset ] , clientSize ) , defaultSize ) };
getMin = function(o){ return ( clientSize - o.max ) / maxIndex }; 그런 다음 수축 크기를 계산합니다.
크기 계산 함수를 얻은 후 _each 메소드를 사용하여 슬라이딩 객체를 탐색하고 설정합니다.
o.current = o.defaultTarget = getDefaultTarget(i)
o .max = getMax(o); o.min = getMin(o)
여기서 current는 이동 계산 중 시작 값으로 사용되는 현재 좌표 값입니다.
defaultTarget은 기본 목표값, 즉 defaultSize와 index를 기준으로 구한 기본 상태에서의 움직임의 목표값입니다.
또한 마우스가 슬라이딩 요소에 들어갈 때 표시 표시 기능이 트리거되도록 설정합니다.
Code
var node = o.node, SHOW = $$F.bind ( this.show, this, i );
o.SHOW = $$F.bind( function(){
clearTimeout(this._timerDelay);
this._timerDelay = setTimeout( SHOW, this. 지연 ); $$CE.fireEvent( this, "enter", i );
}, this )
$$E.addEvent( node, "mouseenter", o.SHOW ); 🎜>슬라이딩 요소의 "mouseenter" 이벤트를 트리거하고 현재 슬라이딩 개체의 인덱스와 지연 설정을 전달합니다.
[슬라이딩 디스플레이]
마우스가 슬라이딩 요소 중 하나에 들어가면 show 메소드가 트리거되어 표시가 시작됩니다.
먼저 _setMove 메소드를 실행하여 슬라이딩 매개변수를 설정하고 인덱스를 매개변수로 사용합니다.
_setMove에서는 주로 이동값을 계산할 때 필요한 목표값, 시작값, 변경값을 설정합니다.
먼저 색인을 수정하세요. 잘못된 색인 값은 0으로 설정됩니다.
this._index = index = index < index >
그런 다음 인덱스에 따라 표시할 슬라이딩 개체를 얻고 표시된 개체의 최소 및 최대를 통해 getTarget 대상 값 함수를 가져옵니다.
var nodeShow = node[ index ], min = nodeShow.min, max = nodeShow .max
getTarget = function(o, i){ return i <= index ? min * i : min * ( i - 1 )
If 슬라이딩 객체는 표시 객체이거나 객체를 표시하고 있습니다. 이전에는 i번째 슬라이딩 객체의 대상 값이 i min 크기이므로 대상 값은 min * i였습니다.
그렇지 않으면 대상 값은 min * ( i - 1 ) max 입니다. 이는 실제로 표시 개체의 위치를 최대로 변경한다는 의미입니다.
그런 다음 각 슬라이딩 객체의 매개변수 속성을 설정합니다.
this._each( function(o, i){
o.target = getTarget(o, i);
o.begin = o.current;
o.change = o.target - o.begin;
})
여기서 target은 목표 값을 기록하고 start는 시작 값과 목표를 가져옵니다. 전류를 통한 값 시작 값과의 차이가 변화 값입니다.
설정이 완료되면 _easeMove 메소드를 실행하여 슬라이딩을 시작하고, _time 속성을 0으로 재설정한 후 _move 프로그램을 실행하면 정식으로 이동이 시작됩니다.
먼저 _time이 지속 시간에 도달했는지 확인하세요. 그렇지 않으면 계속 이동하세요.
프로그램은 이징을 설정하기 위해 _tweenMove 이동 함수를 설정합니다.
this._setPos( function(o) {
return this.tween( this._time, o.begin, o .change, this.duration );
});
트윈 알고리즘을 사용하여 현재 시간, 시작 값, 변경 값 및 기간을 결합하여 현재 이동할 좌표 값을 가져올 수 있습니다.
ps: 트윈 완화와 관련하여 트윈 알고리즘 및 완화 효과를 참조할 수 있습니다.
_time이 지속 시간에 도달하면 슬라이딩이 완료되었음을 의미합니다. _targetMove 목표 값 이동 함수를 다시 실행합니다.
this._setPos( function(o) { return o. target; } );
목표 값으로 직접 이동하면 계산 오류로 인해 부정확한 이동이 발생하는 것을 방지할 수 있습니다.
[닫고 재설정]
close 메소드는 디스플레이를 닫을 수 있습니다. 즉, 기본 상태로 밀어서 컨테이너가 밖으로 이동할 때 실행됩니다.
기본 상태란 모든 슬라이딩 요소가 defaultTarget의 기본 대상 값에 위치한 상태를 말합니다.
먼저 _setMove를 사용하여 이동 매개변수를 설정합니다. _setMove에 인덱스 매개변수가 없으면 대상 값이 기본 대상 값으로 설정됩니다.
getTarget = function(o){ return o. defaultTarget; }
매개변수 설정을 완료한 후 슬라이딩 표시와 마찬가지로 _easeMove를 실행하여 슬라이드합니다.
Reset 방식은 디스플레이를 재설정할 수 있습니다. Reset은 미끄러짐 없이 바로 목표값으로 이동하는 것을 의미합니다.
인덱스 매개변수가 없으면 _defaultMove 기본값 이동 함수가 직접 실행됩니다.
this._setPos( function(o) { return o.defaultTarget; } ); 직접 슬라이딩 요소는 기본 상태로 이동합니다.
인덱스 매개변수가 있는 경우 먼저 _setMove를 사용하여 인덱스에 따라 대상 값을 설정한 다음 _targetMove를 실행하여 대상 값으로 직접 이동합니다.
프로그램 초기화 후 재설정이 수행되고 사용자 정의된 defaultIndex가 매개변수로 사용됩니다.
인덱스에 해당하는 슬라이딩 객체를 처음부터 표시하려면 defaultIndex를 사용하세요.
[방향 모드]
프로그램에서는 방향 모드를 아래쪽, 위쪽, 오른쪽, 왼쪽(기본값)의 4가지 방향 모드로 설정할 수 있습니다.
오른쪽과 왼쪽은 수평 방향으로 슬라이드되고, 하단과 상단은 수직 방향으로 슬라이드됩니다.
오른쪽과 왼쪽의 차이점은 고정점의 방향이 다르다는 것입니다. 왼쪽은 왼쪽을 고정점으로 사용하여 오른쪽으로 슬라이드하는 반면 오른쪽은 그 반대입니다.
아래와 위의 차이도 비슷해서 구체적인 예를 들어 이해하셔야 합니다.
각 방향에 대해 해당 방향의 좌표 스타일을 수정하여 프로그램을 구현합니다.
예를 들어 왼쪽 모드는 '왼쪽' 스타일을 사용하여 움직임 효과를 만들고, 위쪽 모드는 '상단' 스타일을 사용합니다.
초기화 프로그램에 설정된 _pos 속성은 현재 모드에서 사용할 좌표 스타일을 기록하는 데 사용됩니다.
this._pos = /^(하단|상단|오른쪽|왼쪽) $/ .test( opt.mode.toLowerCase() ) ? RegExp.$1 : "left";
그런 다음 _setPos 메서드에서 _pos로 지정된 좌표 스타일을 사용하여 좌표 값을 설정합니다.
var pos = this._pos;
this._each( function(o, i) {
o.node.style[ pos ] = (o.current = Math.round(method.call( this, o )) ) " px";
});
_horizontal 속성은 수평으로 미끄러지는지, 즉 오른쪽인지 왼쪽인지를 기록합니다.
치수를 계산할 때 가로 또는 세로 치수를 사용할지 여부를 지정하는 데 사용합니다.
아래쪽 모드인지 오른쪽 모드인지 판단하는 _reverse 속성도 있습니다.
< ;div style ="right:200px;">0
이를 위해서는 dom 구조를 수정하거나 zIndex를 통해 스택 순서를 설정해야 합니다.
zIndex를 설정하는 방법이 더 좋은데, 프로그램에서도 이 방법을 사용했습니다.
프로그램은 _reverse 속성을 사용하여 이러한 수정이 필요한지 여부를 결정합니다.
먼저 _initContainer에서 _reverse에 따라 zIndex를 재설정합니다.
var zIndex = 100,gradient = this._reverse ? -1 : 1
this._each( function(o){
var style = o.node .style;
style.position = "absolute"; style.zIndex = zIndex =gradient;
})
_initNodes에서는 기본 대상 값을 가져올 때도 판단해야 합니다. :
getDefaultTarget = this._reverse
? function(i){ return defaultSize * ( maxIndex - i ) }
: function(i){ return defaultSize * i; when_reverse true인 경우 고정 소수점 위치가 인덱스의 반대 방향이므로 요소를 반대 방향으로 설정해야 하므로 maxIndex를 이용하여 빼주어야 한다.
_setMove에서 인덱스에 따라 슬라이딩 목표값을 설정할 때 다음 사항도 판단해야 합니다.
var get = getTarget;
index = maxIndex - index
getTarget = function( o, i){ return get( o, maxIndex - i ); }
}
[자동 디스플레이 확장]
이 확장은 조합 모드를 사용합니다. 원리는 ImageZoom 확장 기사의 확장 모드 부분을 참조하세요.
차이점은 확장 메서드를 추가하기 위해 속성 확장이 추가된다는 점입니다.
$$.extend( this, 프로토타입 )
SlideView.prototype에 추가할 수 없습니다. 이는 SlideView의 구조에 영향을 미치기 때문입니다.
"자동 표시"는 슬라이딩 개체의 자동 회전 표시를 구현하고 기본 상태를 취소하고 사진 회전 표시에 사용할 수 있는 강제 표시를 구현하는 것을 목표로 합니다.
SlideView 뒤에 자동 표시 확장을 추가하고 자동 매개변수를 true로 설정하면 활성화됩니다.
원칙도 매우 간단합니다. 즉, 각 슬라이드/이동이 완료된 후 타이머를 사용하여 다음 슬라이드를 수행하면 됩니다.
먼저 "init" 초기화 프로그램에 _NEXT 프로그램을 추가하여 다음 슬라이딩 개체를 표시합니다.
this._NEXT = $$F.bind( function( ){ this .show( this._index 1 ); }, this );
실제로는 현재 인덱스 _index에 1을 더해 show의 매개변수로 실행하는 것입니다.
다른 _autoNext 메소드 추가:
clearTimeout(this._autoTimer);
this._autoTimer = setTimeout( this._NEXT, this.autoDelay )
}
_NEXT 프로그램의 실행을 지연시키는 기능이며, 실행을 잠그는 _autoPause 속성이 있습니다.
그런 다음 실행해야 할 여러 장소를 설정합니다.
먼저 "finish" 슬라이딩 이벤트에서 _autoNext 메소드를 실행하여 기본적인 자동 표시를 구현합니다.
마우스가 슬라이딩 요소에 들어간 후 자동 전환이 중지되어야 하므로 슬라이딩 요소에 "입력"하는 경우 타이머가 지워지고 _autoPause가 true로 설정되어 잠깁니다.
따라서 마우스가 컨테이너를 떠날 때 "leave" 이벤트에서 _autoPause를 다시 false로 설정하여 잠금을 해제한 다음 _autoNext 메서드를 실행하여 자동 프로그램을 다시 시작합니다.
기본 상태가 자동으로 복원되는 것을 방지하려면 "leave"에서 autoClose를 false로 설정하세요.
마지막으로 재설정을 다시 작성해야 합니다.
reset.call( this, index == undefine ? this._index : index )
this._autoNext(); 🎜>재작성된 재설정은 강제로 인덱스를 표시하고 다음 슬라이드에 대해 _autoNext를 실행합니다.
[프롬프트 정보 확장]
"프롬프트 정보" 효과는 각 슬라이딩 객체가 프롬프트 정보(콘텐츠)의 레이어(요소)에 해당한다는 의미입니다.
미닫이 개체가 표시될 때 이 프롬프트 메시지가 표시되며, 수축 및 닫힐 때 닫힙니다.
팁 확장을 추가하고 팁 매개변수를 true로 설정하면 활성화됩니다.
프롬프트 확장은 하단, 상단, 오른쪽, 왼쪽의 네 가지 위치 프롬프트를 지원합니다.
"init"에서 사용자 정의 TipMode에 따라 _tipPos 좌표 스타일을 가져옵니다.
this._tipPos = /^(bottom|top|right|left)$/.test( this. options.tipPos.toLowerCase() ) ? RegExp.$1 : "bottom";
그런 다음 슬라이딩 요소를 기반으로 팁 요소를 가져올 수 있는 함수를 "initNodes"에 정의합니다.
re =tipClass && new RegExp("(^|\s)"tipClass "(\s|$)"),
getTipNode = function(node){
var 노드 = node.getElementsByTagName(tipTag);
if (tipClass ) {
nodes = $$A.filter(nodes, function(n){ return re.test(n.className); } ); }
return node [0];
};
tipTag를 맞춤설정하면 태그를 기반으로 요소를 가져오고, 그렇지 않으면 모든 요소를 기본값 "에 따라 가져옵니다. *".
함수를 가져온 후 프롬프트 개체를 만듭니다.
node.style.overflow = "hidden";
tipNode.style.position = "absolute";tipNode.style.left = 0;
o.tip = {
"node":tipNode,
"show":tipShow != 정의되지 않음 ? tipShow : 0,
"close":tipClose != undefine ?tipClose : -tipNode[offset]
}
})
tip 요소를 먼저 가져옵니다. 관련 스타일을 설정한 다음 슬라이딩 개체에 팁 속성을 추가하고 해당 프롬프트 개체를 저장합니다.
tipShow를 사용자 정의하지 않은 경우 기본 표시 좌표 값은 0입니다. 즉, 프롬프트 요소는 슬라이딩 요소의 가장자리에 연결됩니다.
tipClose를 사용자 정의하지 않은 경우 닫을 때 기본 좌표 값은 다음과 같습니다. 프롬프트 요소의 크기, 즉 도구 설명 요소는 슬라이딩 요소 바로 외부에 숨겨집니다.
"setMove"에서 프롬프트 이동 목표 값 설정:
vartip = o.tip;
if ( this._reverse ) { i = maxIndex -i; }
tip.target == 정의되지 않음 || index != i ?tip.close :
tip.begin; ;tip.change =tip.target -tip.begin;
});
인덱스 매개변수를 설정하는 경우보다 훨씬 간단합니다. 슬라이딩 객체의 인덱스와 동일합니다. 표시되어야 하며, 그렇지 않으면 숨겨집니다.
"tweenMove", "targetMove" 및 "defaultMove"에서도 해당 이동 기능을 설정해야 합니다.
스타일 설정을 용이하게 하기 위해 _setTipPos 메소드가 확장되었습니다:
vartip = o.tip;
tip. node.style[ pos ] = (tip.current = method.call( this,tip )) "px"
})
_tipPos 좌표 스타일에 따라 좌표값을 설정하세요.
사용 팁
[디스플레이 크기]
디스플레이 크기를 맞춤 설정하려면 최대 및 최소를 통해 설정할 수 있으며 픽셀 또는 백분율로 계산할 수 있습니다. .
설정하지 않으면 요소 자체의 크기에 따라 표시됩니다.
따라서 슬라이딩 요소에 의해 표시되는 크기는 일관될 필요가 없으며 프로그램이 자동으로 계산할 수 있습니다.
[아코디언 효과]
아코디언은 아코디언과 유사한 효과를 지닌 축소형 패널 컨트롤로, 설정을 통해 유사한 효과를 얻을 수도 있습니다.
자동 닫기를 취소하려면 먼저 autoClose를 false로 설정한 후, SlideView가 펼쳐진 상태에서 닫히지 않도록 defaultIndex를 설정하세요.
일반적으로 아코디언에는 고정된 크기의 제목이 있으며, min을 사용하여 설정할 수 있습니다.
이렇게 하면 간단한 아코디언 효과가 구현됩니다. 자세한 내용은 세 번째 예를 참조하세요.
사용 지침
인스턴스화 시 매개변수로 컨테이너 개체 또는 ID가 있어야 합니다.
new SlideView( "idSlideView" );
선택적 매개변수는 다음을 포함하여 시스템의 기본 속성을 설정하는 데 사용됩니다.
속성: 기본값//설명
노드: null,//사용자 정의 표시 요소 컬렉션
모드: " 왼쪽",/ /방향
최대: 0, //표시 크기(픽셀 또는 백분율)
최소: 0, //축소 크기(픽셀 또는 백분율)
지연: 100, //트리거 지연
간격 : 20,//슬라이딩 간격
기간: 20,//슬라이딩 기간
defaultIndex: null,//기본 표시 인덱스
autoClose: true,//자동 복원 여부
tween : function( t,b,c,d){ return -c * ((t=t/d-1)*t*t*t - 1) b },//tween 연산자
onShow: function( index) {}, //디스플레이 슬라이딩 시 실행
onClose: function(){}//슬라이딩 닫기 시 실행
간격, 지연, 기간, 트윈, autoClose, onShow, onClose 속성을 동적으로 설정할 수 있습니다. 프로그램이 초기화된 후.
은 다음 메소드도 제공합니다.
show: 인덱스에 따라 슬라이딩 표시
close: 기본 상태로 슬라이딩
reset: 기본 상태로 재설정 또는 슬라이딩 객체 확장 인덱스에 해당;
dispose: 프로그램을 삭제합니다.
자동 표시를 사용하려면 SlideView 뒤에 자동 표시 확장을 추가하고 auto 매개변수를 true로 설정하면 됩니다.
다음 선택적 매개변수를 추가하세요.
autoDelay: 2000//표시 시간
프롬프트 정보를 사용하려면 프롬프트 정보 확장을 추가하고 팁 매개변수를 true로 설정하세요.
다음 선택적 매개변수를 추가하세요.
속성: 기본값//설명
tipPos: "bottom",//Tip position
tipTag: "*",//Tip 요소 태그
tipClass : "",//프롬프트 요소 스타일
tipShow: null,//표시 시 대상 좌표
tipClose: null//닫을 때 대상 좌표
프로그램 소스 코드
var SlideView = function(컨테이너, 옵션){
this._initialize(컨테이너, 옵션);
this._initContainer();
this._initNodes();
this.reset( this.options.defaultIndex );
};
SlideView.prototype = {
//初始化程序
_initialize: function(container, options) {
var 컨테이너 = this._container = $$(컨테이너);//容器对象
this._timerDelay = null;//延迟计时器
this._timerMove = null;//移动计时器
this._time = 0;//时间
this._index = 0;/ /索引
var opt = this._setOptions(options);
this.interval = opt.interval | 0;
this.delay = opt.delay | 0;
this.duration = opt.duration | 0;
this.tween = opt.tween;
this.autoClose = !!opt.autoClose;
this.onShow = opt.onShow;
this.onClose = opt.onClose;
//设置参数
var pos =this._pos = /^(bottom|top|right|left)$/.test( opt.mode.toLowerCase() ) ? RegExp.$1 : "왼쪽";
this._horizontal = /right|left/.test( this._pos );
this._reverse = /bottom|right/.test( this._pos );
//获取滑动원素
var 노드 = opt.nodes ? $$A.map( opt.nodes, function(n) { return n; } )
: $$A.filter( Container.childNodes, function(n) { return n.nodeType == 1; });
//创建滑动对象集합
this._nodes = $$A.map(nodes, function(node){
var style = node.style;
return { "node": node, "스타일": 스타일[pos], "위치": 스타일.위치, "zIndex": 스타일.zIndex }
});
//设置程序
this._MOVE = $$F.bind( this._move, this );
var CLOSE = $$F.bind( this.close, this );
this._LEAVE = $$F.bind( function(){
clearTimeout(this._timerDelay);
$$CE.fireEvent( this, "leave" );
if( this. autoClose ) { this._timerDelay = setTimeout( CLOSE, this.delay ) }
}, this );
$$CE.fireEvent( this, "init" ); 모드: "왼쪽",//方向
최대: 0,//展示尺寸(image素或百分比)
최소: 0,//收缩尺寸(image素或百分比)
지연: 100, // 触发延时 간격 : 20, // 滑动间隔 지속 시간 : 20, // 滑动持续时间
defaultIndex : null, // 默认展示索引
autoclose : true, // 是否自动恢复
tween: function(t,b,c,d){ return -c * ((t=t/d-1)*t*t*t - 1) b; },//tween算子
onShow: function(index){},//滑动展示时执行
onClose: function(){}//滑动关闭执行
};
return $$.extend(this.options, options || {});
},
//设置容器
_initContainer: function() {
//容器样式设置
var 컨테이너 = this._container, 스타일 = 컨테이너.style, 위치 = $$D .getStyle(컨테이너, "위치" );
this._style = { "position": style.position, "overflow": style.overflow };//备份样式
if ( position != "relative" && position != "absolute" ) { style .position = "상대적"; }
style.overflow = "숨김";
//移流容器时
$$E.addEvent( 컨테이너, "mouseleave", this._LEAVE );
//设置滑动원素
var zIndex = 100, 그래디언트 = this._reverse ? -1:1;
this._each( function(o){
var style = o.node.style;
style.position = "absolute"; style.zIndex = zIndex = 그래디언트;
});
$$CE.fireEvent( this, "initContainer" );
},
//设置滑动对象
_initNodes: function() {
var len = this._nodes.length, maxIndex = len - 1,
type = this._horizontal ? "너비" : "높이", 오프셋 = "오프셋" 유형,
clientSize = this._container[ "클라이언트" 유형 ],
defaultSize = Math.round( clientSize / len ),
//计算默认目标值的函数
getDefaultTarget = this._reverse
? function(i){ return defaultSize * ( maxIndex - i ); }
: function(i){ return defaultSize * i; },
max = this.options.max, min = this.options.min, getMax, getMin;
//设置参数函数
if ( max > 0 || min > 0 ) {//自정义参数值
//小数按百分比设置
if ( max > 0 ) {
max = Math.max( max <= 1 ? max * clientSize : Math.min( max, clientSize ), defaultSize );
min = ( 클라이언트 크기 - 최대 ) / maxIndex;
} else {
min = Math.min( min < 1 ? min * clientSize : min, defaultSize );
max = clientSize - maxIndex * min;
}
getMax = function(){ return max; };
getMin = function(){ return min; };
} else {//根据元素尺寸设置参数值
getMax = function(o){ return Math.max( Math.min( o.node[ offset ], clientSize ), defaultSize ); };
getMin = function(o){ return ( clientSize - o.max ) / maxIndex; };
}
//设置滑动对象
this._each( function(o, i){
//移入滑动元素时执行程序
var node = o.node, SHOW = $$F.bind( this.show, this, i );
o.SHOW = $$F.bind( function(){
clearTimeout(this._timerDelay);
this._timerDelay = setTimeout( SHOW, this.delay )
$$CE.fireEvent( this, "enter", i );, this );
$$E.addEvent( node, "mouseenter", o.SHOW )
//크기 계산
o.current = o.defaultTarget = getDefaultTarget(i);//Default 목표값
o.max(o); o.min = getMin(o)
})
$$CE.fireEvent( this, "initNodes" ); >},
//인덱스 기반 슬라이딩 디스플레이
show: function(index) {
this._setMove( index | 0 )
this.onShow( this._index );
this._easeMove();
},
//기본 상태로 슬라이드
close: function() {
this._setMove()
this.onClose() ;
this._easeMove();
},
//기본 상태로 재설정하거나 해당 슬라이딩 개체를 확장합니다
reset: function(index) {
clearTimeout(this._timerDelay );
if ( index == undefine ) {
this._defaultMove();
} else {
this._setMove(index)
this.onShow(this._index );
this._targetMove();
}
},
//슬라이딩 매개변수 설정
_setMove: function(index) {
var setTarget;//대상 값 설정 function
if ( index == undefine ) {//기본 상태 대상 값 설정
getTarget = function(o){ return o.defaultTarget; }
} else {//에 따라 슬라이딩 대상 값 설정 인덱스로
varnodes = this._nodes, maxIndex = node.length - 1;//인덱스 설정
this._index = index = index < 0 || maxIndex ? index | 0;
//표시 매개변수 설정
var nodeShow = node[ index ], min = nodeShow.min, max = nodeShow.max
getTarget = function(o, i){ return i < ;= index ? min * i : min * ( i - 1 ) max };
if ( this._reverse ) {
var get = getTarget;
getTarget; = function(o, i) { return get( o, maxIndex - i ); }
}
}
this._each( function(o, i){
o.target = getTarget( o, i);// 목표 값 설정
o.begin = o.current;//시작 값 설정
o.change = o.target - o.begin;//변경 값 설정
} );
$$ CE.fireEvent( this, "setMove", index )
},
//Slip 프로그램
_easeMove: function() {
this._time = 0; this._move ();
},
//프로그램 이동
_move: function() {
if ( this._time < this.duration ){//도달하지 않음
this._tweenMove( );
this._time ;
this._timerMove = setTimeout( this._MOVE, this.interval )
} else {//Complete
this._targetMove() ;//계산 오류 방지
$$CE.fireEvent( this, "finish" )
}
},
//tween 이동 함수
_tweenMove: function() {
this._setPos( function(o) {
return this.tween( this._time, o.begin, o.change, this.duration );
}); .fireEvent( this, " tweenMove" );
},
//타겟 값 이동 함수
_targetMove: function() {
this._setPos( function(o) { return o.target; } );
$$CE.fireEvent( this, "targetMove" );
},
//기본값 이동 함수
_defaultMove: function() {
this._setPos( 함수 (o) { return o .defaultTarget; } );
$$CE.fireEvent( this, "defaultMove" )
},
//좌표값 설정
_setPos: function(method) {
clearTimeout( this._timerMove);
var pos = this._pos;
this._each( function(o, i) {
o.node.style[ pos ] = (o. current = Math.round( method.call( this, o ))) "px";
})
},
//슬라이딩 객체 컬렉션 탐색
_each: 함수 (콜백) {
$$A.forEach( this._nodes, callback, this )
},
//프로그램 삭제
dispose: function() {
clearTimeout(this._timerDelay);
clearTimeout(this._timerMove);
$$CE.fireEvent( this, "dispose" ); var pos = this._pos; 🎜>this._each( 함수(o) {
var style = o.node.style;
style[pos] = o.style; style.zIndex = o.zIndex; style.position = o.position ;//스타일 복원
$$E.removeEvent( o.node, "mouseenter", o.SHOW ) o.SHOW = o.node = null;
$$E. RemoveEvent( this._container, " mouseleave", this._LEAVE )
$$D.setStyle( this._container, this._style )
this._container = this._nodes = this._MOVE = this._LEAVE = null;
$$CE.clearEvent( this );
}
}
확장 프로그램 자동 표시
코드 복사
코드는 다음과 같습니다.
SlideView.prototype._initialize = (function(){
var init = SlideView.prototype._initialize,
reset = SlideView.prototype.reset,
methods = {
" init": function(){
this.autoDelay = this.options.autoDelay | 0;
this._autoTimer = null;//정정时器
this._autoPause = false;//暂停자동 확장
// 확장 下一个滑动对象
this._NEXT = $$F.bind( function(){ this.show( this._index 1 ); }, this ),
"leave": function(){
this.autoClose = this._autoPause = false;
this._autoNext()
},
"enter": function(){
clearTimeout(this._autoTimer);
this._autoPause = true;
},
"finish": function(){
this._autoNext(); "dispose": function(){
clearTimeout(this._autoTimer);
}
},
prototype = {
_autoNext: function(){
if ( !this. _autoPause ) {
clearTimeout(this._autoTimer);
this._autoTimer = setTimeout( this._NEXT, this.autoDelay )
}
},
reset: function(index) {
reset.call( this, index == 정의되지 않음 ? this._index : index )
this._autoNext()
}
};
return 함수(){
var options = 인수[1];
if ( options && options.auto ) {
//扩 확장 옵션
$$.extend( options, {
autoDelay: 2000// Exhibition示时间
}, false );
//扩전시성
$$.extend( this, 프로토타입 );
//扩展钩子
$$A.forEach( 메소드, 함수( 메소드, 이름 ){
$$CE.addEvent( this, name, 메소드 );
}, this );
}
init.apply( this, 인수 );
}
})();
提示信息扩展
"init": function(){
//坐标样式
this._tipPos = /^(bottom|top|right|left)$/.test( this.options.tipPos.toLowerCase() ) ? RegExp.$1 : "bottom"; "initNodes": function(){
var opt = this.options,tipTag = opt.tipTag,tipClass = opt.tipClass,
re =tipClass && new RegExp("(^|\s)"tipClass " (\s|$)"),
getTipNode = function(node){
var 노드 = node.getElementsByTagName(tipTag );
if (tipClass ) {
nodes = $$A.filter ( 노드, function(n){ return re.test(n.className); } )
}
return 노드[0]
}
//设置提示对象
vartipShow = opt.tipShow,tipClose = opt.tipClose,
offset = /right|left/.test( this._tipPos ) ? "offsetWidth" : "offsetHeight"
this._each( function(o) {
var node = o.node,tipNode = getTipNode(node);
node.style.overflow = "hidden";
tipNode.style.position = "absolute"; TipNode.style.left = 0;
//创建提示对象
o.tip = {
"node":tipNode,
"show":tipShow != undefine ? TipShow : 0,
"close": TipClose != 정의되지 않음 ? TipClose : -tipNode[오프셋]
};
});
},
"setMove": function(index){
var maxIndex = this._nodes.length - 1;
this._each( function(o, i) {
vartip = o.tip;
if ( this._reverse ) { i = maxIndex -i; }
tip.target = index = = 정의되지 않음 || 인덱스 != i ?tip.show :
tip.begin =tip.current;tip.change =tip.target
});
},
"tweenMove": function(){
this._setTipPos( function(tip) {
return Math.round( this.tween( this._time,tip.begin,tip. 변경, this.duration ) )
});
},
"targetMove": function(){
this._setTipPos( function(tip){ returntip.target; });
},
"defaultMove": function(){
this._setTipPos( function(tip){ returntip.close; });
},
"dispose": function(){
this._each( function(o){ o.tip = null; });
}
},
prototype = {
//设置坐标值函数
_setTipPos: function(method) {
var pos = this._tipPos;
this._each( function(o, i) {
vartip = o.tip;
tip.node.style[ pos ] = (tip.current = method.call(this,tip )) "px"
});
}
};
return 함수(){
var options = 인수[1];
if ( options && options.tip == true ) {
//扩 확장options
$$.extend( options, {
tipPos: "bottom",//提示位置
tipTag : "*",//提示元素标签
tipClass: "",//提示元素样式
tipShow: null,// Exhibition示时目标坐标
tipClose: null//关闭时目标坐标
}, 거짓 );
//扩전시성
$$.extend( this, 프로토타입 );
//扩展钩子
$$A.forEach( 메소드, 함수( 메소드, 이름 ){
$$CE.addEvent( this, name, 메소드 );
}, this );
}
init.apply( this, 인수 );
}
})();
完整实例下载
원문:
http://www.cnblogs.com/cloudgamer/archive/2010/07/ 29/SlideView.html