input新类型type="range"的使用,针对样式的改写
来源:互联网 发布:管家婆软件打印机关闭 编辑:程序博客网 时间:2024/06/05 20:16
最近公司的一些项目需要,对input的新类型range进行了一番的使用,主要是针对它的样式进行了重新的改写。达到下面的这种需求,我移动range上面的小球,它会随着我的移动而改变它的值,如图:
开始的位置移动过程中
可能网上也有很多这样的例子,但是我还是把我的分享一下,代码简单的很,只需要选择节点就可以了。代码如下:
css部分:
input[type=range]{ margin-top: 8px; outline: none; -webkit-appearance: none;/*清除系统默认样式*/ width:56% !important; background: -webkit-linear-gradient(#61bd12, #61bd12) no-repeat, #ddd; background-size: 30% 100%;/*设置左右宽度比例*/ height: 3px;/*横条的高度*/ } /*拖动块的样式*/ input[type=range]::-webkit-slider-thumb { -webkit-appearance: none;/*清除系统默认样式*/ height:16px;/*拖动块高度*/ width: 16px;/*拖动块宽度*/ background: #fff;/*拖动块背景*/ border-radius: 50%; /*外观设置为圆形*/ border: solid 1px #ddd; /*设置边框*/ }HTML部分:
<div class="an_speed after_clear"> <span>速度:</span> <input type="range" name="range_speed" id="range_speed" value="30" oninput="changeSpeed()" /> <span id="value1">3.0</span>秒</div>JavaScript部分:这里我引入了jQuery,大家可以自己去网上找一份引入。
<script type="text/javascript">function changeSpeed() {var value = $('#range_speed').val();var valStr = value + "% 100%";$('#value1').html((value / 10).toFixed(1));$('#range_speed').css({ "background-size": valStr})$("input[name='animat_speed']").val((value / 10).toFixed(1));};</script>
这样就可以达到我上面的效果,供大家参考.....
阅读全文
0 0
- input新类型type="range"的使用,针对样式的改写
- 设置input type=range滑块的CSS样式
- CSS定义input的type类型样式
- input type = "range"滑块和output的使用
- input type="file" 样式的模仿
- input[type="file"]的样式修改
- 自定义input[type="radio"]的样式
- 自定义input[type=”file”]的样式
- input,type="file"的样式修改
- 自定义input[type="checkbox"]的样式
- 美化input type="file"的样式
- input[type = range]
- 自定义(滑动条)input[type="range"]样式
- 自定义(滑动条)input[type="range"]样式
- Input对象的type类型
- css 区分 input 的类型 input[type="text"]
- type=file的input框样式修改的方法
- 定义input type=file 样式的方法,使用一个text和一个button模拟
- 实训--day02反射
- ionic 全屏显示,隐藏状态栏StatusBar
- 关于SQL查询效率
- gradle 配置
- Android 开发进阶: 自定义 View 1-1 绘制基础
- input新类型type="range"的使用,针对样式的改写
- 获取 input[type=date]的值value
- android瑞士军刀:busybox
- 批量柱编号
- js与oc做交互的一个demo
- 关于eclipse解决java前台往后台传值乱码问题
- 仿新版QQ底部导航栏动态拖动按钮
- 【Photoshop】Photoshop 64Bit与Camera Raw安装包
- DescriptionResourcePathLocationType AbsRequestEvent cannot be resolved to a typeLogViewRequ