꽤 유명한
이쁜 스크롤 생기는 jquery 입니다 가로스크롤 이미지만 잘 입히면 꽤 이쁩니다.
이쁜 스크롤 생기는 jquery 입니다 가로스크롤 이미지만 잘 입히면 꽤 이쁩니다.
테스트 화면 ; http://manos.malihu.gr/tuts/jquery_custom_scrollbar.html
다운로드 : http://manos.malihu.gr/jquery-custom-content-scroller
다운로드 : http://manos.malihu.gr/jquery-custom-content-scroller
부드럽게 스크롤 해줍니다
압축푸시고 jquery_custorm_scrollbar.html 여시면 테스트 화면과 동일합니다
열어보시면
제일 하단에 보시면 이부분이 컨트롤 부분입니다
function mCustomScrollbars(){
//malihu custom scrollbar function parameters:
//1) scroll type (values: "vertical" or "horizontal") //"#mcs5_container" 제일 하단 모델입니다
//2) scroll easing amount (0 for no easing) // 이동 방법입니다 값이 크면 클수록 시간이 이동 시간이 깁니다
//3) scroll easing type // jquery.easing.1.3.js 에 기능이 있습니다 easeInQuad , easeOutCirc ....
//4) extra bottom scrolling space for vertical scroll type only (minimum value: 1)// 수직 스크롤만 생깁니다 하단에 여백을 정의합니다
//5) scrollbar height/width adjustment (values: "auto" or "fixed") //스크롤을 고정으로 할지를 보여줍니다
//6) mouse-wheel support (values: "yes" or "no") //마우스 휠사용할것인지를 보여줍니다
//7) scrolling via buttons support (values: "yes" or "no") //수평 스크롤보시면 좌우 버튼을 사용할것인지를 알려줍니다
// 8) buttons scrolling speed (values: 1-20, 1 being the slowest) //버튼을 눌렀을때 이동시간을 정의합니다
$("#mcs_container").mCustomScrollbar("vertical",400,"easeOutCirc",1.05,"auto","yes","yes",10);
$("#mcs2_container").mCustomScrollbar("vertical",0,"easeOutCirc",1.05,"auto","yes","no",0);
$("#mcs3_container").mCustomScrollbar("vertical",900,"easeOutCirc",1.05,"auto","no","no",0);
$("#mcs4_container").mCustomScrollbar("vertical",200,"easeOutCirc",100,"fixed","yes","no",0);
$("#mcs5_container").mCustomScrollbar("horizontal",500,"easeOutCirc",1,"fixed","yes","yes",20);
}
있습니다 수정하시면 되고요. 혹몰라 간단한 주석을 달아 놨습니다
압축푸시고 jquery_custorm_scrollbar.html 여시면 테스트 화면과 동일합니다
열어보시면
제일 하단에 보시면 이부분이 컨트롤 부분입니다
function mCustomScrollbars(){
//malihu custom scrollbar function parameters:
//1) scroll type (values: "vertical" or "horizontal") //"#mcs5_container" 제일 하단 모델입니다
//2) scroll easing amount (0 for no easing) // 이동 방법입니다 값이 크면 클수록 시간이 이동 시간이 깁니다
//3) scroll easing type // jquery.easing.1.3.js 에 기능이 있습니다 easeInQuad , easeOutCirc ....
//4) extra bottom scrolling space for vertical scroll type only (minimum value: 1)// 수직 스크롤만 생깁니다 하단에 여백을 정의합니다
//5) scrollbar height/width adjustment (values: "auto" or "fixed") //스크롤을 고정으로 할지를 보여줍니다
//6) mouse-wheel support (values: "yes" or "no") //마우스 휠사용할것인지를 보여줍니다
//7) scrolling via buttons support (values: "yes" or "no") //수평 스크롤보시면 좌우 버튼을 사용할것인지를 알려줍니다
// 8) buttons scrolling speed (values: 1-20, 1 being the slowest) //버튼을 눌렀을때 이동시간을 정의합니다
$("#mcs_container").mCustomScrollbar("vertical",400,"easeOutCirc",1.05,"auto","yes","yes",10);
$("#mcs2_container").mCustomScrollbar("vertical",0,"easeOutCirc",1.05,"auto","yes","no",0);
$("#mcs3_container").mCustomScrollbar("vertical",900,"easeOutCirc",1.05,"auto","no","no",0);
$("#mcs4_container").mCustomScrollbar("vertical",200,"easeOutCirc",100,"fixed","yes","no",0);
$("#mcs5_container").mCustomScrollbar("horizontal",500,"easeOutCirc",1,"fixed","yes","yes",20);
}
있습니다 수정하시면 되고요. 혹몰라 간단한 주석을 달아 놨습니다
간단하게 값만 변경하시면 테스트 해보실수 있습니다
이미지 변경및 레이어변경은 jquery.mCustomScrolbar.css 파일에 있습니다
즐 제작하세요
댓글 8개
13년 전
좋은 정보 알려주셔서 고맙습니다. 잘 사용하겠습니다.
Terrorboy
13년 전
오호 활용성이 크군요~
13년 전
멋지네요
아직도초짜
13년 전
고맙습니다~~
13년 전
오 완전 좋네요
13년 전
멋져요~!
11년 전
좋은 소스 너무 감사드립니다.^^
10년 전
제 뽀뽀 받아주세용. ㅎ
게시판 목록
프로그램
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 4430 | 13년 전 | 825 | ||
| 4429 | 13년 전 | 1148 | ||
| 4428 | 13년 전 | 1940 | ||
| 4427 | 13년 전 | 1059 | ||
| 4426 | 13년 전 | 521 | ||
| 4425 | 13년 전 | 9875 | ||
| 4424 |
 디자인하라 |
13년 전 | 839 | |
| 4423 |
 넓은마인드 |
13년 전 | 707 | |
| 4422 |
aequum
|
13년 전 | 1286 | |
| 4421 | 13년 전 | 2410 | ||
| 4420 | 13년 전 | 1204 | ||
| 4419 | 13년 전 | 889 | ||
| 4418 |
한번잘해보자
|
13년 전 | 671 | |
| 4417 | 13년 전 | 1578 | ||
| 4416 | 13년 전 | 871 | ||
| 4415 | 13년 전 | 2249 | ||
| 4414 | 13년 전 | 679 | ||
| 4413 | 13년 전 | 677 | ||
| 4412 | 13년 전 | 816 | ||
| 4411 | 13년 전 | 1437 | ||
| 4410 |
넓은마인드 |
13년 전 | 695 | |
| 4409 | 13년 전 | 2164 | ||
| 4408 |
visualp
|
13년 전 | 531 | |
| 4407 |
visualp
|
13년 전 | 3086 | |
| 4406 |
visualp
|
13년 전 | 3252 | |
| 4405 |
visualp
|
13년 전 | 3151 | |
| 4404 |
visualp
|
13년 전 | 2976 | |
| 4403 |
넓은마인드 |
13년 전 | 666 | |
| 4402 |
gender
|
13년 전 | 620 | |
| 4401 | 13년 전 | 1112 | ||
| 4400 |
aequum
|
13년 전 | 1378 | |
| 4399 | 13년 전 | 586 | ||
| 4398 | 13년 전 | 668 | ||
| 4397 |
넓은마인드 |
13년 전 | 579 | |
| 4396 |
aequum
|
13년 전 | 4658 | |
| 4395 |
넓은마인드 |
13년 전 | 549 | |
| 4394 |
aequum
|
13년 전 | 4931 | |
| 4393 |
 jakekwak |
13년 전 | 1264 | |
| 4392 | 13년 전 | 1053 | ||
| 4391 |
mirrV
|
13년 전 | 528 | |
| 4390 |
파워웹프로
|
13년 전 | 702 | |
| 4389 | 13년 전 | 1224 | ||
| 4388 |
Coding
|
13년 전 | 699 | |
| 4387 |
aequum
|
13년 전 | 1359 | |
| 4386 | 13년 전 | 867 | ||
| 4385 | 13년 전 | 722 | ||
| 4384 | 13년 전 | 786 | ||
| 4383 | 13년 전 | 2899 | ||
| 4382 | 13년 전 | 605 | ||
| 4381 | 13년 전 | 1169 | ||
| 4380 | 13년 전 | 803 | ||
| 4379 |
 cshop |
13년 전 | 746 | |
| 4378 | 13년 전 | 663 | ||
| 4377 | 13년 전 | 3300 | ||
| 4376 |
aequum
|
13년 전 | 1214 | |
| 4375 |
클로로다인
|
13년 전 | 647 | |
| 4374 |
DDFACTORY
|
13년 전 | 719 | |
| 4373 |
까탈스런ET
|
13년 전 | 705 | |
| 4372 | 13년 전 | 801 | ||
| 4371 | 13년 전 | 565 | ||
| 4370 |
 pjhsir |
13년 전 | 644 | |
| 4369 |
프리프리닷
|
13년 전 | 1301 | |
| 4368 | 13년 전 | 3165 | ||
| 4367 |
soing
|
13년 전 | 1574 | |
| 4366 |
 소울페이지 |
13년 전 | 683 | |
| 4365 |
소울페이지 |
13년 전 | 622 | |
| 4364 |
소울페이지 |
13년 전 | 756 | |
| 4363 |
소울페이지 |
13년 전 | 621 | |
| 4362 |
소울페이지 |
13년 전 | 724 | |
| 4361 |
소울페이지 |
13년 전 | 841 | |
| 4360 |
소울페이지 |
13년 전 | 649 | |
| 4359 |
소울페이지 |
13년 전 | 3124 | |
| 4358 |
소울페이지 |
13년 전 | 3038 | |
| 4357 | 13년 전 | 841 | ||
| 4356 | 13년 전 | 1339 | ||
| 4355 | 13년 전 | 965 | ||
| 4354 | 13년 전 | 814 | ||
| 4353 | 13년 전 | 3372 | ||
| 4352 | 13년 전 | 2373 | ||
| 4351 | 13년 전 | 1960 | ||
| 4350 |
jakekwak |
13년 전 | 1875 | |
| 4349 | 13년 전 | 650 | ||
| 4348 |
aequum
|
13년 전 | 1405 | |
| 4347 | 13년 전 | 657 | ||
| 4346 |
 TopSchooL |
13년 전 | 565 | |
| 4345 | 13년 전 | 597 | ||
| 4344 |
aequum
|
13년 전 | 1001 | |
| 4343 |
cshop |
13년 전 | 1037 | |
| 4342 |
aequum
|
13년 전 | 1628 | |
| 4341 | 13년 전 | 798 | ||
| 4340 |
2번호랑이
|
13년 전 | 1001 | |
| 4339 |
TopSchooL |
13년 전 | 1167 | |
| 4338 | 13년 전 | 1163 | ||
| 4337 | 13년 전 | 519 | ||
| 4336 |
aequum
|
13년 전 | 1704 | |
| 4335 | 13년 전 | 883 | ||
| 4334 | 13년 전 | 1182 | ||
| 4333 |
Sturmvogel
|
13년 전 | 959 | |
| 4332 |
aequum
|
13년 전 | 1281 | |
| 4331 |
aequum
|
13년 전 | 1394 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기