使用css+jquery+jqueryUI 做出拖拉相片效果

首先我們先來看看最後的呈現效果：

先來看看資料夾的建立（記得要加圖片喔）：

我們的html：

Step1.先引入css 和 js

<link rel="stylesheet" type="text/css" href="css/style.css" />
   <script type="text/javascript" src="http://www.google.com/jsapi"></script>
   <script type="text/javascript" src="js/script.js"></script>

Step2.再放入10組圖片區塊

<div class="polaroid">
     <img src="images/imgg (1).jpg" alt="Colloseum" />
     <p>Lorem ipsum dolor.</p>
   </div>
   <div class="polaroid">
     <img src="images/imgg (2).jpg" alt="Vatican" />
     <p>Adipisicing elit aliquam maiores.</p>
   </div>
   <div class="polaroid">
     <img src="images/imgg (3).jpg" alt="Forum Romanum" />
     <p>Dolore recusandae suscipit</p>
   </div>
   <div class="polaroid">
     <img src="images/imgg (4).jpg" alt="Fiat 500" />
     <p>Excepturi autem consectetur</p>
   </div>
   <div class="polaroid">
     <img src="images/imgg (5).jpg" alt="Me and my girl in Florance" />
     <p>Accusantium molestias totam </p>
   </div>
   <div class="polaroid">
     <img src="images/imgg (6).jpg" alt="Venetian Gondolas" />
     <p>Consectetur adipisicing elit</p>
   </div>
   <div class="polaroid">
     <img src="images/imgg (7).jpg" alt="Pizza" />
     <p>Dolor sit amet consectetur<strong>the</strong> food</p>
   </div>
   <div class="polaroid">
     <img src="images/imgg (8).jpg" alt="Swimming pool" />
     <p>Autem consectetur aliquam maiores</p>
   </div>
   <div class="polaroid">
     <img src="images/imgg (9).jpg" alt="Florence" />
     <p>Excepturi autem consectetur aliquam maiores</p>
   </div>
   <div class="polaroid">
     <img src="images/imgg (10).jpg" alt="Tower of Pisa" />
     <p>Suscipit blanditiis nulla ea</p>
   </div>

CSS部分：

給整個頁面一個背景，並且給圖片一個固定寬和高後，對文字自行做基本設定。

body,
div,
img,
p {
 padding: 0;
 margin: 0;
}
body {
 background-image:url('../images/bg.jpg');
}
.polaroid {
 width: 385px;
 height: 385px;
 background-color: papayawhip;
}
.polaroid img {
 width: 350px;
 height: 300px;
 margin: 25px 0 0 15px;
}
.polaroid p {
 text-align: center;
 font-family: Georgia, serif;
 font-size: 20px;
 color: #41135f;
 margin-top: 15px;
}

會出現以下畫面：

接著由於我們要讓頁面不能被滾動，並且先讓所有所有圖片區塊定位同一個位置（左上角），為接下來的動作做準備。

我們只要增加兩個CSS即可，也可以直接加在剛剛寫的CSS中：

body {
 overflow: hidden;
}
.polaroid {
 position: absolute;
}

畫面會變成以下這樣：

所有的圖都重疊在左上角且右邊的scroll bar消失了！

接著就是我們的js部份了：

首先先載入jquery和jquery UI

google.load("jquery", "1.3.1");
google.load("jqueryui", "1.7.0");

js部分說明直接寫在程式碼中方便閱讀：

google.setOnLoadCallback(function() {
 // 當一開始載入時，我們先隨機亂數選擇要轉左邊或是右邊
// 這篇有呼叫一個fuction randomXToY 帶入第一個參數是希望數字的最小值
// 第二個參數是最大數字 第三個參數則是希望計算到小數點第幾位
  
 $(".polaroid").each(function(i) {
   var tempVal = Math.round(Math.random());
   if (tempVal == 1) {
     var rotDegrees = randomXToY(330, 360, 2); 
   } else {
     var rotDegrees = randomXToY(0, 30, 2); 
   }

   // 這是為了瀏覽器IE寫的 因為IE沒有innerWidth和innerHeight屬性
   if (window.innerWidth == undefined) {
     var wiw = 1000;
     var wih = 700;
   } else {
     var wiw = window.innerWidth;
     var wih = window.innerHeight;
   }
  //隨機一個數字讓一開始每一張相片透過絕對定位在畫面的不同位置
   var cssObj = {
     left: Math.random() * (wiw - 400),
 	 top: Math.random() * (wih - 400),
 	
     "-webkit-transform": "rotate(" + rotDegrees + "deg)",
      transform: "rotate(" + rotDegrees + "deg)"
    }; 
    $(this).css(cssObj);
 });

 //先設定一開始的z-index為1
 var zindexnr = 1;

 var dragging = false;
//當點擊的時候
 $(".polaroid").mouseup(function(e) {
   if (!dragging) {
     // 放被拖拉的區塊z-index +1 ，使他在最上方
     // 當你只是點擊他時，他會回到不被旋轉的方向
     zindexnr++;
     var cssObj = {
       "z-index": zindexnr,
       transform: "rotate(0deg)",
       "-webkit-transform": "rotate(0deg)"
      }; 
     $(this).css(cssObj);
   }
 });

//.draggable 是讓被指定的範圍可以進行拖拉的function



 $(".polaroid").draggable({
    cursor: "crosshair",
//參數:start 表示點手擊他到放手中間的動作
//裡面的動作重複先前所說
   start: function(event, ui) {
     dragging = true;
 	 zindexnr++;
 	
 	 console.log(zindexnr);
     var cssObj = {
        "box-shadow": "grey 3px 6px 6px",                   "-webkit-box-shadow": "grey 3px 6px 6px",
       //製造點擊時的效果
       "margin-left": "-20px",
       "margin-top": "-20px",
       "z-index": zindexnr
     };
     $(this).css(cssObj);
   },
//參數:stop 表示放手時的動作
//裡面的動作重複先前所說
   stop: function(event, ui) {
     var tempVal = Math.round(Math.random());
     if (tempVal == 1) {
       var rotDegrees = randomXToY(330, 360, 2); 
     } else {
       var rotDegrees = randomXToY(0, 30, 2);      }
     var cssObj = {
       "box-shadow": "", 
       "-webkit-box-shadow": "", 
       transform: "rotate(" + rotDegrees + "deg)",              "-webkit-transform": "rotate(" + rotDegrees + "deg)",     
     "margin-left": "0px",
     "margin-top": "0px"
     };
     $(this).css(cssObj);
     dragging = false;
   }
 });

 //在兩個數中取一個數，並且期望計算後取道小數點第幾位
 function randomXToY(minVal, maxVal, floatVal) {
   var randVal = minVal + Math.random() * (maxVal - minVal);
   return typeof floatVal == "undefined"
     ? Math.round(randVal)
     : randVal.toFixed(floatVal);
 }
});

這樣就完成了我們要的拖拉圖片效果了喔！

 

再看一次結果吧：

 

以上就是我們這次對於拖拉相片效果的介紹，如果有其他想暸解認識的電商、網站相關主題，都歡迎留言讓我們知道，或者需要相關服務，歐斯瑞團隊將非常樂意替您解決！