kinetic js div에 스크롤을 구현하려면 잘 작동하지만 마우스 휠 이벤트로 스크롤해야합니다.마우스 휠 이벤트 키네틱 js 스크롤
<div id="wrapper" style="cursor: move;">
<div id="inner">
<img src="http://davetayls.me/jquery.kinetic/wembley.jpg" alt="wembley stadium">
</div>
</div>
JQuery와 내가하는 방법을 잘 모릅니다
$('#wrapper').kinetic();
, 제발 도와주세요.
jQuery를 사용 브랜든 아론의 마우스 휠 플러그인. 잘 작동한다!
https://github.com/brandonaaron/jquery-mousewheel
예제 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Prototype</title>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v5.0.1.min.js"></script>
<script src="includes/jquery.mousewheel.js"></script>
<style>
body{padding:20px;}
#container{
border:solid 1px #ccc;
margin-top: 10px;
width:350px;
height:350px;
}
</style>
<script>
$(function(){
var stage = new Kinetic.Stage({
container: 'container',
width: 350,
height: 350
});
var layer = new Kinetic.Layer();
stage.add(layer);
var circle1 = new Kinetic.Circle({
x:100,
y:100,
radius: 30,
fill: 'red',
stroke: 'black',
strokeWidth: 4,
draggable: true
});
layer.add(circle1);
layer.draw();
$('#container').bind('mousewheel', function(event) {
event.preventDefault();
event.stopPropagation();
var deltaY=event.deltaY;
circle1.y(circle1.y()-deltaY*10);
layer.draw();
});
}); // end $(function(){});
</script>
</head>
<body>
<h4>Click in the gray rect to get focus then<br>Scroll the mousewheel to move the circle.</h4>
<div id="container"></div>
</body>
</html>