jQuery外掛-360度旋轉產品照片展示

梅問題-jQuery外掛-360度旋轉產品照片展示
  以前相當流行利用Flash來製作360度的產品展示,讓使用者可以直接按住滑鼠,拖拉產品就可看到360度的產品照片,讓使用者可以在虛擬的頁面中,了解到實體產品的各角度的變化,但自從老賈開始打Flash後,現在Flash已消聲匿跡,因此目前比較好的作法,就是透過jQuery的方式來製作,而最近正好有朋友,想製作360度的產品展示功能,所以梅干就尋找了一下,發現到一款相當簡易且好用的360度產品展示的外掛,且套用還相當的簡單,因此有需要的朋友,也趕快來看看囉!

準備素材:
當要開始製作時,要先將360度的產品照片拍好。
梅問題-jQuery外掛-360度旋轉產品照片展示
Step1
首先,將css放到<head>....</head>間。
<link rel="stylesheet" type="text/css" href="css/pic360.css"/>

Step2
首先,將js放到到</body>前。
<script src="js/jquery-1.4.4.js"></script>
<script src="js/pic360-1.0.0.js"></script>

Step3
當要使用時,將div的類別名稱加入PIC360,接著把要360度的產品照,一一的加到ul li中。
<div class="PIC360">
  <ul>
   <li><img width="700" height="466" src="images/01.jpg" /></li>
   <li><img width="700" height="466" src="images/02.jpg" /></li>
   .............
  </ul>
</div>

Step4
當完成後,只要滑鼠游標,在區域內由左向右滑動時,產品照片就會跟著旋轉,而這邊梅干只是簡易拍攝,當要顯示跟細膩時,可用專用的拍攝器,以及張數愈多效果愈好,是不是很簡單呀!有需要的朋友,不妨也可參考看看囉!
梅問題-jQuery外掛-360度旋轉產品照片展示
[範例預覽] [範例下載]

相關文章

「Retina.js」網頁圖片支援Retina螢幕,並自動切換高解影像

「Retina.js」網頁圖片支援Retina螢幕,並自動切換高解影像

jQuery取得各裝置視窗實際顯示的寬度、高度

jQuery取得各裝置視窗實際顯示的寬度、高度

「Lazy Load CSS」非同步載入CSS,當網頁使用雲端字型更順暢

「Lazy Load CSS」非同步載入CSS,當網頁使用雲端字型更順暢

jQeury外掛「scroll-scope」鎖定DIV區塊滾動範圍

jQeury外掛「scroll-scope」鎖定DIV區塊滾動範圍

jQuery教學-RWD自適應導覽列多層級下拉選單

jQuery教學-RWD自適應導覽列多層級下拉選單





回應本篇 »

(姓名)*必填
(信箱)*必填
(網站)

※PS: 因梅干時間有限,教學網中所分享的主題繁多(所遇狀況也很多),可能無法一一回答各位,不便之處還請見諒。
※PS: 本教學網不提供「破解檔」、「註冊機」或「註冊碼」等資訊,請勿利用留言索取檔案。

共 1 梅留言

  • 第1梅
    Ben 說道:

    手機似乎是不支援吼?好可惜耶

    回應:
    手機要加swip套件應該可解決