jQuery pivot plugin Javascript & HTML & CSS/jQuery2017. 1. 5. 23:31
<!DOCTYPE html> <html> <head> <meta charset="utf-8">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style>
</style> </head> <body> <div id="pivot_slider"> <div> <h1>first image</h1> <img src="image-1.png"> <p>this is image-1</p> </div> <div> <h1>second image</h1> <img src="image-2.png"> <p>this is image-2</p> </div> <div> <h1>third image</h1> <img src="image-3.png"> <p>this is image-3</p> </div> <div> <h1>fourth image</h1> <img src="image-4.png"> <p>this is image-4</p> </div> </div>
<script> jQuery.fn.pivot = function(options){ var $target = $(this); var $items = $target.children(); var $container = $target.wrap('<div></div>').parent(); var option = {width: 500, height:450};
$.extend(option, options);
$target.css({ width:$items.length * option.width, height: option.height, position: 'absolute' }); $items.css({ float:'left', width: option.width, height: option.height }); $container.css({ overflow: 'hidden', position: 'relative', width: option.width, height: option.height });
var originalLeft = 0; var oldLeft = 0; var nowPosition = 0; var isDown = false;
$target.on('mousedown', function(event){ oldLeft = originalLeft = event.clientX; isDown = true; event.preventDefault(); }); $target.on('mousemove', function(){ if(isDown){ var distance = oldLeft - event.clientX; oldLeft = event.clientX;
$target.animate({left:'-=' + distance}, 0); $target.stop(true); } event.preventDefault(); }); $target.on('mouseup', function(){ function movePosition(direction){ var changePosition = nowPosition + direction; if(0 <= changePosition && changePosition < $items.length){ nowPosition = changePosition; } }
if(originalLeft - event.clientX > option.width/4){ movePosition(+1); }else if(originalLeft - event.clientX < -option.width/4){ movePosition(-1); }
$target.animate({'left':-nowPosition * option.width}, 'fast');
isDown = false; event.preventDefault(); }); } </script> <script> $(function(){ $('#pivot_slider').pivot({ width: 700, height: 800 }) }) </script> </body> </html> |
출처 : 모던 웹을 위한 Javascript jQuery 입문
'Javascript & HTML & CSS > jQuery' 카테고리의 다른 글
| 이벤트 발생시 this (0) | 2016.12.07 |
|---|---|
| jquery 이벤트전달 막기 + 기본이벤트 제거 방법 (0) | 2016.12.06 |
| jquery 이벤트 막기 (0) | 2016.12.06 |
| dialog, datepicker 플러그인 (0) | 2016.12.04 |
| jquery 최신 cdn (0) | 2016.08.11 |
