Dragdealer JS 可拖曳操作介面

網頁上有時候用到卷軸，但是預設的卷軸並不好看。又或者是如果你想讓畫面的中文字變大用按鈕表示又覺得太無趣，Dragdealer JS 應該就是你的另一種選擇了吧。Dragdealer JS 主要用來建立支援拖拉操作介面。可以上下移動或者左右拖曳，可定義 X/Y軸的初始位置，也可設置每一次拖拉的距離等等。

第一步 載入程式的 JavaScirpt 和 CSS 檔
//Dragdealer JS 的 CSS 樣式設計
<link rel="stylesheet" type="text/css" href="/css/dragdealer.css" />
//Dragdealer JS 的主程式碼
<script type="text/javascript" src="/js/dragdealer.js"></script>


第二步 建立如上圖的大圖片 HTML 區塊
<div class="top-spaced">
  <div id="canvas-mask" class="dragdealer">
<div class="handle">
<div class="slide">
<div class="bar">
<span class="title">One big slide title</span>
<span class="description">Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</span>
</div>
</div>
<div class="slide">
<div class="bar">
<span class="title">2nd big slide title</span>
<span class="description">Lorem ipsum dolor sit amet.</span>
</div>
</div>
<div class="slide">
<div class="bar">
<span class="title">3rd big slide title</span>
<span class="description">Lorem ipsum dolor sit amet.</span>
</div>
</div>
<div class="slide">
<div class="bar">
<span class="title">Another big slide title</span>
<span class="description">Lorem ipsum dolor sit amet.</span>
</div>
</div>
</div>
  </div>
</div>
<p class="top-spaced">控制的連結:
<a id="canvas-slide-1" href="#slide1">Slide 1</a> |
<a id="canvas-slide-2" href="#slide2">Slide 2</a> |
<a id="canvas-slide-3" href="#slide3">Slide 3</a> |
<a id="canvas-slide-4" href="#slide4">Slide 4</a>.</p>


第三步 設計範例的 CSS 樣式表
#canvas-mask {
width: 600px;
height: 300px;
overflow: hidden;
}
#canvas-mask .handle {
width: 1200px;
height: 600px;
background: url('../img/dragdealer/canvas.jpg') no-repeat 0 0;
}
#canvas-mask .handle .slide {
position: relative;
float: left;
width: 600px;
height: 300px;
}
#canvas-mask .handle .slide .bar {
position: absolute;
bottom: 0;
left: 0;
padding: 12px;
background: url('../img/dragdealer/overlay.png') repeat 0 0;
color: #FFF;
}
#canvas-mask .handle .slide .bar .title {
display: block;
margin: 0 0 6px 0;
font-size: 26px;
font-weight: bold;
line-height: 26px;
letter-spacing: -1px;
}
#canvas-mask .handle .slide .bar .description {
display: block;
color: #EEE;
font-size: 12px;
line-height: 12px;
text-transform: uppercase;
}

第四步 建立 JavaScript
window.onload = function() {
var canvasMask = new Dragdealer('canvas-mask', { vertical: true, steps: 2, loose: true });
document.getElementById('canvas-slide-1').onclick = function()
{
canvasMask.setValue(0, 0);
return false;
}
document.getElementById('canvas-slide-2').onclick = function()
{
canvasMask.setValue(1, 0);
return false;
}
document.getElementById('canvas-slide-3').onclick = function()
{
canvasMask.setValue(0, 1);
return false;
}
document.getElementById('canvas-slide-4').onclick = function()
{
canvasMask.setValue(1, 1);
return false;
}
}

附上程式可修改參數值

參數	說明
disabled	初始狀態
horizontal	水平拖曳
vertical	垂直拖曳
x	初始水平數值
y	初始垂直數直
slide	滑動阻力釋放
steps	步數捕捉
snap	捕捉單元步驟
loose	鬆脫默認
callback	回調函式
animationCallback	動畫結束後回調函式
speed	滑動的速度
xPrecision	動畫內容的寬度
yPrecision	動畫內容的高度
top	內距的上面距離
bottom	內距的下面距離
left	內距的左邊距離
right	內距的右邊距離

作者網站：http://code.ovidiu.ch/dragdealer/
檔案大小：2.54 KB
檔案下載：http://dragdealer.googlecode.com/files/dragdealer-v0.9.5.zip
檔案備份：下載