基于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 相关文章推荐
JavaScript中数组对象的那些自带方法介绍
Mar 12 Javascript
jquery常用方法及使用示例汇总
Nov 08 Javascript
jquery.form.js实现将form提交转为ajax方式提交的方法
Apr 07 Javascript
Bootstrap+jfinal实现省市级联下拉菜单
May 30 Javascript
JavaScript中关键字 in 的使用方法详解
Oct 17 Javascript
微信小程序自定义弹窗wcPop插件
Nov 19 Javascript
JS/jQuery实现获取时间的方法及常用类完整示例
Mar 07 jQuery
解决layer 关闭当前弹窗 关闭遮罩层 input值获取不到的问题
Sep 25 Javascript
jquery制作的移动端购物车效果完整示例
Feb 24 jQuery
微信小程序实现菜单左右联动
May 19 Javascript
javascript实现评分功能
Jun 24 Javascript
vue实现简单数据双向绑定
Apr 28 Vue.js
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实现执行外部程序的方法详解
2017/08/17 PHP
PHPCrawl爬虫库实现抓取酷狗歌单的方法示例
2017/12/21 PHP
在PHP中输出JS语句以及乱码问题的解决方案
2019/02/13 PHP
Laravel向公共模板赋值方法总结
2019/06/25 PHP
js左侧多级菜单动态的解决方案
2010/02/01 Javascript
跟我学Nodejs(二)--- Node.js事件模块
2014/05/21 NodeJs
jquery操作checkbox示例分享
2014/07/21 Javascript
JQuery中ajax方法访问web服务实例
2015/07/18 Javascript
折叠菜单及选择器的运用
2017/02/03 Javascript
微信小程序中实现一对多发消息详解及实例代码
2017/02/14 Javascript
快速解决vue-cli不能初始化webpack模板的问题
2018/03/20 Javascript
利用JS动态生成隔行换色HTML表格的两种方法
2018/10/09 Javascript
vue + element-ui的分页问题实现
2018/12/17 Javascript
Vue发布项目实例讲解
2019/07/17 Javascript
JS实现滑动插件
2020/01/15 Javascript
[01:45]DOTA2众星出演!DSPL刀塔次级职业联赛宣传片
2014/11/21 DOTA
给你选择Python语言实现机器学习算法的三大理由
2017/11/15 Python
python 3.7.0 下pillow安装方法
2018/08/27 Python
使用pandas把某一列的字符值转换为数字的实例
2019/01/29 Python
python 发送邮件的四种方法汇总
2020/12/02 Python
一款恶搞头像特效的制作过程 利用css3和jquery
2014/11/21 HTML / CSS
LA MER海蓝之谜美国官网:传奇面霜
2016/08/27 全球购物
Wolford法国官网:奥地利奢侈内衣品牌
2020/08/11 全球购物
JAVA和C++的区别
2013/10/06 面试题
大学同学聚会邀请函
2014/01/19 职场文书
信用社主任竞聘演讲稿
2014/05/23 职场文书
中学生民族团结演讲稿
2014/08/27 职场文书
观看信仰心得体会
2014/09/04 职场文书
企业开业庆典答谢词
2015/01/20 职场文书
个人学习总结范文
2015/02/15 职场文书
书法社团活动总结
2015/05/07 职场文书
学雷锋主题班会教案
2015/08/13 职场文书
强烈推荐:小学生:暑假作息时间表(值得收藏)
2019/07/09 职场文书
励志语录:你若不勇敢,谁替你坚强
2019/11/08 职场文书
三种方式清除vue路由跳转router-link的历史记录
2022/04/10 Vue.js
Vue3实现简易音乐播放器组件
2022/08/14 Vue.js