基于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实现单行文字间歇向上滚动源代码
Jun 02 Javascript
js window.open弹出新的网页窗口
Jan 16 Javascript
对之前写的jquery分页做下升级
Jun 19 Javascript
node.js中的fs.readFileSync方法使用说明
Dec 15 Javascript
扒一扒JavaScript 预解释
Jan 28 Javascript
JavaScript 定时器 SetTimeout之定时刷新窗口和关闭窗口(代码超简单)
Feb 26 Javascript
学习JavaScript图片预加载模块
Nov 07 Javascript
webpack实用小功能介绍
Jan 02 Javascript
发布Angular应用至生产环境的方法
Dec 10 Javascript
详解vue中$nextTick和$forceUpdate的用法
Dec 11 Javascript
如何使用Jquery动态生成二级选项列表
Feb 06 jQuery
Vue props中Object和Array设置默认值操作
Jul 30 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
PHP4.04简明安装
2006/10/09 PHP
ADODB类使用
2006/11/25 PHP
使用PHP的日期与时间函数技巧
2008/04/24 PHP
PHP strncasecmp字符串比较的小技巧
2011/01/04 PHP
基于php上传图片重命名的6种解决方法的详细介绍
2013/04/28 PHP
深入PHP empty(),isset(),is_null()的实例测试详解
2013/06/06 PHP
详解WordPress开发中用于获取分类及子页面的函数用法
2016/01/08 PHP
用js实现上传图片前的预览(TX的面试题)
2007/08/14 Javascript
js实现拖拽 闭包函数详细介绍
2012/11/25 Javascript
完美解决AJAX跨域问题
2013/11/01 Javascript
JS、DOM和JQuery之间的关系示例分析
2014/04/09 Javascript
JavaScript的Polymer框架中dom-repeat与VM的相关操作
2015/07/29 Javascript
js限制文本框只能输入中文的方法
2015/08/11 Javascript
微信小程序page的生命周期和音频播放及监听实例详解
2017/04/07 Javascript
vue实现模态框的通用写法推荐
2018/02/26 Javascript
tsconfig.json配置详解
2019/05/17 Javascript
js get和post请求实现代码解析
2020/02/06 Javascript
vue实现简单跑马灯效果
2020/05/25 Javascript
[04:11]DOTA2上海特级锦标赛主赛事首日TOP10
2016/03/03 DOTA
[48:37]EG vs OG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
python实现将文本转换成语音的方法
2015/05/28 Python
VSCode下配置python调试运行环境的方法
2018/04/06 Python
python操作docx写入内容,并控制文本的字体颜色
2020/02/13 Python
jupyter notebook 调用环境中的Keras或者pytorch教程
2020/04/14 Python
美国高级工作服品牌:Carhartt
2018/01/25 全球购物
Sneaker Studio捷克:购买运动鞋
2018/07/08 全球购物
人事部主管岗位职责
2013/12/26 职场文书
关于是否需要写商业计划书
2014/02/07 职场文书
我为自己代言广告词
2014/03/18 职场文书
大学理论知识学习自我鉴定
2014/04/28 职场文书
学校评语大全
2014/05/06 职场文书
高校群众路线教育实践活动剖析材料
2014/10/10 职场文书
2014年关工委工作总结
2014/11/17 职场文书
2014年体检中心工作总结
2014/12/23 职场文书
唱歌比赛拉拉队口号
2015/12/25 职场文书
2019年干货:自我鉴定
2019/03/25 职场文书