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);
}
});
};
HMTL5滑动块研究的更多相关文章
- iOS:步进UIStepper、滑动块UISlider、开关UISwitch的基本使用
步进UIStepper.滑动块UISlider:当它们作为事件,被触发时,它们的值会发生改变.正因为如此,触发该事件时,可以一张一张翻阅浏览图片,,,, 步进UIStepper: @property( ...
- wxpython(2)--按钮，位图按钮，滑动块，微调控制器
本文介绍按钮,位图按钮,滑动块,微调控制器**.. 按钮 基本按钮 创建一个按钮,绑定点击事件,点击后修改Label 123456789101112131415161718 import wx cla ...
- UnityEditorWindow做一个TimeLine的滑动块
UnityEditorWindow做一个TimeLine的滑动块 最近在做一个基于TimeLine的动画编辑器,在制作TineLine滑动条时遇到问题,网上查了好久,试了好多GUI组件都不满意.最后在 ...
- iOS UISlider滑动块触摸范围调整变大
正常情况下,我们自定义的滑动区域都不会太大,否则UI不美观,但是这样,又会手势不灵敏,用户体验变差. 如何解决? 这里有一种方案:封装一个继承UISlider的自定义类,重写thumbRectForB ...
- halcon 图片加载和设置XY轴滑动块的先后顺序
//必须先加载图片,然后执行 hWndControl.setGUICompRangeX( new int[]{ XTrackBar.Minimum, XTrackBar.Maximum}, XTrac ...
- 重复数据删除(De-duplication)技术研究（SourceForge上发布dedup util）
dedup util是一款开源的轻量级文件打包工具,它基于块级的重复数据删除技术,可以有效缩减数据容量,节省用户存储空间.目前已经在Sourceforge上创建项目,并且源码正在不断更新中.该工具生成 ...
- viewPager 的可滑动 Title
有三种方式: 1. 系统提供的title 缺点:标题在viewpager的滑动过程中也会滑动 实现:在ViewPager布局中添加 PagerTabStrip 或者是 PagerTitleStrip ...
- 自定义scrollview右侧的滑动条
在做这个功能之前我其实是拒绝的,为什么这么说呢,因为我怕麻烦啊!(开玩笑的,怕麻烦就不做程序员了) 很久没有写博客,这次刚好项目中有个有趣的东西,想拿出来分享一下,希望能帮到某些小伙伴. 首先说说需求 ...
- android 双向滑动 seekbar
实现原理: 1.自定义View,在onDraw(Canvas canvas)中,画出2个Drawable滑动块,2个Drawable滑动条,2个Paint(text) 2.监听onTouchEvent ...
随机推荐
- c#模板化生成接口
最近打算做这样一个事情,一个桌面系统项目既可以一体化部署,作为一个软件一个进程部署,也可以把业务服务化部署. 那一般意味着我们要完全写2套东西,一套是直接UI调用业务,一套是Ui调用RPC.这样比较多 ...
- Freeswitch Tutorial
I. Install Freeswitch 1) FreeSWITCH Explained https://freeswitch.org/confluence/ https://freeswitch. ...
- OS库的使用
Python中有关OS库的使用 路径操作 os.path.abspath(path) 返回path在当前系统中的绝对路径 os.path.normpath(path) 归一化path的表示形式,统一用 ...
- C Primer Plus 学习 第四章
字符串与格式化输入/输出 函数 strlen() 关键字 const 利用#define 和 const创建符号常量 #include <stdio.h> #include <str ...
- Vue--事件处理（逐个学习事件修饰符）
.capture .self .once 主要学习这三个事件修饰符的用法先来看看capture capture即是给元素添加一个监听器,当元素发生冒泡时,先触发带有该修饰符的元素.若有多个该修饰符,则 ...
- idea报错Diamond types are not supported at this language level
project structure中的project ,SDK选择1.8,Project language level选择8 project structure中的module,选择Language ...
- Spring事务中的readonly
来源:https://www.cnblogs.com/straybirds/p/9147892.html Spring的事务经常会有这样的配置: <tx:method name="se ...
- VMware Tool的新手简单安装
1.打开工具栏的虚拟机,点击安装VMware tool2.打开根目录的media文件夹,打开用户名命名的文件夹,复制VMxxx.tar.gz的压缩包3.粘贴到Home,4.在终端输入tar -zxvf ...
- ltp-ddt realtime_cpu_load timeout
# @name Worstcase Latency with cpu load by using cyclictest# @desc Measure latency under cpu load by ...
- 【leetcode】1014. Capacity To Ship Packages Within D Days
题目如下: A conveyor belt has packages that must be shipped from one port to another within D days. The ...