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


Posted in Javascript onSeptember 15, 2015

这是一款基于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 });
  });

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

Javascript 相关文章推荐
JQuery+JS实现仿百度搜索结果中关键字变色效果
Aug 02 Javascript
js中scrollHeight,scrollWidth,scrollLeft,scrolltop等差别介绍
May 16 Javascript
JavaScript中数组对象的那些自带方法介绍
Mar 12 Javascript
JS记录用户登录次数实现代码
Jan 15 Javascript
举例讲解Node.js中的Writable对象
Jul 29 Javascript
jQuery简单实现input文本框内灰色提示文本效果的方法
Dec 02 Javascript
全面解析Bootstrap中form、navbar的使用方法
May 30 Javascript
jQuery web 组件 后台日历价格、库存设置的代码
Oct 14 Javascript
bootstrap table小案例
Oct 21 Javascript
AngularJS的$location使用方法详解
Oct 19 Javascript
详解微信小程序-扫一扫 wx.scanCode() 扫码大变身
Apr 30 Javascript
uniapp电商小程序实现订单30分钟倒计时
Nov 01 Javascript
JavaScript 封装一个tab效果源码分享
Sep 15 #Javascript
jQuery简单实现两级下拉菜单效果代码
Sep 15 #Javascript
黑帽seo劫持程序,js劫持搜索引擎代码
Sep 15 #Javascript
JavaScript实现仿新浪微博大厅和腾讯微博首页滚动特效源码
Sep 15 #Javascript
JS实现仿FLASH效果的竖排导航代码
Sep 15 #Javascript
JS+CSS实现自适应选项卡宽度的圆角滑动门效果
Sep 15 #Javascript
JS实现完全语义化的网页选项卡效果代码
Sep 15 #Javascript
You might like
PHP编程与应用
2006/10/09 PHP
php strtotime 函数UNIX时间戳
2009/01/14 PHP
php学习笔记 面向对象的构造与析构方法
2011/06/13 PHP
PHP中mysql_field_type()函数用法
2014/11/24 PHP
codeigniter中实现一次性加载多个view的方法
2015/03/20 PHP
分享50个提高PHP执行效率的技巧
2015/12/26 PHP
CI框架支持$_GET的两种实现方法
2016/05/18 PHP
可以支持多中格式的JS键盘
2007/05/02 Javascript
javascript 日期时间函数(经典+完善+实用)
2009/05/27 Javascript
js改变鼠标的形状和样式的方法
2014/03/31 Javascript
BootStrap Progressbar 实现大文件上传的进度条的实例代码
2016/06/27 Javascript
layui弹出层效果实现代码
2017/05/19 Javascript
以BootStrap Tab为例写一个前端组件
2017/07/25 Javascript
详解angular2 控制视图的封装模式
2018/12/27 Javascript
详解JavaScript的数据类型以及数据类型的转换
2019/04/20 Javascript
微信小程序实现form表单本地储存数据
2019/06/27 Javascript
小程序怎样让wx.navigateBack更好用的方法实现
2019/11/01 Javascript
JS遍历树层级关系实现原理解析
2020/08/31 Javascript
[01:03:18]DOTA2-DPC中国联赛 正赛 RNG vs Dynasty BO3 第一场 1月29日
2021/03/11 DOTA
深入理解python多进程编程
2016/06/12 Python
新手常见6种的python报错及解决方法
2018/03/09 Python
在python中安装basemap的教程
2018/09/20 Python
python查看数据类型的方法
2019/10/12 Python
Python预测2020高考分数和录取情况
2020/07/08 Python
css3中transition属性详解
2014/09/02 HTML / CSS
美国内衣品牌:Leonisa
2016/08/14 全球购物
C/C++有关内存的思考题
2015/12/04 面试题
为什么会有内存对齐
2016/10/10 面试题
大学自主招生自荐信
2013/12/16 职场文书
幼儿园教师请假制度
2014/01/16 职场文书
十八届三中全会宣传方案
2014/02/21 职场文书
《李时珍夜宿古寺》教学反思
2014/04/09 职场文书
党务公开方案
2014/05/06 职场文书
五好关工委申报材料
2014/05/31 职场文书
地震捐款简报
2015/07/21 职场文书
《中国机长》观后感:敬畏生命,敬畏职责
2019/11/12 职场文书