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 ...
随机推荐
- sudo在清理内存的时候报错
运行下面语句清缓存时,报Permission denied错误:-bash: /proc/sys/vm/drop_caches: Permission denied sudo echo 1 > ...
- iviewUI框架,使用table表格内render下拉框select被遮盖问题
使用props:{ transfer:true },即可 1.原本代码:
- JS高级 — 函数中的this指向问题
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...
- tensorflow的阶、形状、数据类型
张量的阶.形状.数据类型 TensorFlow用张量这种数据结构来表示所有的数据.你可以把一个张量想象成一个n维的数组或列表.一个张量有一个静态类型和动态类型的维数.张量可以在图中的节点之间流通. 阶 ...
- ini配置文件内如果有更新参数
ini配置文件内如果有更新参数 执行更新 更新参数 自动去下载执行????
- 前端学习(三十四）对象&模块化（笔记）
人,工人 //类的定义 function Person(name,age){ //构造函数 //工厂模式 //1.原料 //var obj = new ...
- 【LeetCode】一种博弈思路 minimax（共5题）
[292] Nim Game (2019年3月12日,E) 有一堆石头,游戏规则是每次可以从里面拿1-3颗石头,拿到最后的石头的人赢.你和你的对手都 optimal 的玩这个游戏,问先手(也就是你)能 ...
- 消费者与生产者---LinkedList方式模拟
采用LinkedList数据结构方式来模拟消费者与生产者模型,小Demo import java.util.LinkedList; public class MyQueue { private fin ...
- $emit 和 $on 进行平行组件之间的传值
效果图: 注:$emit 和 $on 的事件必须在一个公共的实例上,才能够触发: $emit 触发 $on 接收 需求: 1.有A.B.C三个组件,同时挂载到入口组件中: 2.将A组件中的数据传递到C ...
- Debug模式自定义NSlog
#ifdef DEBUG # define DLog(fmt, ...) NSLog((@"[文件名:%s]\n" "[函数名:%s]\n" "[行号 ...