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 ...
随机推荐
- cnn handwrite使用原生的TensorFlow进行预测
100个汉字,放在data目录下.直接将下述文件和data存在同一个目录下运行即可. 关键参数: run_mode = "train" 训练模型用,修改为validation 表示 ...
- Springboot框架中request.getInputStream()获取不到上传的文件流
Springboot框架中用下面的代码,使用request.getInputStream()获取不到上传的文件流 @PostMapping("/upload_img") publi ...
- .Net-Mongodb学习大全网址
http://www.yuanjiaocheng.net/csharpmongo/16.html 介绍 在上一篇文章中,我们继续探索MongoDb .NET驱动程序中的数据序列化. 我们查看了各种属性 ...
- 【CQ18高一暑假前挑战赛4】标程
[二分或者STL] 二分: #include<bits/stdc++.h> using namespace std; ; int a[maxn]; int main() { ,pos; s ...
- codevs 3027线段覆盖2
传送门 3027 线段覆盖 2 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 黄金 Gold 题目描述 Description 数轴上有n条线段,线段的两端都是整数坐标, ...
- Java操作系统硬件的方法Unsafe
通常Java代码都是运行在JVM中而不能直接访问系统硬件如进行内存分配释放等,但如果有需要跳过JVM直接用Java访问系统硬件,比如像C语言指针一样操作的话就可以调用Unsafe对象相关方法. 1.U ...
- Mysql源码学习——Thread Manager
一.前言 上篇的Connection Manager中,曾提及对于一个新到来的Connection,服务器会创建一个新的线程来处理这个连接. 其实没那么简单,为了提高系统效率,减少频繁创建线程和中止线 ...
- CF 1009 F Dominant Indices —— 长链剖分+指针
题目:http://codeforces.com/contest/1009/problem/F 也可以用 dsu on tree 的做法,全局记录一个 dep,然后放进堆里,因为字典序要最小,所以再记 ...
- java集合框架之聚合操作stream
参考http://how2j.cn/k/collection/collection-aggregate/702.html#nowhere 聚合操作 JDK8之后,引入了对集合的聚合操作,可以非常容易的 ...
- 计算机图形学DDA画线法+中点画线法+Bresenham画线法
#include <cstdio> #include <cstring> #include <conio.h> #include <graphics.h> ...