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# DATETIME格式转换汇总 根据日期获取星期
原文:C# DATETIME格式转换汇总 根据日期获取星期 C# DateTime.Now.Year --2019(年) DateTime.Now.Month --9(月) DateTime.Now. ...
- 使用纯php构建一个简单的PHP服务器
使用原生PHP构建一个简单的PHPWeb服务器 1.目录机构 webserver --src -- Response.php -- Server.php -- Request.php -- vendo ...
- day03 for循环、字符串方法、类型转换
01 上周内容回顾 while 条件: 循环体 例: while True: print(111) print(222) print(333) 结束循环的两种方式: 1,改变条件. 2,break. ...
- 一、dynamic
一.dynamic使用: 从一直使用动态类型写接口 返回动态类型出现情况 1.返回接口每次不知道包含那些列(实体类解决) 2.操作的数据类型 不可知(参与数值计算-实体类解决明确类型) Dynamic ...
- Zookeeper3.4.14集群搭建
环境: 3台centos7.4 1. 下载release:wget https://mirrors.tuna.tsinghua.edu.cn/apache/zookeeper/zookeeper-3. ...
- 【抓包工具之Fiddler】中session的请求/响应类型与图标对照表
- 微信小程序swiper组件实现图片宽度自适应
wxml 代码: <!--pages/swipe/swipe.wxml--> <view> <swiper circular="true" indic ...
- 【串线篇】spring boot配置文件大全【下】
一.配置文件占位符 1.1.随机数 ${random.value}.${random.int}.${random.long} ${random.int(10)}.${random.int[1024,6 ...
- Vue通信的10种方式
1.10种通信方式 10种:https://juejin.im/post/5bd18c72e51d455e3f6e4334 2.除此之外,还有children和ref. 需要注意 $children ...
- boost variant
Boost Variant resembles union. You can store values of different types in a boost::variant. 1. #incl ...