HTML5中＂range＂标签用法实例代码_HTML5+CSS3教程

导读：在HTML5中，又新增许多新<input>控件类型，比较实用的一个就是<input type="range">，以滑竿的方式来调整value值，在这以前需要通过模拟才...

在HTML5中，又新增许多新<input>控件类型，比较实用的一个就是<input type="range">，以滑竿的方式来调整value值，在这以前需要通过模拟才能够实现，下面就通过代码实例介绍一下它的作用。

代码如下:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></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>

以上代码可以平滑的拖动空间按钮来调整div的宽度，大家可以特别注意下此空间的几个常用属性，step用来规定，拖动数据变动的最小跨度，max规定最大值，min规定最小值。还有一个要特别注意的点是:实现此平滑拖动效果最好用onmousemove事件，在各个浏览器表现都是一致的，使用onchange事件在最新的谷歌和火狐浏览器中并不是平滑的。

全站搜索

HTML5中 ＂range＂标签用法实例代码

最新推荐

本周排行

HTML5中＂range＂标签用法实例代码