html5拖动滑块
html5中input有增加type=range。这为拖动滑块提供了很大的便利。下面是他的属性：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.main{ position: relative;width: 500px;}
#range {
-webkit-appearance: none;
background: #;
height: 3px;
outline: none;
margin: ;
width: 500px;
}
input[type=range]::-webkit-slider-thumb{
-webkit-appearance: none;
width: 20px;
height: 20px;
border-radius: %;
background: red;
}
p{
position: absolute;
width: 0px;
height: 3px;
background: green;
top: -2px;
left: ;
}
.range{
position: relative;
}
.value{
padding: 10px;
background: #ffebc7;
font-size: 40px;
text-align: center;
margin: auto;
}
</style>
</head>
<body>
<div class="main">
<div class="value"></div>
<div class="range">
<input type="range" max="" min="" id="range" step="0.1" value="">
<p></p>
</div>
</div>
</body>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
$(".value").html("")
var rangeSwitch=function () {
var x=$("#range").val();
$("p").css({"width":(x/)**0.96})//乘的0.96是因为要不然绿色的颜色会有部分盖住滑动按钮（500-20）/500=0.96;
$(".value").html(x)
}
$("#range").on("input",rangeSwitch)
</script>
</html>
html5拖动滑块的更多相关文章
- js+css3+HTML5拖动滑块(type="range")改变值
最近在做一个H5的改版项目,产品和设计给出的效果中有一个拖动滑块可以改变输入值的效果,类似如下图这样: 拿到这样的设计稿后,我有点懵了,自己写一个js?去网上找一个这样的效果?自己写一个可以,只是实现 ...
- HTML5 拖动
触发的事件有:dragstart事件.drag事件和dragend事件. 按下鼠标键并开始移动鼠标的时候,会在被拖拽的元素上触发dragstart事件.这时候光标变成”不能放”符号(圆环中有一条反斜线 ...
- jQuery手机触屏拖动滑块验证跳转插件
HTML: <!DOCTYPE html> <html lang="en"> <head> <title>jQuery手机触屏拖动滑 ...
- 非常酷的jQuery/HTML5图片滑块特效 带弹性菜单
新的一周刚刚开始,当我迷迷糊糊坐在办公桌前时,又不自主的去看了一些jQuery和HTML5的应用插件,今天我们来看一款非常酷的jQuery/HTML5图片滑块特效,这款插件的特点是图片上不错的弹性菜单 ...
- 原生js实现拖动滑块验证
拖动滑块验证是现在的网站随处可见的,各式各样的拖动法都有. 下面实现的是某宝的拖动滑块验证: <!DOCTYPE html> <html lang="en"> ...
- [Android实例] 拖动滑块进行图片拼合验证方式的实现
该篇文章从eoeAndroid搬迁过来的,原文地址:[Android实例] 拖动滑块进行图片拼合验证方式的实现 现在网站上有各种各样的验证码验证方式,比如计算大小,输入图片内容等,今天在一家网站上看到 ...
- js 拖动滑块验证
备注:拖动滑块时尽量平移,chrome浏览器上没有卡顿情况,但是搜狗极速模式和360极速模式都遇到了卡顿,拖不动情况,应是浏览器内部对事件响应速度导致吧. JS代码: ;(function ($,wi ...
- seekBar拖动滑块
中秋节学习,, 通过拖动滑块,改变图片的透明度 <?xml version="1.0" encoding="utf-8"?> <LinearL ...
- 原生JS实现拖动滑块验证登录效果
♀分享一组利用原生JS实现拖动滑块验证效果 ♀在这个组代码中涉及三个方面的知识: ⑴事件处理 ⑵添加验证标记 ⑶选择器的封装 代码如下: <!DOCTYPE html> <htm ...
随机推荐
- .PHP生成静态html文件的方法
1. [代码][PHP]代码 1,下面使用模版的一个方法! <?php $fp = fopen ("templets.html","a"); ...
- 字符编码乱码问题（servlet底层 编码大揭秘）
好多初学者会遇到,请求过去的信息内包含中文(一般会是get方式提交过去的请求会出现).好郁闷,这是为什么呢.有下面分析下,说的不好可以吐槽 话说我们能遇到这种编码的问题,归根结底就是这 这 web开 ...
- css 浏览器兼容性问题集合
http://www.xidayun.com/index.php/2016/05/16/941/ 文章取自前端蜂小客
- python3 安装 opencv3 （win10,64bit）
python3只能安装opencv3 (python2安装opencv应该比python3安装的要简单,可参阅网上其他教程) 步骤参考http://stackoverflow.com/quest ...
- ASoC框架
ASoC框架分为3部分: 1. platform(用来描述芯片的DAI接口,负责数据传输): DAI:snd_soc_dai_driver, 用来表示支持哪些格式数据, 提供设置格式的函数, 启动数据 ...
- FFmpeg常用命令 （三）流媒体
前言 如此强大的FFmpeg,能够实现视频采集.视频格式转化.视频截图.视频添加水印.视频切片.视频录制.视频推流.更改音视频参数功能等.通过终端命令如何实现这些功能,Richy在本文做一记录,以备之 ...
- 量子隐形传态1 Quantum Teleportation
量子隐形传态是量子纠缠的又一个应用. 隐形传态,所谓隐形的意思就是没有物质介质就传递了信息,在经典世界,传递信息要有介质,光.电磁波或者其他的什么,但是在量子的世界里,我可以把信息传递给你,并且不传递 ...
- 【Hadoop】HDFS笔记（一）：Hadoop的RPC机制
RPC(Remote Procedure Call, 远程过程调用)主要面对两个问题: 1.对象调用方式: 2.序列/反序列化机制. Hadoop实现的RPC组件依赖于Hadoop Writable类 ...
- 常用的网站站长SEO工具
网站管理员工具 网站管理员工具需要对网站域名所有权进行验证,通常是通过上传指定文件.增加META或者修改网站DNS来验证管理员身份,通过验证后,网站管理员可以查询到自己网站的各类统计信息. 1. Go ...
- UVa 658 It's not a Bug, it's a Feature! (状态压缩+Dijstra)
题意:首先给出n和m,表示有n个bug和m个补丁.一开始存在n个bug,用1表示一个bug存在0表示不存在,所以一开始就是n个1,我们的目的是要消除所有的bug, 所以目标状态就是n个0.对于每个补丁 ...