動態js滾動鼠標滾輪事件

我使用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();

我不知道該怎麼辦，請大家幫幫我。

Fiddle

來源

2014-03-28 Shin

使用布蘭登·艾倫的鼠標滾輪的jQuery插件。它運作良好！

https://github.com/brandonaaron/jquery-mousewheel

示例代碼（請確保您下載jquery.mousewheel.js並調整相應的腳本標籤）

<!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>

來源

2014-03-28 15:59:32 markE

動態js滾動鼠標滾輪事件

回答

相關問題