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

网络编程 2024/11/17 佚名

3 1 2

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

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

jquery实现左右滑动,jquery实现滑动,jquery滑动效果

华山资源网 Design By www.eoogi.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

华山资源网 Design By www.eoogi.com

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

暂无评论...

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒经典版》的玩家都可以获得奖励。

更新日志

2024年11月17日

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

基于jQuery倾斜打开侧边栏菜单特效代码

JavaScript 封装一个tab效果源码分享

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

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

更新日志

友情链接