Jquery.panorama 可以讓圖360度的轉

非常適合放寬景圖得照片

作者網站:http://www.openstudio.fr/Un-viewer-de-panoramas-simple-en.html

在head裡加入

<link rel="stylesheet" type="text/css" href="css/jquery.panorama.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.panorama.js"></script>

在body裡加入

<img src="img/atelier.jpg" class="panoramas" width="2642" height="375"/>

在最後面裡加入

<script type="text/javascript">
$(document).ready(function(){
    $("img.panoramas").panorama({
                 viewport_width: 500,
                 speed: 30000,
                 direction: 'right',
                 control_display: 'yes'
         });
});
</script>

下列是一些參數設定

viewport_width  ：指定顯示窗口寬度（默認是：600）

speed  ：控制旋轉速度。（默認：20000）

direction  ：旋轉”left”或”right”（默認：”right”）

control_display  ：顯示控制面板（默認：”auto”）

start_position  ：圖的起點位置（默認：0）

auto_start  ：自動轉動（默認為true）

mode_360  ：360度的轉圖（默認為true）

以上這些是原本的用法

原本的設定是如果mode_360 設定為false的話

轉到底的話就會停止了!我把它改為轉到底就反轉

還有多加了一個加速按鈕

speed_turbo: 加速按扭倍率數字越小越快（默認為0.5）

還有原本需要在img設定width才能抓的到圖片寬度

我把它改為等圖載完在抓取元素的寬度

這一來在不知道圖片寬度時也能使用

範例:http://night.ipushs.com/night/only_photo/64
載點:按我下載