input range 模拟滑块
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> HTML5 input元素type=range </title>
<style>
#range{
color:#f69;
}
input[type="range"] {
-webkit-appearance: none;
-webkit-box-shadow: 0 1px 0 0px #424242,
0 1px 0 #060607 inset,
0px 2px 10px 0px black inset,
1px 0px 2px rgba(0, 0, 0, 0.4) inset,
0 0px 1px rgba(0, 0, 0, 0.6) inset;
margin-top: 2px;
background-color: #f69;
border-radius: 15px;
width: 400px;
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
cursor: default;
top: 1px;
cursor: default;
top: 1px;
height: 15px;
width: 100px;
background: none repeat scroll 0 0 #777;
border-radius: 15px;
-webkit-box-shadow: 0 -1px 1px black inset; }
</style>
</head>
<body>
<input id="range" type="range" min="0" max="100" value="0" >
<script type='text/javascript'>
~function(){
var slider = document.getElementById('range')
function gooo(){
alert('gooo')
}
if ('range' == slider.type){
var ov = slider.value
slider.onchange = function(){
var v = this.value|0
if (v < ov) return this.value = ov
var v = this.value|0
if (v < ov) return this.value = ov
ov = v
if (v > 50) {
this.value = ov = 100
gooo()
}
}
}else{
slider.onclick = gooo }
}()
</script>
</body>
</html>
input range 模拟滑块的更多相关文章
- input range样式更改,模拟滑块
input range 样式更改,js模拟滑块实时更新数据. 效果图: html 代码: <div> <span class="slider"></s ...
- 我的Android进阶之旅------>Android中通过adb shell input来模拟滑动、按键、点击事件
今天在维护公司的一个小项目的时候,发现按公司手机的某个物理按键,激活相应的Service后,会在屏幕上模拟的点击了屏幕的某个坐标点.好家伙,原来是之前该项目的版本是按这个物理按键后,会弹出一个对话框, ...
- 使用input range滑块，控制元素transform rotate旋转样式
<!DOCTYPE html> <html> <head> </head> <body> <!-- 第一步:设置div旋转对象和inp ...
- input file 模拟预览图片。
首先申明,接下来内容只是单纯的预览图片,最多选择九张,并没有和后台交互,交互的话需要自己另外写js. 本来想写一个调用摄像头的demo,意外的发现input file 在手机端打开的话,ios可以调用 ...
- input range样式优化
首先HTML代码: <input id="snrPollInterval" type="range" min="1" max=&quo ...
- input range音乐进度条
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- android后台input命令模拟按键【转】
本文转载自:http://www.cnblogs.com/sh1o2os/archive/2013/02/05/2893201.html 有时做开发时,我们使用的触摸屏没有虚拟按键(HOME.BACK ...
- HTML5：使用Canvas和Input range控件放大缩小图片,剪裁，并上传图片
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- input file 模拟
<html> <head> <meta http-equiv="Content-Type" content="text/html; char ...
随机推荐
- 数据库范式1NF 2NF 3NF BCNF(实例）通俗易懂的讲解
[转] 数据库范式1NF 2NF 3NF BCNF(实例)通俗易懂的讲解 本文对大多数初学数据库原理的同学绝对是个大福利,哈哈,完完整整的看完此篇博文一定能够清晰地理解数据库的四大范式. ...
- ASP.net session丢失
ASP.NET Session的实现: asp.net的Session是基于HttpModule技术做的,HttpModule可以在请求被处理之前,对请求进行状态控制,由于Session本身就是用来做 ...
- Fedora 17 无线网卡配置笔记
转载:http://www.psichen.com/fedora-17-wifi/ 安装并更新完F17后,在网络选项中没有出现无线网,需要自己安装无线网卡驱动.而F17中默认网卡名称从以前的”eth0 ...
- Android 中文字体的设置方法和使用技巧
Android TextView字体颜色等样式具体解释连接:http://blog.csdn.net/pcaxb/article/details/47341249 1.使用字体库(自己定义字体的使用) ...
- [IOS]mac远程window全屏显示
在mac自带着一个远程window的软件.这让我们远程起来很方便. 其步骤和window远程也很相似. 输入ip地址: 输入username以及password: 然后点击确定就可以. 只是.这时就出 ...
- Pocket英语语法---五、形式主语是怎么回事
Pocket英语语法---五.形式主语是怎么回事 一.总结 一句话总结:1.to不定式或动名词可以在主语的位置上,但一般用it代替它做形式主语.这种情况it叫形式主语. It's a great ho ...
- python 提取主域名和子域名代码——先根据规则提取，如果有问题，则使用tldextract
import tldextract def extract_domain(domain): suffix = {'.com','.la','.io', '.co', '.cn','.info', '. ...
- linux 内存不足时候 应该及时回收page cache
另一起问题是24G内存的系统,空闲内存已经不到50M 1. 确认该系统的版本是64位 # uname -a Linux gxgd-nms-app 2.6.18-194.el5xen #1 SMP Tu ...
- TCP、HTTP协议的RPC
TCP.HTTP协议的RPC 1.1 基于TCP协议的RPC 1.1.1 RPC名词解释 RPC的全称是Remote Process Call,即远程过程调用,RPC的实现包括客户端和服务端,即服务调 ...
- Javascript四种调用模式中的this指向
第一种:函数直接调用执行的模式 function add(a,b){ console.log(this); return a+b; } add(,) //this===window 这里的this指向 ...