_NEXT 프로그램의 실행을 지연시키는 기능이며, 실행을 잠그는 _autoPause 속성이 있습니다.
그런 다음 실행해야 할 여러 장소를 설정합니다.
먼저 "finish" 슬라이딩 이벤트에서 _autoNext 메소드를 실행하여 기본적인 자동 표시를 구현합니다.
마우스가 슬라이딩 요소에 들어간 후 자동 전환이 중지되어야 하므로 슬라이딩 요소에 "입력"하는 경우 타이머가 지워지고 _autoPause가 true로 설정되어 잠깁니다.
따라서 마우스가 컨테이너를 떠날 때 "leave" 이벤트에서 _autoPause를 다시 false로 설정하여 잠금을 해제한 다음 _autoNext 메서드를 실행하여 자동 프로그램을 다시 시작합니다.
기본 상태가 자동으로 복원되는 것을 방지하려면 "leave"에서 autoClose를 false로 설정하세요.
마지막으로 재설정을 다시 작성해야 합니다.
this._autoNext(); 🎜>재작성된 재설정은 강제로 인덱스를 표시하고 다음 슬라이드에 대해 _autoNext를 실행합니다.
"프롬프트 정보" 효과는 각 슬라이딩 객체가 프롬프트 정보(콘텐츠)의 레이어(요소)에 해당한다는 의미입니다.
미닫이 개체가 표시될 때 이 프롬프트 메시지가 표시되며, 수축 및 닫힐 때 닫힙니다.
팁 확장을 추가하고 팁 매개변수를 true로 설정하면 활성화됩니다.
프롬프트 확장은 하단, 상단, 오른쪽, 왼쪽의 네 가지 위치 프롬프트를 지원합니다.
"init"에서 사용자 정의 TipMode에 따라 _tipPos 좌표 스타일을 가져옵니다.
this._tipPos = /^(bottom|top|right|left)$/.test( this. options.tipPos.toLowerCase() ) ? RegExp.$1 : "bottom";
그런 다음 슬라이딩 요소를 기반으로 팁 요소를 가져올 수 있는 함수를 "initNodes"에 정의합니다.
tipClass가 맞춤설정된 경우 요소는 className을 기준으로 필터링됩니다. 여러 스타일이 포함될 수 있으며 직접 동일할 수는 없습니다.
함수를 가져온 후 프롬프트 개체를 만듭니다.
"node" 속성은 프롬프트 요소를 저장하며, "show"는 표시될 때의 좌표값, "close"는 닫힐 때의 좌표값입니다.
tipShow를 사용자 정의하지 않은 경우 기본 표시 좌표 값은 0입니다. 즉, 프롬프트 요소는 슬라이딩 요소의 가장자리에 연결됩니다.
tipClose를 사용자 정의하지 않은 경우 닫을 때 기본 좌표 값은 다음과 같습니다. 프롬프트 요소의 크기, 즉 도구 설명 요소는 슬라이딩 요소 바로 외부에 숨겨집니다.
슬라이딩 객체와 마찬가지로 _reverse가 true인 경우 인덱스를 수정해야 한다는 점에 유의해야 합니다.
"tweenMove", "targetMove" 및 "defaultMove"에서도 해당 이동 기능을 설정해야 합니다.
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 <= 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, 인수 );
}
})();
提示信息扩展
复代码
代码如下: 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
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
