HTML5中实现滑动条调节div透明度

来源:互联网 发布:飓风营救 知乎 编辑:程序博客网 时间:2024/05/18 16:15

@实现通过调节滑动条来控制div透明度的值,首先是滑动条控件的使用,滑动条值改变的触发事件,获取滑动条的值,改变div透明度的值等。


HTML5滑动条控件

实际上是type=rangeinput标签:

type range:设置滑动条控件

max:滑动条的最大值

min:滑动条的最小值

value:当前的值(开始的默认值)

step:滑动中的增幅,步长

onChange:滑动控件值改变的触发事件,触发后面的函数,里面的参数this.value可以传入这个控件的当前值


div的透明度设置

div的透明度属性为opacity:

#bg{height:300px;width:500px;background-color:#60F;opacity:0.5;}


动态控制div透明度

var bg = document.getElementByIdx_x('bg');function changeBg(value){bg.innerHTML= value.toString();bg.style.opacity = value;}




1 0
原创粉丝点击