这是一款基于jQuery的滑动杆购买日期选择插件，它的外观仿的是阿里云的服务器购买日期选择界面。这款jQuery插件非常适合在一些虚拟产品购买页面上使用，它可以帮助你的用户快速选择产品的购买日期，十分方便。效果图如下：
html代码：
<center> <div> <!--底层--> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li>年</li> <li>年</li> <li>年</li> </ul> <!--互动层--> <div> <ul> <li><span>个月</span></li> <li><span>个月</span></li> <li><span>个月</span></li> <li><span>个月</span></li> <li><span>个月</span></li> <li><span>个月</span></li> <li><span>个月</span></li> <li><span>个月</span></li> <li><span>个月</span></li> <li>年<span>年</span></li> <li>年<span>年</span></li> <li>年<span>年</span></li> </ul> <!--滑块按钮--> <a href="javascript:;"><i></i><i></i></a> </div> </div> <br /> <br /> <div> <!--底层--> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li>年</li> <li>年</li> <li>年</li> </ul> <!--互动层--> <div> <ul> <li><span>个月</span></li> <li><span>个月</span></li> <li><span>个月</span></li> <li><span>个月</span></li> <li><span>个月</span></li> <li><span>个月</span></li> <li><span>个月</span></li> <li><span>个月</span></li> <li><span>个月</span></li> <li>年<span>年</span></li> <li>年<span>年</span></li> <li>年<span>年</span></li> </ul> <!--滑块按钮--> <a href="javascript:;"><i></i><i></i></a> </div> </div> <br /> <br /> <div> <!--底层--> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li>年</li> <li>年</li> <li>年</li> </ul> <!--互动层--> <div> <ul> <li><span>个月</span></li> <li><span>个月</span></li> <li><span>个月</span></li> <li><span>个月</span></li> <li><span>个月</span></li> <li><span>个月</span></li> <li><span>个月</span></li> <li><span>个月</span></li> <li><span>个月</span></li> <li>年<span>年</span></li> <li>年<span>年</span></li> <li>年<span>年</span></li> </ul> <!--滑块按钮--> <a href="javascript:;"><i></i><i></i></a> </div> </div> </center>
css代码：
ul, li { padding: ; margin: ; list-style-type: none; } .clearfix:after { display: block; content: ""; clear: both; } .slider-date { height: px; line-height: px; background: #eee; display: inline-block; position: relative; } .slider-date .slider-bg li { position: relative; float: left; width: px; border-left: solid px #ddd; font-size: px; text-align: center; } .slider-date .slider-bg span { display: none; } .slider-date .slider-bg li:first-child { border-left: none; } .slider-date .slider-bar { position: absolute; top: -px; left: ; overflow: hidden; height: px; width: px; } .slider-date .slider-bar ul { margin-top: px; background: #bfe; color: #fff; height: px; width: px; } .slider-date .slider-bar-btn { line-height: px; text-align: center; position: absolute; top: -px; right: px; display: block; width: px; height: px; background: #dacd; color: #fff; } .slider-date .slider-bar-btn i { display: inline-block; margin: px px; width: px; height: px; background: #cde; }
js代码：