卡卡網(wǎng)

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

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

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

效果圖

demodownload

實(shí)例介紹

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

HTML代碼

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

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

CSS代碼

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

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

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

#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

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

首先要引用兩個(gè)JS庫(kù)文件。

<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。

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

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

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

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

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

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

總結(jié)

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

您可能對(duì)以下文章也感興趣

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

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