搜索中...
2015/09/10

【JS】Before / After 圖片對照檢視器

要對照圖片時,通常都會兩張放在一起、或者裁一半合併,可是這對於變化不大的對比照片而言卻似乎讓讀者難以分辨?使用 Before and After 圖片對照吧!這樣不僅在設計上美觀,也更容易讓讀者分辨照片的差別。
範例展示
一般模擬器VBA-M 2xSaI
程式碼
 首先若 尚未載入jQuery庫 請先添加。
CSS.尋找並貼在 </b:skin> 之上 、或者使用自訂的新增CSS
.ba-mask {
 position:absolute;
 cursor: w-resize;
 top:0;
 left:0;
 z-index:100;
 border-right:3px solid #333;
 overflow:hidden;
 box-shadow: 3px 5px 5px rgba(0, 0, 0, 0.6);
 box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.6);
 -webkit-box-shadow: 5px 5px 7px rgba(0, 0, 0, 0.6);
 -moz-box-shadow: 5px 0 7px rgba(0, 0, 0, 0.6);
}
.ba-bg {
 position:absolute;
 top:0; left:0;
 z-index:0;
}
.ba-caption {
 position:absolute;
 bottom:10px;
 left:10px;
 z-index:120;
 background:#000;
 color:#fff;
 text-align:center;padding:5px;
 font-size:12px;
 font-family:arial;
 filter:alpha(opacity=80);
 -moz-opacity:0.8;
 -khtml-opacity: 0.8;opacity: 0.8;
 -webkit-border-radius:5px;
 -moz-border-radius:5px;
 border-radius:5px;
}
JavaScript. 將JS檔上傳至空間,替代下面的「檔案.js」,尋找並貼在 </body> 之上:
<script src='檔案.js'  type='text/javascript'/>
.Js檔下載: Google Sites
HTML.編輯文章時開啟HTML模式貼上:
<div class="bf" style="height: 高px; width: 寬px; margin: 0px auto;">
<img alt="左下角顯示內容(Before)" src="圖片(Before).jpg" />
<img alt="左下角顯示內容(after)" src="圖片(after).jpg" /></div>
附加效果
若想更改滑鼠樣式,可以參照 CSS指定滑鼠游標型態。
參考來源
www.queness.com/

0 意見:

張貼留言