是否可以使用「小手」光標在div內手動滾動JPG？

Question

是否可以通過抓取並拖動實際圖像來手動滾動div中的「小手」光標？

就比如當你有很長的水平位圖和要顯示它在小窗口，讓人們滾動喜歡在照片編輯器，當你放大。

Answer 1

您可以通過使用javascript和了CSS的做到這一點。

在你的圖像添加CSS規則有：

cursor: pointer; 

使用JavaScript

，加上鼠標按下，鼠標移動和mouseup圖像上的事件。然後使用JavaScript來改變父DIV

Answer 2

你需要一些JavaScript魔術這樣做滾動。看看這個：http://jsfiddle.net/bCuGM/。

<style type="text/css"> 
    #container { 
    width: 400px; 
    height: 400px; 
    overflow: hidden; 
    cursor: pointer; 
    } 
    #draggable { 
    width: 1024px; 
    height: 819px; 
    } 
</style> 

<div id="container"> 
    <div id="draggable"> 
    <img src="http://farm3.staticflickr.com/2593/3884464511_a77144821e_b.jpg"> 
    </div> 
</div> 

<script> 
    $("#draggable").draggable(); 
</script>