Realization of purchase date selection effect based on jquery slider bar _jquery

This is a jquery based slider buy date selection plug-in, it looks like the Aliyun of the server purchase date selection interface. This jquery plugin is ideal for use on a number of virtual product purchase pages, which can help your users quickly choose a product's purchase date, which is very convenient. The effect chart is as follows:

Online preview Source Download

HTML code:

<center> <div class= "slider-date" id= "slider-date-" > <!--bottom--> <ul class= "SLIDER-BG clearfix "> <li></li> <li></li> <li></li> <li></li> &LT;LI&G
    t;</li> <li></li> <li></li> <li></li> <li></li>  <li> year </li> <li> year </li> <li> year </li> </ul> <!--interactive layer--> <div
     class= "Slider-bar" > <ul class= "slider-bg clearfix" > <li><span> month </span></li> <li><span> months </span></li> <li><span> months </span></li> <li>& Lt;span> months </span></li> <li><span> months </span></li> <li><span> months & lt;/span></li> <li><span> months </span></li> <li><span> months &LT;/SPAN&GT;&L T;/li> <li><span> </span></li> <li> year <span> year </span></li> <li> year <span>
    Year </span></li> <li> year <span> year </span></li> </ul> <!--slider button-->
  <a href= "javascript:;" class= "slider-bar-btn" ><i></i><i></i></a> </div> </div> <br/> <br/> <div class= "slider-date" id= "slider-date-" > <!--bottom--> <u L class= "SLIDER-BG clearfix" > <li></li> <li></li> <li></li> <li&
    gt;</li> <li></li> <li></li> <li></li> <li></li>
   <li></li> <li> year </li> <li> year </li> <li> year </li> </ul> <!--interactive layer--> <div class= "Slider-bar" > <ul class= "slider-bg clearfix" > <li><span> months
  </span></li>   <li><span> months </span></li> <li><span> months </span></li> <li>& Lt;span> months </span></li> <li><span> months </span></li> <li><span> months & lt;/span></li> <li><span> months </span></li> <li><span> months &LT;/SPAN&GT;&L
     t;/li> <li><span> months </span></li> <li> year <span> year </span></li>
    <li> year <span> year </span></li> <li> year <span> year </span></li> </ul> <!--slider button--> <a href= "javascript:;" class= "Slider-bar-btn" ><i></i><i></i></
   a> </div> </div> <br/> <br/> <div class= "slider-date" id= "slider-date-" > <!--bottom--> <ul class= "SLIDER-BG clearfix" > <li></li> <li></li> <li&gt ;</li> <li></li> <li></li> <li></li> <li></li> <li></li> &L t;li></li> <li> year </li> <li> year </li> <li> year </li> </ul> ;! --Interactive layer--> <div class= "Slider-bar" > <ul class= "slider-bg clearfix" > <li><span> months </ span></li> <li><span> months </span></li> <li><span> months </span></l i> <li><span> months </span></li> <li><span> months </span></li> ;li><span> months </span></li> <li><span> months </span></li> <li><spa N> months </span></li> <li><span> months </span></li> <li> year <span> </sp An></li> <li> year <span> year </span></li> <li> year <span> </span></li&
    Gt
  </ul>  <!--slider button--> <a href= "javascript:;" class= "Slider-bar-btn" ><i></i><i></i></ a> </div> </div> </center>

CSS code:

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 Code:

Sliding plug-in By-mantou QQ:;
    (function ($) {$.fn.sliderdate = function (setting) {var defaults = {callback:false//default callback function is false}
    If setting is empty, take the value of default var setting = $.extend (defaults, setting);
     This.each (function () {//Plug-in implementation code//var $sliderDate = $ (". Slider-date");
     var $sliderDate = $ (this);
     var $sliderBar = $sliderDate. Find (". Slider-bar");
     var $sliderBtn = $sliderDate. Find (". slider-bar-btn"); var liwid = +; Width of single li//scrolling specified position var slidertodes = function (index) {//MAX cannot exceed if (Index >) {index =
      ;
      }//min cannot be less than if (Index <) {index =;
      }//Background animation $sliderBar. Animate ({"width": Liwid * (index +)},);
      Execute callback if (setting.callback) {setting.callback (index);
     }
     };
     Click-Scroll to the specified position $sliderDate. On (' Click ', ' Li ', function (e) {//Execute scrolling method Slidertodes ($ (this). index ());
     }); Drag-Scroll toThe specified location $sliderBtn. On (' MouseDown ', function (e) {var $this = $ (this);
      var pointx = e.pagex-$this. Parent (). width ();
      var wid = null;  Drag event $ (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}); });

The above code is very simple, I hope you can enjoy.