jQuery 框架與 CSS3 的結合

使用 jQuery 框架和 CSS3 建立的 3D 動態幻燈效果，範例中建立一個三維動態的滑塊效果所帶來新的轉換功能，用於建立滑塊 CSS 動態調整長條圖的大小，可讓使用者自行調整也可用於調整設定時的動態顯示，讓資料修改也變得不無趣。

使用說明：
第一步 載入程式需要用到的 JavaScript 檔
<!--使用 Google AJAX API 取得 jQuery 1.8.2 的 min 版本-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!--使用 Google AJAX API 取得 jQuery 1.9.1 的 min 版本-->
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>

第二步 建立範例圖片中的 HTML 片段程式
<div class="main">
    <div class="colorful-slider blue">
      <div class="slider-handle"></div>
    </div>
    <div class="colorful-slider green">
      <div class="slider-handle"></div>
    </div>
    <div class="colorful-slider orange">
      <div class="slider-handle"></div>
    </div>
    <div class="cube-area">
        <div class="cuboid blue">
        <div class="cu-top"></div>
        <div class="cu-mid"></div>
        <div class="cu-bottom"></div>
        </div>
        <div class="cuboid green">
        <div class="cu-top"></div>
        <div class="cu-mid"></div>
        <div class="cu-bottom"></div>
        </div>
        <div class="cuboid orange">
        <div class="cu-top"></div>
        <div class="cu-mid"></div>
        <div class="cu-bottom"></div>
        </div>
        <div class="perspective">
        </div>
    </div>
    <div class="clear"></div>
</div>

第三步 建立範例中的 CSS 樣式
*{
margin:0;
padding:0;
}
body{
color:#eee;
font-size:0.825em;
background: #2f2e2f;
font-family:Arial, Helvetica, sans-serif;
}
.colorful-slider{
width:6px;
height:200px;
border:1px solid #242424;
position:relative;
float:left;
margin:20px 20px 0;

-moz-border-radius:12px;
-webkit-border-radius:12px;
border-radius:12px;
}
.colorful-slider.orange{ background:url("img/slider_orange_bg.png") repeat-y; }
.colorful-slider.green{ background:url("img/slider_green_bg.png") repeat-y; }
.colorful-slider.blue{ background:url("img/slider_blue_bg.png") repeat-y; }
.slider-handle{
position:absolute;
left:-11px;
width:28px;
height:12px;
background:url("img/slider_handle.png") no-repeat;
cursor:n-resize;
top:44%;
}
.cube-area{
width:400px;
height:200px;
background-color:#282828;
float:left;
margin:0 0 0 40px;
padding:20px;
position:relative;
}
.cuboid{
width:72px;
position:absolute;
margin:20px;
padding:12px 0 9px;
float:left;
bottom:-45px;
z-index:10;
}
.cu-top{
position:absolute;
width:100%;
top:0;
left:0;
height:12px;
background-repeat:no-repeat;
}
.cu-mid{
background-repeat:repeat-y;
height:100px;
width:72px;
}
.cu-bottom{
position:absolute;
width:100%;
height:9px;
bottom:0;
left:0;
background-repeat:no-repeat;
}
.cuboid.blue { left:100px;}
.cuboid.blue .cu-top{ background-image:url("img/cuboid_blue_top.png"); }
.cuboid.blue .cu-mid{ background-image:url("img/cuboid_blue_mid.png"); }
.cuboid.blue .cu-bottom{ background-image:url("img/cuboid_blue_bottom.png"); }
.cuboid.green { left:200px;}
.cuboid.green .cu-top{ background-image:url("img/cuboid_green_top.png"); }
.cuboid.green .cu-mid{ background-image:url("img/cuboid_green_mid.png"); }
.cuboid.green .cu-bottom{ background-image:url("img/cuboid_green_bottom.png"); }
.cuboid.orange { left:300px;}
.cuboid.orange .cu-top{ background-image:url("img/cuboid_orange_top.png"); }
.cuboid.orange .cu-mid{ background-image:url("img/cuboid_orange_mid.png"); }
.cuboid.orange .cu-bottom{ background-image:url("img/cuboid_orange_bottom.png"); }
.perspective{
background-color:#232323;
position:absolute;
z-index:1;
left:0;
bottom:-55px;
height:55px;
width:100%;
-moz-transform:skewX(60deg) translate(47px);
-webkit-transform:skewX(60deg) translate(47px);
transform:skewX(60deg) translate(47px);
}
.main{
margin:100px auto;
width:640px;
}
h1{
background-color:#292929;
border-bottom:1px solid #222222;
font-size:20px;
font-weight:normal;
margin-bottom:15px;
padding:15px;
text-align:center;
}
h2 {
font-size:12px;
font-weight:normal;
padding-right:40px;
position:relative;
right:0;
text-align:right;
text-transform:uppercase;
top:-48px;
}
a, a:visited {
color:#0196e3;
text-decoration:none;
outline:none;
}
a:hover{
text-decoration:underline;
}
.clear{
clear:both;
}
h1,h2,p.tutInfo{
font-family:"Myriad Pro",Arial,Helvetica,sans-serif;
}

第四步 建立 JavaScript 的程式片段
$(function(){
$('.slider-handle').draggable({
containment:'parent',
axis:'y',
drag:function(e,ui){
if(!this.par)
{
this.par = $(this).parent();
this.parHeight = this.par.height();
this.height = $(this).height();
this.color = $.trim(this.par.attr('class').replace('colorful-slider',''));
}
var ratio = 1-(ui.position.top+this.height)/this.parHeight;
resizeBar(this.color,ratio);
}
});
});
function resizeBar(color,ratio)
{
$('.cu-mid','.cuboid.'+color).height(200*ratio)
}
作者網站：http://tutorialzine.com/2010/03/colorful-sliders-jquery-css3/
檔案大小：8.49 KB (包含範例)
檔案下載：http://demo.tutorialzine.com/2010/03/colorful-sliders-jquery-css3/demo.zip
檔案備份：下載