꽤 유명한
이쁜 스크롤 생기는 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개
14년 전
좋은 정보 알려주셔서 고맙습니다. 잘 사용하겠습니다.
Terrorboy
14년 전
오호 활용성이 크군요~
14년 전
멋지네요
아직도초짜
14년 전
고맙습니다~~
14년 전
오 완전 좋네요
13년 전
멋져요~!
11년 전
좋은 소스 너무 감사드립니다.^^
10년 전
제 뽀뽀 받아주세용. ㅎ
게시판 목록
프로그램
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 330 |
prosper
|
20년 전 | 2287 | |
| 329 |
prosper
|
20년 전 | 1917 | |
| 328 |
prosper
|
20년 전 | 1711 | |
| 327 | 20년 전 | 3776 | ||
| 326 | 20년 전 | 4864 | ||
| 325 |
hwatta
|
20년 전 | 2492 | |
| 324 |
 hanpedro |
20년 전 | 3149 | |
| 323 | 20년 전 | 5874 | ||
| 322 |
hwatta
|
20년 전 | 2856 | |
| 321 |
hwatta
|
20년 전 | 2329 | |
| 320 |
yesmoa
|
20년 전 | 4580 | |
| 319 | 20년 전 | 2694 | ||
| 318 | 20년 전 | 2243 | ||
| 317 |
kyodon
|
20년 전 | 2765 | |
| 316 | 20년 전 | 2587 | ||
| 315 |
hanpedro |
20년 전 | 2889 | |
| 314 |
hanpedro |
20년 전 | 3347 | |
| 313 |
 damoa.biz |
20년 전 | 2652 | |
| 312 |
yesmoa
|
20년 전 | 4728 | |
| 311 | 20년 전 | 3284 | ||
| 310 |
홀로남은자
|
20년 전 | 4574 | |
| 309 | 20년 전 | 3011 | ||
| 308 | 20년 전 | 4144 | ||
| 307 | 20년 전 | 4380 | ||
| 306 | 20년 전 | 7042 | ||
| 305 | 20년 전 | 3877 | ||
| 304 | 20년 전 | 2776 | ||
| 303 |
크리스탈처럼
|
20년 전 | 4414 | |
| 302 | 20년 전 | 2215 | ||
| 301 |
 수다쟁이오도리씨 |
20년 전 | 4331 | |
| 300 | 20년 전 | 3819 | ||
| 299 | 20년 전 | 2634 | ||
| 298 | 20년 전 | 4843 | ||
| 297 |
 bbking |
20년 전 | 2535 | |
| 296 | 20년 전 | 4539 | ||
| 295 | 20년 전 | 3573 | ||
| 294 | 20년 전 | 3596 | ||
| 293 | 20년 전 | 3824 | ||
| 292 | 20년 전 | 3218 | ||
| 291 |
yesmoa
|
20년 전 | 5959 | |
| 290 | 20년 전 | 2947 | ||
| 289 | 20년 전 | 5870 | ||
| 288 |
bbking |
20년 전 | 2385 | |
| 287 |
bbking |
20년 전 | 1818 | |
| 286 |
bbking |
20년 전 | 2157 | |
| 285 |
bbking |
20년 전 | 3545 | |
| 284 |
bbking |
20년 전 | 2042 | |
| 283 |
bbking |
20년 전 | 4406 | |
| 282 | 20년 전 | 3385 | ||
| 281 |
bbking |
20년 전 | 2218 | |
| 280 |
bbking |
20년 전 | 7815 | |
| 279 | 20년 전 | 5564 | ||
| 278 | 20년 전 | 3002 | ||
| 277 |
hanpedro |
20년 전 | 5577 | |
| 276 | 20년 전 | 2367 | ||
| 275 | 20년 전 | 2622 | ||
| 274 | 20년 전 | 2403 | ||
| 273 | 20년 전 | 2236 | ||
| 272 | 20년 전 | 2163 | ||
| 271 | 20년 전 | 2624 | ||
| 270 | 20년 전 | 2675 | ||
| 269 | 20년 전 | 2510 | ||
| 268 | 20년 전 | 2700 | ||
| 267 | 20년 전 | 2382 | ||
| 266 | 20년 전 | 2575 | ||
| 265 | 20년 전 | 3516 | ||
| 264 |
bbking |
20년 전 | 5378 | |
| 263 |
hanpedro |
20년 전 | 3741 | |
| 262 | 20년 전 | 3202 | ||
| 261 |
허저비
|
20년 전 | 5947 | |
| 260 |
bbking |
20년 전 | 5724 | |
| 259 | 20년 전 | 4148 | ||
| 258 | 20년 전 | 2383 | ||
| 257 | 20년 전 | 3205 | ||
| 256 | 20년 전 | 1917 | ||
| 255 | 20년 전 | 1587 | ||
| 254 | 20년 전 | 3158 | ||
| 253 | 20년 전 | 3551 | ||
| 252 | 20년 전 | 5134 | ||
| 251 | 20년 전 | 5827 | ||
| 250 | 20년 전 | 3687 | ||
| 249 | 20년 전 | 5033 | ||
| 248 | 20년 전 | 3301 | ||
| 247 | 20년 전 | 3657 | ||
| 246 |
bbking |
20년 전 | 7966 | |
| 245 |
bbking |
20년 전 | 5927 | |
| 244 | 20년 전 | 4498 | ||
| 243 |
hanpedro |
20년 전 | 4076 | |
| 242 | 20년 전 | 2807 | ||
| 241 | 20년 전 | 2754 | ||
| 240 | 20년 전 | 2390 | ||
| 239 | 20년 전 | 1678 | ||
| 238 |
아우겐나이스
|
20년 전 | 2284 | |
| 237 |
email
|
20년 전 | 3697 | |
| 236 | 20년 전 | 4182 | ||
| 235 | 20년 전 | 10474 | ||
| 234 | 20년 전 | 5083 | ||
| 233 | 20년 전 | 3386 | ||
| 232 | 20년 전 | 3228 | ||
| 231 | 20년 전 | 3868 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기