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 ...
随机推荐
- grep命令用关系或查询多个字符串
bcmsh ps | grep -E 'port|ge2 ' bcmsh ps | grep 'port\|ge2 ' 我的目的是筛选出含有 ‘port’ 或者含有 ‘ge2 ’ 的行,上面的第一行参 ...
- 纯css实现星级评分效果
效果 效果图如下,纯css实现超酷炫的星级评分动画效果 实现思路 5个类型为radio的input,label标签修改样式背景图为星星 label标签给每个星星鼠标停留时加注名字 点击星星有放大旋 ...
- 解决：Module not found: node_modules\sass-loader\package.json (directory description file)
npm uninstall node-sass npm install node-sass@latest
- UIWindow,UINavigationController,UIViewController
- 121-基于TI DSP TMS320DM8148的全高清1080P 60fs的视频编解码系统 机器人主板
基于TI DSP TMS320DM8148的全高清1080P 60fs的视频编解码系统 一.板卡概述 本系统基于最先进的DSP技术,构建一个全高清的视频编解码系统,采用TI的芯片.借助TI的DaVin ...
- 二 shell 基础
一 文件的 权限基础 文件有三类权限 user,group,other, 权限分为 r w x 代表数字分别为 4 2 1 修改权限命令 chmod 权限还有特殊权限,在执行的时候代表某一身 ...
- java 接口概念及使用
package java11; /* 在任何版本的java中,接口都能定义抽象方法 格式: public abstrace 返回值类型 方法名称(参数列表): 注意事项: 1.接口当中的抽象方法,修饰 ...
- Es学习第十一课，使用java操作elasticsearch
前面十节课我们已经把ES的基本概念和使用讲的差不多了,现在我们就用基于java来实际开发一个操作ES的小项目,带大家来一起练练手. 1.我们用IDEA创建一个maven项目 项目结构如上图所示,然后我 ...
- 什么是NFA(不确定的有穷自动机)和DFA(确定的有穷自动机)
本节知识点是<编译原理>第三章-词法分析,学习参考教材为清华大学出版社<编译原理>第三版: 前情提要: 字母表∑1和∑2的乘积( product): ∑1∑2 ={ab|a ∈ ...
- python 图像处理中二值化方法归纳总结
python图像处理二值化方法 1. opencv 简单阈值 cv2.threshold 2. opencv 自适应阈值 cv2.adaptiveThreshold 3. Otsu's 二值化 例子: ...