Home>

html code:

<center>
  <div>
   <!-Bottom->
   <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li>year</li>
    <li>year</li>
    <li>year</li>
   </ul>
   <!-Interactive Layer->
   <div>
    <ul>
     <li><span>month</span></li>
     <li><span>month</span></li>
     <li><span>month</span></li>
     <li><span>month</span></li>
     <li><span>month</span></li>
     <li><span>month</span></li>
     <li><span>month</span></li>
     <li><span>month</span></li>
     <li><span>month</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:;"><i></i><i></i></a>
   </div>
  </div>
  <br />
  <br />
  <div>
   <!-Bottom->
   <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li>year</li>
    <li>year</li>
    <li>year</li>
   </ul>
   <!-Interactive Layer->
   <div>
    <ul>
     <li><span>month</span></li>
     <li><span>month</span></li>
     <li><span>month</span></li>
     <li><span>month</span></li>
     <li><span>month</span></li>
     <li><span>month</span></li>
     <li><span>month</span></li>
     <li><span>month</span></li>
     <li><span>month</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:;"><i></i><i></i></a>
   </div>
  </div>
  <br />
  <br />
  <div>
   <!-Bottom->
   <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li>year</li>
    <li>year</li>
    <li>year</li>
   </ul>
   <!-Interactive Layer->
   <div>
    <ul>
     <li><span>month</span></li>
     <li><span>month</span></li>
     <li><span>month</span></li>
     <li><span>month</span></li>
     <li><span>month</span></li>
     <li><span>month</span></li>
     <li><span>month</span></li>
     <li><span>month</span></li>
     <li><span>month</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:;"><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:

//Slide plugin by-mantou qq:
  ;(function ($) {
   $.fn.sliderdate=function (setting) {
    var defaults={
     callback:false //The default callback function is false
    }
    //If setting is empty, take the default value
    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 a single li
     //Scroll the specified position
     var slidertodes=function (index) {
      //Maximum cannot exceed
      if (index>) {
       index =;
      }
      //Minimum 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 the scroll method
      slidertodes ($(this) .index ());
     });
     //Drag-scroll to the specified position
     $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,Hope everyone likes it.

  • Previous ASPNET MVC5 Website Development Framework Model, Data Storage, Business Logic (3)
  • Next Black hat seo hijacker, js hijack search engine code