JS+CSS3交互式拖动滑块选择工资条代码

一款JS+CSS3交互式拖动滑块选择工资条代码，可以托工工资下面的滑块来实时改变工资的数值大小，除了数字变化的同时还有一个颜色的平滑变化，当数值到最大值时，有一个文字的摆动动画特效。

分类：css3 > transform 难易：初级

查看演示下载资源下载积分： 20 积分

页面的head部分，需设置好页面元素的样式，代码如下：

body {
  background: #eee;
  text-align: center;
  font-family: 'Lato', sans-serif;
}
h1 {
  color: #666;
  font-size: 4vw;
}
#text {
  display: block;
  text-align: center;
  font-size: 10vw;
  font-weight: 900;
  margin: 5px auto 15px auto;
  transition: color .1s ease-in-out;
  color: #fff;
  text-shadow: 0 1px 0 #ccc,
               0 2px 0 #c9c9c9,
               0 3px 0 #bbb,
               0 4px 0 #b9b9b9,
               0 5px 0 #aaa,
               rgba(0,0,0,.1) 0 6px 1px,
               rgba(0,0,0,.1) 0 0 5px,
               rgba(0,0,0,.3) 0 1px 3px,
               rgba(0,0,0,.2) 0 3px 5px,
               rgba(0,0,0,.25) 0 5px 10px,
               rgba(0,0,0,.2) 0 10px 10px,
               rgba(0,0,0,.15) 0 20px 20px;
}

@-webkit-keyframes wiggle {
  0% {
    -webkit-transform: scale3d(1,1,1);
    transform: scale3d(1,1,1);
  }
  10%, 20% {
    -webkit-transform: scale3d(.95,.95,.95) rotate3d(0,0,1,-3deg);
    transform: scale3d(.95,.95,.95) rotate3d(0,0,1,-3deg);
  }
  30%, 50%, 70%, 90% {
    -webkit-transform: scale3d(1.05,1.05,1.05) rotate3d(0,0,1,3deg);
    transform: scale3d(1.05,1.05,1.05) rotate3d(0,0,1,3deg);
  }
  40%, 60%, 80% {
    -webkit-transform: scale3d(1.05,1.05,1.05) rotate3d(0,0,1,-3deg);
    transform: scale3d(1.05,1.05,1.05) rotate3d(0,0,1,-3deg);
  }
  100% {
    -webkit-transform: scale3d(1,1,1);
    transform: scale3d(1,1,1);
  }
}

@keyframes wiggle {
  0% {
    -webkit-transform: scale3d(1,1,1);
    -ms-transform: scale3d(1,1,1);
    transform: scale3d(1,1,1);
  }
  10%, 20% {
    -webkit-transform: scale3d(.95,.95,.95) rotate3d(0,0,1,-3deg);
    -ms-transform: scale3d(.95,.95,.95) rotate3d(0,0,1,-3deg);
    transform: scale3d(.95,.95,.95) rotate3d(0,0,1,-3deg);
  }
  30%, 50%, 70g, 90% {
    -webkit-transform: scale3d(1.05,1.05,1.05) rotate3d(0,0,1,3deg);
    -ms-transform: scale3d(1.05,1.05,1.05) rotate3d(0,0,1,3deg);
    transform: scale3d(1.05,1.05,1.05) rotate3d(0,0,1,3deg);
  }
  40%, 60%, 80% {
    -webkit-transform: scale3d(1.05,1.05,1.05) rotate3d(0,0,1,-3deg);
    -ms-transform: scale3d(1.05,1.05,1.05) rotate3d(0,0,1,-3deg);
    transform: scale3d(1.05,1.05,1.05) rotate3d(0,0,1,-3deg);
  }
  100% {
    -webkit-transform: scale3d(1,1,1);
    -ms-transform: scale3d(1,1,1);
    transform: scale3d(1,1,1);
  }
}

页面的body部分，需设置好文字和滑块元素，代码如下：

<h1>你想要多少月收入？</h1>
<label id=text>$50,000/month</label>
<input id=slider type=range min=1 max=50 step=1 value=10>

页面的底部，需设置好滑块拖动的事件响应，代码如下：

var input = document.querySelector('[type=range]')

input.addEventListener('input', function(e) {
  var text = document.getElementById('text')
  text.innerHTML = '$' + this.value + ',000/month'
  JSinCSS()
})

window.addEventListener('load', JSinCSS)
window.addEventListener('resize', JSinCSS)
window.addEventListener('input', JSinCSS)
window.addEventListener('click', JSinCSS)

function JSinCSS() {

  var tag = document.querySelector('#JSinCSS')

  if (!tag) {

    tag = document.createElement('style')
    tag.id = 'JSinCSS'
    document.head.appendChild(tag)

  }

  tag.innerHTML = `

    ${slider.value < 10 && `
      #text {
        color: #efe;
        text-shadow:
          0 1px 0 #bcb,
          0 2px 0 #b4c4b4,
          0 3px 0 #aba,
          0 4px 0 #a4b4a4,
          0 5px 0 #9a9,
          rgba(0,0,0,.1) 0 6px 1px,
          rgba(0,0,0,.1) 0 0 5px,
          rgba(0,0,0,.3) 0 1px 3px,
          rgba(0,0,0,.2) 0 3px 5px,
          rgba(0,0,0,.25) 0 5px 10px,
          rgba(0,0,0,.2) 0 10px 10px,
          rgba(0,0,0,.15) 0 20px 20px
        ;
      }
    ` || ''}

    ${10 <= slider.value && `
      #text {
        color: #cfc;
        text-shadow:
          0 1px 0 #bcb,
          0 2px 0 #b4c4b4,
          0 3px 0 #aba,
          0 4px 0 #a4b4a4,
          0 5px 0 #9a9,
          rgba(0,0,0,.1) 0 6px 1px,
          rgba(0,0,0,.1) 0 0 5px,
          rgba(0,0,0,.3) 0 1px 3px,
          rgba(0,0,0,.2) 0 3px 5px,
          rgba(0,0,0,.25) 0 5px 10px,
          rgba(0,0,0,.2) 0 10px 10px,
          rgba(0,0,0,.15) 0 20px 20px
        ;
      }
    ` || ''}

    ${20 <= slider.value && `
      #text {
        color: #afa;
        text-shadow:
          0 1px 0 #78cc78,
          0 2px 0 #70c470,
          0 3px 0 #68bb68,
          0 4px 0 #60b460,
          0 5px 0 #58aa58,
          rgba(0,0,0,.1) 0 6px 1px,
          rgba(0,0,0,.1) 0 0 5px,
          rgba(0,0,0,.3) 0 1px 3px,
          rgba(0,0,0,.2) 0 3px 5px,
          rgba(0,0,0,.25) 0 5px 10px,
          rgba(0,0,0,.2) 0 10px 10px,
          rgba(0,0,0,.15) 0 20px 20px
        ;
      }
    ` || ''}

    ${30 <= slider.value && `
      #text {
        color: #9f9;
        text-shadow:
          0 1px 0 #6c6,
          0 2px 0 #60c460,
          0 3px 0 #56bb56,
          0 4px 0 #50b450,
          0 5px 0 #46aa46,
          rgba(0,0,0,.1) 0 6px 1px,
          rgba(0,0,0,.1) 0 0 5px,
          rgba(0,0,0,.3) 0 1px 3px,
          rgba(0,0,0,.2) 0 3px 5px,
          rgba(0,0,0,.25) 0 5px 10px,
          rgba(0,0,0,.2) 0 10px 10px,
          rgba(0,0,0,.15) 0 20px 20px
        ;
      }
    ` || ''}

    ${40 <= slider.value && `
      #text {
        color: #77ff77;
        text-shadow:
          0 1px 0 #3bcc3b,
          0 2px 0 #34c434,
          0 3px 0 #2bbb2b,
          0 4px 0 #24b424,
          0 5px 0 #1baa1b,
          rgba(0,0,0,.1) 0 6px 1px,
          rgba(0,0,0,.1) 0 0 5px,
          rgba(0,0,0,.3) 0 1px 3px,
          rgba(0,0,0,.2) 0 3px 5px,
          rgba(0,0,0,.25) 0 5px 10px,
          rgba(0,0,0,.2) 0 10px 10px,
          rgba(0,0,0,.15) 0 20px 20px
        ;
      }
    ` || ''}

    ${slider.value == 50 && `
      #text {
        color: #fe0;
        text-shadow:
          0 1px 0 #ccbb00,
          0 2px 0 #c9b900,
          0 3px 0 #bbaa00,
          0 4px 0 #b9a900,
          0 5px 0 #aa9900,
          rgba(0,0,0,.1) 0 6px 1px,
          rgba(0,0,0,.1) 0 0 5px,
          rgba(0,0,0,.3) 0 1px 3px,
          rgba(0,0,0,.2) 0 3px 5px,
          rgba(0,0,0,.25) 0 5px 10px,
          rgba(0,0,0,.2) 0 10px 10px,
          rgba(0,0,0,.15) 0 20px 20px
        ;
        -webkit-animation-duration: 1s;
        animation-duration: 1s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
        -webkit-animation-name: wiggle;
        animation-name: wiggle;
      }
    ` || ''}

  `

}