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

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

在线预览 源码下载

html代码：

  

   
   


    

    

    

    

    

    

    

    

    
年
    
年
    
年
   

    

个月
     
个月
     
个月
     
个月
     
个月
     
个月
     
个月
     
个月
     
个月
     
年年

     
年年

     
年年

    

   
  
  


   
   


    

    

    

    

    

    

    

    

    
年
    
年
    
年
   

    

个月
     
个月
     
个月
     
个月
     
个月
     
个月
     
个月
     
个月
     
个月
     
年年

     
年年

     
年年

    

   
  
  


   
   


    

    

    

    

    

    

    

    

    
年
    
年
    
年
   

    

个月
     
个月
     
个月
     
个月
     
个月
     
个月
     
个月
     
个月
     
个月
     
年年

     
年年

     
年年

    

   
  
 

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  && wid 

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