input range标签用法实例代码
摘要：标签用法实例代码:在HTML5中，又新增许多新控件类型，比较实用的一个就是，以滑竿的方式来调整value值，在这以前需要通过模拟才能够实现，下面就通过代码实例介绍一下它的作用。代码如下:蚂蚁部落 以上代码可以平滑的拖动空间按钮来调整div的宽度，大家可以特别注意下此空间的几个常用属性...
<input type="range">标签用法实例代码:
在HTML5中，又新增许多新<input>控件类型，比较实用的一个就是<input type="range">，以滑竿的方式来调整value值，在这以前需要通过模拟才能够实现，下面就通过代码实例介绍一下它的作用。
代码如下:
以上代码可以平滑的拖动空间按钮来调整div的宽度，大家可以特别注意下此空间的几个常用属性，step用来规定，拖动数据变动的最小跨度，max规定最大值，min规定最小值。还有一个要特别注意的点是:实现此平滑拖动效果最好用onmousemove事件，在各个浏览器表现都是一致的，使用onchange事件在最新的谷歌和火狐浏览器中并不是平滑的。
在HTML5中，又新增许多新<input>控件类型，比较实用的一个就是<input type="range">，以滑竿的方式来调整value值，在这以前需要通过模拟才能够实现，下面就通过代码实例介绍一下它的作用。
代码如下:
html5代码
运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.webkfa.com/" />
<title>web开发</title>
<style type="text/css">
#demo{
width:50px;
height:50px;
background:red;
}
</style>
<script type="text/javascript">
window.onload=function(){
var demo=document.getElementById("demo");
var range=document.getElementById("range");
range.onmousemove=function(){
demo.style.width=this.value+"px";
}
}
</script>
</head>
<body>
<div id="demo"></div>
<input type="range" step="1" max="500" min="10" value="50" id="range"/>
</body>
</html>
相关文章
最新发布
阅读排行
热门文章
猜你喜欢