码迷,mamicode.com
首页 > 其他好文 > 详细

<input type="range">标签用法实例代码

时间:2015-07-20 15:44:26      阅读:112      评论:0      收藏:0      [点我收藏+]

标签:

<input type="range">标签用法实例代码:

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

代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.51texiao.cn/" />
<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事件在最新的谷歌和火狐浏览器中并不是平滑的。

原文地址是:http://www.51texiao.cn/HTML5jiaocheng/2015/0613/4141.html

最原始地址是:http://www.softwhy.com/

<input type="range">标签用法实例代码

标签:

原文地址:http://www.cnblogs.com/nulifendou/p/4661289.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!