卡卡網(wǎng)

關(guān)于可拖動滑竿，前面曾介紹過幾個，如：

• [示例詳解]用HTML + CSS創(chuàng)建可拖動的范圍滑塊(Range Slider)
• CSS+JS實現(xiàn)的顏色漸變可拖動滑塊

本文介紹一個CSS實現(xiàn)的漂亮又有特點的可拖動滑竿?？赏蟿踊蛻?yīng)用范圍很廣，當(dāng)你需要設(shè)置一個值的時候，拖動滑竿比填寫數(shù)字更方便，并且避免填寫出錯的可能。

效果圖

demodownload

實例介紹

當(dāng)拖動滑竿時，位于滑塊上方的氣球會顯示當(dāng)前位置的數(shù)值，通過這種方式設(shè)置自己所需的值。

HTML代碼

HTML代碼只需要一個div標(biāo)簽，其id值為slider。

<div id="slider"></div>

CSS代碼

#slider設(shè)置滑竿的樣式。

.balloon設(shè)置氣球的樣式。

下面是部分CSS代碼，完整代碼請看演示代碼，或下載源碼壓縮包。

#slider {
  --active: #5628EE;
  --balloon: var(--active);
  --value: #fff;
  --line: #CDD9ED;
  touch-action: none;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  width: 320px;
  height: 2px;
  border-radius: 1px;
  background: var(--line);
  position: relative;
}
#slider .balloon {
  --o: 0;
  --s: 0;
  --y: 0;
  --r: 0deg;
  width: 52px;
  height: 68px;
  pointer-events: none;
  position: absolute;
  z-index: 5;
  left: -26px;
  bottom: 0;
  transform-origin: 50% 100%;
}
#slider .balloon > div {
  width: 52px;
  height: 68px;
  transform-origin: 50% 100%;
  opacity: var(--o);
  transform: scale(var(--s)) translate(0, var(--y)) rotate(var(--r));
  transition: transform 0.4s ease, opacity 0.4s ease;
}

JavaScript

本實例用到JavaScript編程，實現(xiàn)拖動效果，并在氣球上顯示數(shù)值。

首先要引用兩個JS庫文件。

<script src='nouislider.min.js'></script>
<script src='TweenMax.min.js'></script>

let slider = document.getElementById('slider'),
balloon,
balloonTransform,
balloonReset;

noUiSlider.create(slider, {
  start: 60,
  connect: 'lower',
  range: {
    min: 0,
    max: 100 } });

如上代碼解釋：

• 第一行代碼表示先找到滑竿的元素，即是id為slider的div。
• 第七行start: 60表示滑竿滑塊的初始停留位置。
• 第九行range表示滑竿的范圍值，這里是0到100。

下面代碼是點擊滑竿的滑塊時的函數(shù)，其功能是當(dāng)點擊滑塊和拖動時，氣球出現(xiàn)，并隨著滑塊移動位置。

slider.noUiSlider.on('start', function () {
  ...
});

下面代碼是點擊滑竿時的函數(shù)，其功能是當(dāng)點擊滑竿某一位置時，滑塊會移到相應(yīng)的位置。

slider.noUiSlider.on('slide', function () {
  ...
});

下面代碼是鼠標(biāo)松開時的函數(shù)，其功能是讓氣球消失。

slider.noUiSlider.on('end', function () {
  balloon.classList.remove('active');
  clearInterval(balloonReset);
});

總結(jié)

本文介紹了CSS實現(xiàn)漂亮又有特點的可拖動滑竿，通過氣球顯示滑塊數(shù)值，該實例用到JavaScript編程，并且用到兩個第三方JS插件，如果你也喜歡該效果，可以直接下載源代碼使用。

您可能對以下文章也感興趣

• 純CSS創(chuàng)建圓形旋轉(zhuǎn)圖像滑塊(輪播)【演示/代碼下載】
• CSS 3D 隨機(jī)立方體滑塊【演示/代碼下載】
• CSS 3D立方滑塊，垂直和水平無限循環(huán)滾動
• CSS 3D滑塊動畫效果(水平或垂直方向無限循環(huán)滾動)
• [示例詳解]用HTML + CSS創(chuàng)建可拖動的范圍滑塊(Range Slider)
• CSS+JS實現(xiàn)的顏色漸變可拖動滑塊

標(biāo)簽: css  滑竿  可拖動滑塊  可拖動滑竿  滑塊  3D滑塊