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 ...
随机推荐
- POJ1236 Network of Schools (强连通分量，注意边界)
A number of schools are connected to a computer network. Agreements have been developed among those ...
- MongoDB复制集相关方法使用（五）
这里我们把复制集中可用的方法都实验一遍,帮助我们更好地来理解复制集.提前说明这些方法的使用是基于Mongodb3.2版本来的,看这篇文章之前需要先看上一篇文章. 介绍一下复制集可用的相关方法 rs.h ...
- 深度学习网络结构中超参数momentum了解
训练网络时,通常先对网络的初始权值按照某种分布进行初始化,如:高斯分布.初始化权值操作对最终网络的性能影响比较大,合适的网络初始权值能够使得损失函数在训练过程中的收敛速度更快,从而获得更好的优化结果. ...
- 51nod 1327 棋盘游戏——延迟决策的dp
题目:http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1327 因为一列填1个或0个(或0个!!!),而一行不知填多少个,所 ...
- Flutter实战视频-移动电商-37.路由_Fluro引入和商品详细页建立
37.路由_Fluro引入和商品详细页建立 https://github.com/theyakka/fluro pages/details_page.dart新建页面 使用路由 先添加路由插件的引用 ...
- Laravel中使用模型对数据进行操作
public function orm(){ //查询表的所有记录 //$user = Admin::all(); //dd($user); //查询某一条记录 //$user = Admin::fi ...
- android系统的源代码获取(亲测可用)
1.在线阅读各版本源代码: http://androidxref.com/ 2.下载到本地: http://blog.csdn.net/yin1031468524/article/details/55 ...
- laravel M层
目录 App\Models 没有就自己创一个 创建对应控制器的php文件,首字母大写 <?php namespace App\Models; use Illuminate\Database\ ...
- 洛谷P3723 [AH2017/HNOI2017]礼物（FFT）
传送门 首先,两个数同时增加自然数值相当于只有其中一个数增加(此增加量可以小于0) 我们令$x$为当前的增加量,${a},{b}$分别为旋转后的两个数列,那么$$ans=\sum_{i=1}^n(a_ ...
- RobotFramework特性总结
robotframework是一款python编写的功能自动化测试框架.具备良好的可扩展性,支持关键字驱动,可以同时编写多种类型的客户端或者接口,可以进行分布式测试执行.主要用户轮次很多的验收测试和验 ...