复制代码代码如下:
$( function()
{
/***객체 메소드, 일부 멤버 변수 할당
변수: elem: 위아래로 이동할 도구 모음 영역 이름(요소 이름, ID, 클래스의 조합)
perHight: 이동할 각 그리드의 길이 a time
slideN: 도구 모음에 있는 도구 행 수
showN: 표시되는 도구 행 수(여기서는 3)
speed: 한 번 이동하는 데 걸리는 밀리초 수
index: 가시 영역의 첫 번째 행
barElem 인덱스: 슬라이더 이름(요소 이름, ID 및 클래스의 조합)
***/
function toolBar(elem,perHeight,slideN,showN,speed,index,barElem)
{ …}
toolBar.prototype=
{
/***슬라이더 막대 높이 설정
높이 계산 공식: 슬라이더 막대에 설정할 수 있는 최대 높이 *표시되는 도구 행 수/도구 모음에 있는 도구의 총 행 수
***/
initBar:function()
{…},
/***툴바 슬라이딩 기능, to는 슬라이딩할 인덱스로, 상하 버튼을 클릭하거나 슬라이드바를 움직일 때 이 기능이 실행됩니다** */
slide:function(to)
{… },
/***슬라이드 바 슬라이딩 기능, to는 슬라이딩할 인덱스로, 이 기능은 위, 아래 버튼을 클릭할 때 실행되며 슬라이드 기능과 동기적으로 구현됩니다***/
barSlide:function(to)
{… **이 함수는 위쪽 및 아래쪽 버튼에 대한 클릭 이벤트를 추가합니다
upelem: 위쪽 버튼 이름(요소 이름, ID 및 클래스 조합)
downelem: 아래쪽 버튼 이름(요소 이름 조합) 이름, 아이디, 클래스)
***/
clickTab:function(upelem,downelem)
{…},
/***슬라이드 바를 드래그하는 기능은 드래그 후 도구 상자도 그에 따라 이동합니다.
elem : 이동해야 할 요소의 이름(요소명, id, 클래스의 조합)
handle : 해당 요소를 이동하기 위해 드래그해야 하는 핸들 요소의 이름(요소의 조합) 요소 이름, ID 및 클래스)
uplev: 드래그된 요소의 가장 높은 지점(여기서는 0)
downlev: 드래그된 요소의 가장 낮은 지점(여기서는 196)
***/
drag:function(elem,handle,uplev ,downlev )
{…}
}
/***객체의 인스턴스화 및 관련 함수 호출은 다음과 같습니다***/
})
전체 js 코드는 다음과 같습니다.
코드 복사 코드는 다음과 같습니다.
$(function()
{
function toolBar(elem,perHeight,slideN,showN,speed,index,barElem)
{
this.elem=$(elem) ;
this.perHeight=perHeight;
this.showN=showN;
this.index=index; .barElem=barElem;
}
toolBar.prototype=
{
initBar:function()
{
var tl=$(this.barElem).parent().height ();
$(this.barElem).css({'height':tl*this.showN/this.slideN});
},
slide:function(to)
{
this.elem.animate({'top':-(to*this.perHeight)},this.speed)
},
barSlide:function(to)
{
var tl=$(this.barElem).parent().height();
$(this.barElem).animate({'top':tl*to/this.slideN},this.speed)
},
clickTab:function(upelem,downelem)
{
var _this=this;
$(upelem).bind('click',function()
{
if (_this.index>0)
{
_this.index--;
_this.barSlide(_this.index);
return false;
});
$(downelem).bind('click',function()
{
if(_this.index<_this.sliden-_this.shown>{
_this.index ;
_this.slide(_this.index);
_this.barSlide(_this.index);
}
false を返します。
});
},
drag:function(elem,handle,uplev,downlev)
{
var _this=this;
var tl=$(this.barElem).parent().height();
var C=$(elem);
var dy、移動します。
var T = $(ハンドル);
T.bind("selectstart", function()
{
return false;
});
T.mousedown(function(e)
{
//dx = e.clientX - parseInt(C.css("left"));
e=e?e:window.event ;
dy = e.clientY - parseInt(C.css("top"));
C.mousemove(move).mouseout(out).css('opacity', 0.8); .mouseup(上)
});
関数 move(e)
{
e=e?e:window.event;
moveout = false;
if((e.clientY - dy)>=uplev&&(e.clientY - dy)
C.css({"top": e.クライアントY - dy});
}
関数 out(e)
{
e=e?e:window.event;
moveout = true;
setTimeout(function(){checkout(e);}, 100);
}
関数 up(e)
{
e=e?e:window.event;
varadaptTop;
var presTop=parseInt(C.css("top"));
C.unbind("mousemove", move).unbind("mouseout", out).css('opacity', 1);
T.unbind("マウスアップ", アップ);
//alert(parseInt(_this.slideN));
if(((presTop/(tl/_this.slideN))-parseInt(presTop/(tl/_this.slideN)))>=0.5)
{
_this.index=parseInt(presTop /(tl/_this.slideN)) 1;
}
else
{
_this.index=parseInt(presTop/(tl/_this.slideN));
}
adaptTop=_this.index*(tl/_this.slideN);
_this.slide(_this.index);
C.css({"top":adaptTop});
}
関数 checkout(e)
{
e=e?e:window.event;
moveout && up(e);
}
}
}
var slength=$("#smallTools .innerToolBox ul").length;
var stBox=new toolBar("#smallTools .innerToolBox",69,slength,3,700,0,"#smallTools .innerBar");
stBox.initBar();
stBox.clickTab("#smallTools .upBtn","#smallTools .downBtn");
stBox.drag("#smallTools .innerBar","#smallTools .innerBar",0,196);
})
水平限定、註釈がある場合、敬请批判指示正。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
