这是一款基于jQueryUI的炫酷3D立体滑块特效。该滑块使用CSS3制作为带阴影效果的立体形状,滑块的拖动是通过jQueryUI来实现,在滑块拖动的时候,还可以显示联动的数值,效果非常不错。
使用方法
HTML结构
该滑块的HTML结构非常简单,实际上就是一个3D立方体。a、b、c、d分别为立方体的左右和上前4个面,div.slider-range-min
是滑块的凹槽。实际的滑块是一个<input>
元素。
<section id="content"> <h1>......</h1> <div class="cube"> <div class="a"></div> <div class="b"></div> <div class="c"></div> <div class="d"></div> <div id="slider-range-min"></div> </div> <input type="text" id="amount" /> </section>
CSS样式
立方体的基本样式如下:
.cube { position:relative; width:500px; height:60px; margin:5rem auto; -webkit-transform-style:preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-perspective:400px; -moz-perspective: 400px; -ms-perspective: 400px; -o-perspective: 400px; perspective: 400px; } /* 定位 */ .a, .b, .c, .d { position:absolute; width:50%; height:100%; left:0px; z-index:222; } .a:before, .b:before, .c:before, .d:before, .a:after, .b:after { content:''; position:absolute; top:0px; left:0px; width:500px; height:60px; } .a:before, .b:before, .c:before, .d:before { z-index:111; } .a:after, .b:after { z-index:333; } .b { top:0px; -webkit-transform:rotateX(75deg) translateY(-60px); -moz-transform: rotateX(75deg) translateY(-60px); -o-transform: rotateX(75deg) translateY(-60px); -ms-transform: rotateX(75deg) translateY(-60px); transform: rotateX(75deg) translateY(-60px); -webkit-transform-origin:0% 0%; -moz-transform-origin: 0% 0%; -o-transform-origin: 0% 0%; -ms-transform-origin: 0% 0%; transform-origin: 0% 0%; } .c { top:0px; -webkit-transform:rotateX(75deg); -moz-transform: rotateX(75deg); -o-transform: rotateX(75deg); -ms-transform: rotateX(75deg); transform: rotateX(75deg); -webkit-transform-origin:100% 100%; -moz-transform-origin: 100% 100%; -o-transform-origin: 100% 100%; -ms-transform-origin: 100% 100%; transform-origin: 100% 100%; } .d { -webkit-transform:translateZ(-60px) translateY(-15px); -moz-transform: translateZ(-60px) translateY(-15px); -o-transform: translateZ(-60px) translateY(-15px); -ms-transform: translateZ(-60px) translateY(-15px); transform: translateZ(-60px) translateY(-15px); }
然后分别为每个面设置颜色。接着设置滑块的一些样式:
#slider-range-min { position:absolute; width: 94%; left:3%; top:27px; margin: 0px; z-index:999; } .ui-slider { height:5px; border:none; background:rgba(0,0,0,0.1); -webkit-box-shadow:0px 2px 2px rgba(255,255,255,0.25), inset 0px 1px 3px rgba(0,0,0,0.3); -moz-box-shadow: 0px 2px 2px rgba(255,255,255,0.25), inset 0px 1px 3px rgba(0,0,0,0.3); box-shadow: 0px 2px 2px rgba(255,255,255,0.25), inset 0px 1px 3px rgba(0,0,0,0.3); } .ui-slider:before, .ui-slider:after { content:'IIIIIIIIIII'; position:absolute; left:2px; width:100%; font-family: 'Source Sans Pro', sans-serif; font-size:1.2rem; font-weight:300; color:rgba(0,0,0,0.3); letter-spacing:41px; text-shadow:1px 1px 0px rgba(255,255,255,0.2); } .ui-slider:before { top:-1.4rem; } .ui-slider:after { bottom:-1.4rem; } .ui-slider-range {background:transparent;} .ui-slider .ui-slider-handle { top:-8px; width:26px; height:20px; margin-left:-15px; padding-left:4px; border:none; background:rgba(255,255,255,0.7); border-radius:2px; text-align:center; font-family: 'Anonymous Pro', sans-serif; font-size:1.2rem; line-height:20px; color:rgba(0,0,0,0.5); text-decoration:none; letter-spacing:3px; cursor:pointer; text-shadow:1px 1px 2px rgba(255,255,255,1); -webkit-box-shadow:1px 1px 8px rgba(0,0,0,0.3); -moz-box-shadow: 1px 1px 8px rgba(0,0,0,0.3); box-shadow: 1px 1px 8px rgba(0,0,0,0.3); } .ui-slider .ui-slider-handle:focus { outline:none; }
Javascript
在jQuery代码中使用jQueryUI的slider()
方法来制作滑块。并使数值和滑块进行联动。
$(function () { $('#slider-range-min').slider({ range: 'min', value: 50, min: 0, max: 100, slide: function (event, ui) { $('#amount').val('$' + ui.value + ',000'); $('.a, .b, .c, .d').width(ui.value + '%'); } }); $('.ui-slider-handle').text('<>'); $('#amount').val('$' + $('#slider-range-min').slider('value') + ',000'); });