基于jQuery滑動桿實現購買日期選擇

2024-04-27 15:01:21

字體：大中小

來源：轉載

供稿：網友

這是一款基于jQuery的滑動桿購買日期選擇插件，它的外觀仿的是阿里云的服務器購買日期選擇界面。這款jQuery插件非常適合在一些虛擬產品購買頁面上使用，它可以幫助你的用戶快速選擇產品的購買日期，十分方便。效果圖如下：

在線預覽源碼下載

實現的代碼。

html代碼：

<center>       <div class="slider-date" id="slider-date-1">            <!--底層-->           <ul class="slider-bg clearfix">               <li>1</li>               <li>2</li>               <li>3</li>               <li>4</li>               <li>5</li>               <li>6</li>               <li>7</li>               <li>8</li>               <li>9</li>               <li>1年</li>               <li>2年</li>               <li>3年</li>           </ul>            <!--互動層-->           <div class="slider-bar">               <ul class="slider-bg clearfix">                   <li>1<span>1個月</span></li>                   <li>2<span>2個月</span></li>                   <li>3<span>3個月</span></li>                   <li>4<span>4個月</span></li>                   <li>5<span>5個月</span></li>                   <li>6<span>6個月</span></li>                   <li>7<span>7個月</span></li>                   <li>8<span>8個月</span></li>                   <li>9<span>9個月</span></li>                   <li>1年<span>1年</span></li>                   <li>2年<span>2年</span></li>                   <li>3年<span>3年</span></li>               </ul>               <!--滑塊按鈕-->               <a href="javascr class="slider-bar-btn"><i></i><i></i></a>           </div>        </div>        <br />       <br />        <div class="slider-date" id="slider-date-2">            <!--底層-->           <ul class="slider-bg clearfix">               <li>1</li>               <li>2</li>               <li>3</li>               <li>4</li>               <li>5</li>               <li>6</li>               <li>7</li>               <li>8</li>               <li>9</li>               <li>1年</li>               <li>2年</li>               <li>3年</li>           </ul>            <!--互動層-->           <div class="slider-bar">               <ul class="slider-bg clearfix">                   <li>1<span>1個月</span></li>                   <li>2<span>2個月</span></li>                   <li>3<span>3個月</span></li>                   <li>4<span>4個月</span></li>                   <li>5<span>5個月</span></li>                   <li>6<span>6個月</span></li>                   <li>7<span>7個月</span></li>                   <li>8<span>8個月</span></li>                   <li>9<span>9個月</span></li>                   <li>1年<span>1年</span></li>                   <li>2年<span>2年</span></li>                   <li>3年<span>3年</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-3">            <!--底層-->           <ul class="slider-bg clearfix">               <li>1</li>               <li>2</li>               <li>3</li>               <li>4</li>               <li>5</li>               <li>6</li>               <li>7</li>               <li>8</li>               <li>9</li>               <li>1年</li>               <li>2年</li>               <li>3年</li>           </ul>            <!--互動層-->           <div class="slider-bar">               <ul class="slider-bg clearfix">                   <li>1<span>1個月</span></li>                   <li>2<span>2個月</span></li>                   <li>3<span>3個月</span></li>                   <li>4<span>4個月</span></li>                   <li>5<span>5個月</span></li>                   <li>6<span>6個月</span></li>                   <li>7<span>7個月</span></li>                   <li>8<span>8個月</span></li>                   <li>9<span>9個月</span></li>                   <li>1年<span>1年</span></li>                   <li>2年<span>2年</span></li>                   <li>3年<span>3年</span></li>               </ul>               <!--滑塊按鈕-->               <a href="javascript:;" class="slider-bar-btn"><i></i><i></i></a>           </div>        </div>   </center>

CSS代碼：

ul, li {         padding: 0;         margin: 0;         list-style-type: none;     }      .clearfix:after {         display: block;         content: "";         clear: both;     }      .slider-date {         height: 36px;         line-height: 36px;         background: #e8e8e8;         display: inline-block;         position: relative;     }          .slider-date .slider-bg li {             position: relative;             float: left;             width: 50px;             border-left: solid 1px #ddd;             font-size: 12px;             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: -2px;             left: 0;             overflow: hidden;             height: 40px;             width: 50px;         }              .slider-date .slider-bar ul {                 margin-top: 1px;                 background: #43bfe3;                 color: #fff;                 height: 36px;                 width: 1000px;             }          .slider-date .slider-bar-btn {             line-height: 40px;             text-align: center;             position: absolute;             top: -2px;             right: 0px;             display: block;             width: 16px;             height: 40px;             background: #2dacd1;             color: #fff;         }              .slider-date .slider-bar-btn i {                 display: inline-block;                 margin: 12px 2px;                 width: 2px;                 height: 12px;                 background: #68c3de;             }

js代碼：

//滑動插件 by - mantou QQ:676015863       ; (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 = 50 + 1; //單個li的寬度                    //滾動指定的位置                   var sliderToDes = function (index) {                        //最大不能超過11                       if (index > 11) {                           index = 11;                       }                        //最小不能小于 0                       if (index < 0) {                           index = 0;                       }                        //背景動畫                       $sliderBar.animate({                           "width": liWid * (index + 1)                       }, 500);                        //執行回調                       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 > 20 && wid < 620) {                               $sliderBar.css("width", wid);                           }                       }).on('mouseup', function (e) {                           $(this).off('mousemove mouseup');                           var index = Math.ceil(wid / liWid) - 1;                           sliderToDes(index);                       });                   });               });           }       })(jQuery);        $(function () {           function a(index) {               console.log(index + 1);           }           $("#slider-date-1").sliderDate({ callback: a });            function b(index) {               console.log(index + 1);           }           $("#slider-date-2").sliderDate({ callback: b });            function c(index) {               console.log(index + 1);           }           $("#slider-date-3").sliderDate({ callback: c });       });