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 ...
随机推荐
- python把字典写入excel之一例
直接上代码: # -*- coding: utf-8 -*- import xlsxwriter #生成excel文件 def generate_excel(expenses): workbook = ...
- codeforces 463B Caisa and Pylons 解题报告
题目链接:http://codeforces.com/problemset/problem/463/B 题目意思:Caisa 站在 0 pylon 并且只有 0 energy,他需要依次跳过1 pyl ...
- Memory Notification: Library Cache Object loaded into SGA
问题现象: 数据库服务器可以ping通,但SSH连接不了:应用.plsqldeveloper 也都连接不了.事情到了这个地步,只能重启服务器. 服务器环境:oracle10.2.0.1 +rhel5. ...
- the art of seo(chapter one)
preface:Andy Johns (@ibringtraffic):growth strategist@Wealthfront ***1.Search Reflecting Consciousne ...
- 限制远程桌面登录IP的方法
转自:http://www.cnblogs.com/vaexi/articles/2106623.html 限制远程桌面登录IP的方法 第一种方法: 1.打开Windows自带的防火墙2.开放允许例外 ...
- 使用Oracle数据库实现树形结构表的子-父级迭代（递归）查询和删除，通过级联菜单简单举例
前言: 我们在开发中,常常遇到单表的子-父id级联的表结构,在树形的深度不确定的情况下,一次查询出某个树形结构下的所有具有子-父级关系的数据变得十分困难. 这时,我们使用oracle提供的CONNEC ...
- vue全局配置
Vue.config 是一个对象,包含Vue的全局配置.可以在启动应用之前修改下列的属性: Vue.config.slient=true; 取消Vue所有的日志与警告 默认值false ...
- Redis的小白应用
在window下测试学习redis 步骤: 1.先下载安装 redis,(conf文件制定配置文件(redis-server.exe redis.conf ),若不指定则默认), 基本上我是直接点击 ...
- ubuntu下使用锐捷校园网
前言 以下内容是个人学习之后的感悟,转载请注明出处~ 1.首先下载锐捷Linux版本,然后解压缩后,有个rjsupplicant.sh这个脚本文件,于是按照README做了,终端中 ...
- Levko and Array
题意: 有一长度为n的正整数序列,你可以选择K个数字任意改变它,使得$max \{ a(i+1) - a(i) \} $ 最小,求最小值. 解法: 1.$O(n^2log(MAX_A) )$,考虑二分 ...