찾다
웹 프론트엔드JS 튜토리얼SlideView 그림 슬라이딩(확장/축소) 표시 효과_javascript 기술

사실 제가 예전에 썼던 그림 슬라이딩 디스플레이 효과를 개선한 버전인데, 이제 좀 더 관심을 끌게 되었습니다.
에는 다음과 같은 기능이 있습니다.
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 min = (clientSize - max) / maxIndex;
여기서 clientSize는 컨테이너의 표시 영역 크기이고 defaultSize는 평균 할당 크기입니다.
max가 십진수 또는 1인 경우 백분율로 계산한 다음 defaultSize에서 clientSize까지의 범위로 크기를 제한합니다.
그런 다음 최대값을 뺀 후 다른 축소 요소의 평균 크기를 계산하면 최소값을 얻을 수 있습니다.

맞춤 최대값이 없으면 맞춤 최소값에 따라 계산합니다.


min = Math.min( min 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

그런 다음 인덱스에 따라 표시할 슬라이딩 개체를 얻고 표시된 개체의 최소 및 최대를 통해 getTarget 대상 값 함수를 가져옵니다.

var nodeShow = node[ index ], min = nodeShow.min, max = nodeShow .max
getTarget = function(o, i){ return i 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 속성도 있습니다.

코드 복사 코드는 다음과 같습니다.

2

1

< ;div style ="right:200px;">0



이를 위해서는 dom 구조를 수정하거나 zIndex를 통해 스택 순서를 설정해야 합니다.
코드 복사 코드는 다음과 같습니다.

0

1

2



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에서 인덱스에 따라 슬라이딩 목표값을 설정할 때 다음 사항도 판단해야 합니다.


코드 복사 코드는 다음과 같습니다.
if ( this._reverse ) {
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 메소드 추가:

코드 복사 코드는 다음과 같습니다.
if ( !this._autoPause ) {
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"에 정의합니다.


코드 복사 코드는 다음과 같습니다.
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(nodes, function(n){ return re.test(n.className); } ); }
return node [0];
};


tipTag를 맞춤설정하면 태그를 기반으로 요소를 가져오고, 그렇지 않으면 모든 요소를 ​​기본값 "에 따라 가져옵니다. *".
tipClass가 맞춤설정된 경우 요소는 className을 기준으로 필터링됩니다. 여러 스타일이 포함될 수 있으며 직접 동일할 수는 없습니다.

함수를 가져온 후 프롬프트 개체를 만듭니다.


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 != 정의되지 않음 ? tipShow : 0,
"close":tipClose != undefine ?tipClose : -tipNode[offset]
}
})


tip 요소를 먼저 가져옵니다. 관련 스타일을 설정한 다음 슬라이딩 개체에 팁 속성을 추가하고 해당 프롬프트 개체를 저장합니다.
"node" 속성은 프롬프트 요소를 저장하며, "show"는 표시될 때의 좌표값, "close"는 닫힐 때의 좌표값입니다.
tipShow를 사용자 정의하지 않은 경우 기본 표시 좌표 값은 0입니다. 즉, 프롬프트 요소는 슬라이딩 요소의 가장자리에 연결됩니다.
tipClose를 사용자 정의하지 않은 경우 닫을 때 기본 좌표 값은 다음과 같습니다. 프롬프트 요소의 크기, 즉 도구 설명 요소는 슬라이딩 요소 바로 외부에 숨겨집니다.

"setMove"에서 프롬프트 이동 목표 값 설정:



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.close :
tip.begin; ;tip.change =tip.target -tip.begin;
});


인덱스 매개변수를 설정하는 경우보다 훨씬 간단합니다. 슬라이딩 객체의 인덱스와 동일합니다. 표시되어야 하며, 그렇지 않으면 숨겨집니다.
슬라이딩 객체와 마찬가지로 _reverse가 true인 경우 인덱스를 수정해야 한다는 점에 유의해야 합니다.
"tweenMove", "targetMove" 및 "defaultMove"에서도 해당 이동 기능을 설정해야 합니다.

스타일 설정을 용이하게 하기 위해 _setTipPos 메소드가 확장되었습니다:



var pos = this._tipPos;
this._each( function(o, i) {
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 min = ( 클라이언트 크기 - 최대 ) / maxIndex;
} else {
min = Math.min( min 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 //표시 매개변수 설정
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._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, 인수 );
}
})();


提示信息扩展



复代码 代码如下: SlideView.prototype._initialize = (function(){
var init = SlideView.prototype._initialize,
methods = {
"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
성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
JavaScript로 문자열 문자를 교체하십시오JavaScript로 문자열 문자를 교체하십시오Mar 11, 2025 am 12:07 AM

JavaScript 문자열 교체 방법 및 FAQ에 대한 자세한 설명 이 기사는 JavaScript에서 문자열 문자를 대체하는 두 가지 방법 인 내부 JavaScript 코드와 웹 페이지의 내부 HTML을 탐색합니다. JavaScript 코드 내부의 문자열을 교체하십시오 가장 직접적인 방법은 대체 () 메소드를 사용하는 것입니다. str = str.replace ( "find", "replace"); 이 메소드는 첫 번째 일치 만 대체합니다. 모든 경기를 교체하려면 정규 표현식을 사용하고 전역 플래그 g를 추가하십시오. str = str.replace (/fi

내 자신의 JavaScript 라이브러리를 어떻게 작성하고 게시합니까?내 자신의 JavaScript 라이브러리를 어떻게 작성하고 게시합니까?Mar 18, 2025 pm 03:12 PM

기사는 JavaScript 라이브러리 작성, 게시 및 유지 관리, 계획, 개발, 테스트, 문서 및 홍보 전략에 중점을 둡니다.

브라우저에서 성능을 위해 JavaScript 코드를 최적화하려면 어떻게해야합니까?브라우저에서 성능을 위해 JavaScript 코드를 최적화하려면 어떻게해야합니까?Mar 18, 2025 pm 03:14 PM

이 기사는 브라우저에서 JavaScript 성능을 최적화하기위한 전략에 대해 설명하고 실행 시간을 줄이고 페이지로드 속도에 미치는 영향을 최소화하는 데 중점을 둡니다.

jQuery 매트릭스 효과jQuery 매트릭스 효과Mar 10, 2025 am 12:52 AM

매트릭스 영화 효과를 페이지에 가져 오십시오! 이것은 유명한 영화 "The Matrix"를 기반으로 한 멋진 jQuery 플러그인입니다. 플러그인은 영화에서 클래식 그린 캐릭터 효과를 시뮬레이션하고 사진을 선택하면 플러그인이 숫자로 채워진 매트릭스 스타일 사진으로 변환합니다. 와서 시도해보세요. 매우 흥미 롭습니다! 작동 방식 플러그인은 이미지를 캔버스에로드하고 픽셀 및 색상 값을 읽습니다. data = ctx.getImageData (x, y, settings.grainsize, settings.grainsize) .data 플러그인은 그림의 직사각형 영역을 영리하게 읽고 jQuery를 사용하여 각 영역의 평균 색상을 계산합니다. 그런 다음 사용하십시오

브라우저 개발자 도구를 사용하여 JavaScript 코드를 효과적으로 디버그하려면 어떻게해야합니까?브라우저 개발자 도구를 사용하여 JavaScript 코드를 효과적으로 디버그하려면 어떻게해야합니까?Mar 18, 2025 pm 03:16 PM

이 기사는 브라우저 개발자 도구를 사용하여 효과적인 JavaScript 디버깅, 중단 점 설정, 콘솔 사용 및 성능 분석에 중점을 둡니다.

간단한 jQuery 슬라이더를 만드는 방법간단한 jQuery 슬라이더를 만드는 방법Mar 11, 2025 am 12:19 AM

이 기사에서는 jQuery 라이브러리를 사용하여 간단한 사진 회전 목마를 만들도록 안내합니다. jQuery를 기반으로 구축 된 BXSLIDER 라이브러리를 사용하고 회전 목마를 설정하기위한 많은 구성 옵션을 제공합니다. 요즘 그림 회전 목마는 웹 사이트에서 필수 기능이되었습니다. 한 사진은 천 단어보다 낫습니다! 그림 회전 목마를 사용하기로 결정한 후 다음 질문은 그것을 만드는 방법입니다. 먼저 고품질 고해상도 사진을 수집해야합니다. 다음으로 HTML과 일부 JavaScript 코드를 사용하여 사진 회전 목마를 만들어야합니다. 웹에는 다양한 방식으로 회전 목마를 만드는 데 도움이되는 라이브러리가 많이 있습니다. 오픈 소스 BXSLIDER 라이브러리를 사용할 것입니다. BXSLIDER 라이브러리는 반응 형 디자인을 지원 하므로이 라이브러리로 제작 된 회전 목마는

Angular로 CSV 파일을 업로드하고 다운로드하는 방법Angular로 CSV 파일을 업로드하고 다운로드하는 방법Mar 10, 2025 am 01:01 AM

데이터 세트는 API 모델 및 다양한 비즈니스 프로세스를 구축하는 데 매우 필수적입니다. 그렇기 때문에 CSV 가져 오기 및 내보내기가 자주 필요한 기능인 이유입니다.이 자습서에서는 각도 내에서 CSV 파일을 다운로드하고 가져 오는 방법을 배웁니다.

JavaScript로 구조 마크 업 향상JavaScript로 구조 마크 업 향상Mar 10, 2025 am 12:18 AM

JavaScript를 사용하여 강화 된 구조적 태그를 향상 시키면 파일 크기를 줄이면 웹 페이지 컨텐츠의 접근성 및 유지 관리 가능성을 크게 향상시킬 수 있습니다. JavaScript는 인용 속성을 사용하여 참조 링크를 블록 참조에 자동으로 삽입하는 등 HTML 요소에 기능을 동적으로 추가하는 데 효과적으로 사용될 수 있습니다. 구조화 된 태그와 JavaScript를 통합하면 페이지 새로 고침이 필요하지 않은 탭 패널과 같은 동적 사용자 인터페이스를 만들 수 있습니다. JavaScript가 웹 페이지의 기본 기능을 방해하지 않도록하는 것이 중요합니다. 고급 JavaScript 기술을 사용할 수 있습니다 (

See all articles

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

ZendStudio 13.5.1 맥

ZendStudio 13.5.1 맥

강력한 PHP 통합 개발 환경

안전한 시험 브라우저

안전한 시험 브라우저

안전한 시험 브라우저는 온라인 시험을 안전하게 치르기 위한 보안 브라우저 환경입니다. 이 소프트웨어는 모든 컴퓨터를 안전한 워크스테이션으로 바꿔줍니다. 이는 모든 유틸리티에 대한 액세스를 제어하고 학생들이 승인되지 않은 리소스를 사용하는 것을 방지합니다.

Eclipse용 SAP NetWeaver 서버 어댑터

Eclipse용 SAP NetWeaver 서버 어댑터

Eclipse를 SAP NetWeaver 애플리케이션 서버와 통합합니다.

WebStorm Mac 버전

WebStorm Mac 버전

유용한 JavaScript 개발 도구

Atom Editor Mac 버전 다운로드

Atom Editor Mac 버전 다운로드

가장 인기 있는 오픈 소스 편집기