基于jQuery滑动杆实现购买日期选择效果

这是一款基于jQuery的滑动杆购买日期选择插件，它的外观仿的是阿里云的服务器购买日期选择界面。这款jQuery插件非常适合在一些虚拟产品购买页面上使用，它可以帮助你的用户快速选择产品的购买日期，十分方便。效果图如下：

在线预览源码下载
html代码：

<center><div class="slider-date" id="slider-date-"> <！--底层--> <ul class="slider-bg clearfix"><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 class="slider-bar"><ul class="slider-bg clearfix"> <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:;" class="slider-bar-btn"><i></i><i></i></a> </div></div><br /><br /><div class="slider-date" id="slider-date-"> <！--底层--> <ul class="slider-bg clearfix"><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 class="slider-bar"><ul class="slider-bg clearfix"> <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:;" class="slider-bar-btn"><i></i><i></i></a> </div></div><br /><br /><div class="slider-date" id="slider-date-"> <！--底层--> <ul class="slider-bg clearfix"><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 class="slider-bar"><ul class="slider-bg clearfix"> <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:;" class="slider-bar-btn"><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代码：

//滑动插件 by - mantou qq:; （function （$） { $.fn.sliderDate = function （setting） {var defaults = { callback: false //默认回调函数为false}//如果setting为空，就取default的值var setting = $.extend（defaults, setting）;this.each（function （） { //插件实现代码 //var $sliderDate = $（".slider-date"）; var $sliderDate = $（this）; var $sliderBar = $sliderDate.find（".slider-bar"）; var $sliderBtn = $sliderDate.find（".slider-bar-btn"）; var liWid = + ; //单个li的宽度 //滚动指定的位置 var sliderToDes = function （index） {//最大不能超过if （index > ） { index = ;}//最小不能小于 if （index < ） { index = ;}//背景动画$sliderBar.animate（{ "width": liWid * （index + ）}, ）;//执行回调if （setting.callback） { setting.callback（index）;} }; //点击 - 滚动到指定位置 $sliderDate.on（"click", "li", function （e） {//执行滚动方法sliderToDes（$（this）.index（））; }）; //拖动 - 滚动到指定位置 $sliderBtn.on（"mousedown", function （e） {var $this = $（this）;var pointX = e.pageX - $this.parent（）.width（）;var wid = null;//拖动事件$（document）.on（"mousemove", function （ev） { wid = ev.pageX - pointX if （wid > && wid < ） {$sliderBar.css（"width", wid）; }}）.on（"mouseup", function （e） { $（this）.off（"mousemove mouseup"）; var index = Math.ceil（wid / liWid） - ; sliderToDes（index）;}）; }）;}）; }}）（jQuery）;$（function （） { function a（index） {console.log（index + ）; } $（"#slider-date-"）.sliderDate（{ callback: a }）; function b（index） {console.log（index + ）; } $（"#slider-date-"）.sliderDate（{ callback: b }）; function c（index） {console.log（index + ）; } $（"#slider-date-"）.sliderDate（{ callback: c }）;}）;

以上代码很简单吧，希望大家能够喜欢。