HMTL5滑动块研究
滑动块图片
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0 , maximum-scale=1.0, user-scalable=0">
<meta name="format-detection" content="telephone=no">
<title></title>
<link href="css/mui.min.css" rel="stylesheet" type="text/css" />
<link href="css/animate.min.css" rel="stylesheet" type="text/css" />
<script src="js/rem_scaler.js"></script>
<style>
/*滑动圆块开始*/
/*设置滑动轨道*/
.mui-input-range input[type=range]{
height:0.18rem;
background:url("img/range.png") repeat scroll 0 0 ;
background-size:5rem 0.18rem;
border-radius:0.6rem;
}
/*设置手柄样式*/
.mui-input-range input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
cursor: default;
width:0.8rem;
height:1.14rem;
background:url("img/par.png") repeat scroll 0 0 ;
background-size: 0.8rem 1.14rem;
position: relative;
border-radius: 0;
top:0.22rem;
border:0;
z-index:50;
}
.parPerr2Color{
position: absolute;
width:4.4rem;
height:0.18rem;
top:50%;
margin-top:-0.09rem;
left:0.22rem;
background: -webkit-linear-gradient(left, #ffc9ad 0%, #ff6144 0%,#ffc9ad 100%); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(left, #ffc9ad 0%, #ff6144 0%,#ffc9ad 100%); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(left, #ffc9ad 0%, #ff6144 0%,#ffc9ad 100%); /* Firefox 3.6 - 15 */
background: linear-gradient(left, #ffc9ad 0%, #ff6144 0%,#ffc9ad 100%); /* 标准的语法 */
}
.mui-input-row.mui-input-range{
padding-right: 0;
}
.sliderCont{
margin:0 auto;
padding:1.5rem 0;
}
.sliderContLine{
width:5rem;
margin:0 auto;
position: relative;
}
.sliderContLine{
width: 5rem;
height:auto;
margin: 0 auto;
position: relative;
}
.yuan{
width: 0.3rem;
height: 0.3rem;
background: #ffc9ad;
border-radius: 0.15rem;
position:absolute;
top:50%;
margin-top:-0.15rem;
z-index:30;
}
.row1{
left:0.15rem;
}
.row2{
left:50%;
margin-left:-0.15rem;
}
.row3{
right:0.15rem;
}
.sText{
color:#ff9162;
font-size: 0.3rem;
position: absolute;
width:0.7rem;
bottom:0.6rem;
text-align: center;
}
.sText1{
left:-0.05rem;
}
.sText2{
left:50%;
margin-left:-0.38rem;
}
.sText3{
right:-0.05rem;
}
.sTextRow1{
color:#ee4728;
bottom:0.9rem;
left:-0.05;
font-size:0.4rem;
}
.sTextRow2{
color:#ee4728;
bottom:0.9rem;
left:50%;
font-size:0.38rem;
margin-left:-0.4rem;
}
.sTextRow3{
color:#ee4728;
bottom:0.9rem;
right:-0.05rem;
font-size:0.4rem;
}
.sTextRowAnimation{
-webkit-animation-name: mymove;
animation-name: mymove;
}
.sTextAnimation{
-webkit-animation-name: mymoveSamll;
animation-name: mymoveSamll;
}
@keyframes mymove{
from {
-webkit-transform:scale(0.7) translate3d(0, 100%, 0);
-moz-transform:scale(0.7) translate3d(0, 100%, 0);
-o-transform:scale(0.7) translate3d(0, 100%, 0);
}
to {
-webkit-transform:scale(1) none;
-moz-transform:scale(1) none;
-o-transform:scale(1) none;
}
}
@-webkit-keyframes mymove {
from {
-webkit-transform:scale(0.7) translate3d(0, 100%, 0);
-moz-transform:scale(0.7) translate3d(0, 100%, 0);
-o-transform:scale(0.7) translate3d(0, 100%, 0);
}
to {
-webkit-transform:scale(1) none;
-moz-transform:scale(1) none;
-o-transform:scale(1) none;
}
}
@keyframes mymoveSamll{
from {
-webkit-transform:scale(1.2) translate3d(0, -100%, 0);
-moz-transform:scale(1.2) translate3d(0, -100%, 0);
-o-transform:scale(1.2) translate3d(0, -100%, 0);
}
to {
-webkit-transform:scale(1) none;
-moz-transform:scale(1) none;
-o-transform:scale(1) none;
}
}
@-webkit-keyframes mymoveSamll {
from {
-webkit-transform:scale(1.2);
-moz-transform:scale(1.2);
-o-transform:scale(1.2);
}
to {
-webkit-transform:scale(1);
-moz-transform:scale(1);
-o-transform:scale(1);
}
}
/*第二个滑动*/
.sliderCont2{
text-align: center;
}
.sliderCont2 input[type=range] {
-webkit-appearance: none;
width: 300px;
border-radius: 10px; /*这个属性设置使填充进度条时的图形为圆角*/
background: -webkit-linear-gradient(left,#059CFA, #fff) no-repeat;
background-size: 0% 100%;
}
.sliderCont2 input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
}
.sliderCont2 input[type=range]::-webkit-slider-runnable-track {
height: 15px;
border-radius: 10px; /*将轨道设为圆角的*/
box-shadow: 0 1px 1px #def3f8, inset 0 .125em .125em #0d1112; /*轨道内置阴影效果*/
}
.sliderCont2 input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
height: 25px;
width: 25px;
margin-top: -5px; /*使滑块超出轨道部分的偏移量相等*/
background: #ffffff;
border-radius: 50%; /*外观设置为圆形*/
border: solid 0.125em rgba(205, 224, 230, 0.5); /*设置边框*/
box-shadow: 0 .125em .125em #3b4547; /*添加底部阴影*/
}
.sliderCont2 input[type=range]:focus {
outline: none;
}
.sliderCont2 input[type=range]::-moz-range-progress {
background: linear-gradient(to right, #059CFA, white 100%, white);
height: 13px;
border-radius: 10px;
}
.sliderCont2 input[type=range] {
-webkit-appearance: none;
width: 300px;
border-radius: 10px;
}
.sliderCont2 input[type=range]::-ms-track {
height: 25px;
border-radius: 10px;
box-shadow: 0 1px 1px #def3f8, inset 0 .125em .125em #0d1112;
border-color: transparent; /*去除原有边框*/
color: transparent; /*去除轨道内的竖线*/
}
.sliderCont2 input[type=range]::-ms-thumb {
border: solid 0.125em rgba(205, 224, 230, 0.5);
height: 25px;
width: 25px;
border-radius: 50%;
background: #ffffff;
margin-top: -5px;
box-shadow: 0 .125em .125em #3b4547;
}
.sliderCont2 input[type=range]::-ms-fill-lower {
/*进度条已填充的部分*/
height: 22px;
border-radius: 10px;
background: linear-gradient(to right, #059CFA, white 100%, white);
}
.sliderCont2 input[type=range]::-ms-fill-upper {
/*进度条未填充的部分*/
height: 22px;
border-radius: 10px;
background: #ffffff;
}
.sliderCont2 input[type=range]:focus::-ms-fill-lower {
background: linear-gradient(to right, #059CFA, white 100%, white);
}
.sliderCont2 input[type=range]:focus::-ms-fill-upper {
background: #ffffff;
}
</style>
</head>
<body>
<div class="sliderCont">
<div class="sliderContLine">
<div class="mui-input-row mui-input-range">
<div class="animated sText sText1 sTextRow1">3期</div>
<div class="yuan row1"></div>
<div class="animated sText sText2">4期</div>
<div class="yuan row2" style="display:none"></div>
<div class="animated sText sText3">5期</div>
<div class="yuan row3"></div>
<input type="range" min="0" max="100" value="0" id="range1">
<div class="parPerr2Color"></div>
</div>
</div>
</div>
<div class="sliderCont2">
<input type="range" value="0">
</div>
</body>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/rangeSlider.js"></script>
</html>
<script>
//监听input事件，获取range的value值，也可以直接element.value获取该range的值
var range1 = document.querySelector('input[type="range"]');
firtBoose=true;
range1.addEventListener('input',function(){
$(".mui-tooltip").hide();
var parPerrW=range1.value+"%";//计算进度条宽度
$(".parPerr2Color").css("background","-webkit-linear-gradient(left, #ffc9ad 0%, #ff6144 "+parPerrW+",#ffc9ad 100%)");
if(range1.value>0 && range1.value<=25){
if(firtBoose==false){
$(".sText").removeClass("sTextRow2").removeClass("sTextRow3").removeClass("sTextAnimation");
$(".sText3").addClass(" sTextAnimation");
$(".sText2").addClass("sTextAnimation");
$(".sText1").addClass("sTextRow1").addClass("sTextRowAnimation");
}
}else if(range1.value>=25 && range1.value<=75){
$(".sText").removeClass("sTextRow1").removeClass("sTextRow3").removeClass("sTextAnimation");
$(".sText1").addClass("sTextAnimation");
$(".sText3").addClass("sTextAnimation");
$(".sText2").addClass("sTextRow2").addClass("sTextRowAnimation");
firtBoose=false;
}else if(range1.value>=75){
$(".sText").removeClass("sTextRow1").removeClass("sTextRow2").removeClass("sTextAnimation");
$(".sText2").addClass("sTextAnimation");
$(".sText1").addClass("sTextAnimation");
$(".sText3").addClass("sTextRow3").addClass("sTextRowAnimation");
};
});
/*第二个滑动ＪＳ*/
var change = function($input) {
/*内容可自行定义*/
if($input.value>=0 && $input.value <=50){
console.log(11)
}else if($input.value>=50 && $input.value <=75){
console.log(22)
}else{
console.log(33)
}
}
$(".sliderCont2").find("input").RangeSlider({ min: 0, max: 100, step: 0.1, callback: change});
</script>
第二个滑动的JS，rangeSlider.js
$.fn.RangeSlider = function(cfg){
this.sliderCfg = {
min: cfg && !isNaN(parseFloat(cfg.min)) ? Number(cfg.min) : null,
max: cfg && !isNaN(parseFloat(cfg.max)) ? Number(cfg.max) : null,
step: cfg && Number(cfg.step) ? cfg.step : 1,
callback: cfg && cfg.callback ? cfg.callback : null
};
var $input = $(this);
var min = this.sliderCfg.min;
var max = this.sliderCfg.max;
var step = this.sliderCfg.step;
var callback = this.sliderCfg.callback;
$input.attr('min', min)
.attr('max', max)
.attr('step', step);
$input.bind("input", function(e){
$input.attr('value', this.value);
$input.css( 'background-size', this.value + '% 100%' );
if ($.isFunction(callback)) {
callback(this);
}
});
};
记下点滴，等老了慢慢欣赏
浙公网安备 33010602011771号