本文介绍了HTML5中利用type='range'属性创建滑块功能，并通过JavaScript和jQuery实现滑块动画，包括开始、停止控制及实时显示滑块值。示例代码展示了如何在用户点击播放和停止按钮时控制滑块的自动滑动。
html5实现滑块功能之------type="range"属性
1.html5中添加了关于滑块的标签,其实际是扩展了input标签,type属性值为range。
2.感觉挺有意思,就做了一个关于滑块的动画的例子，可以通过开始和结束按钮来控制滑块的滑动和停止，有点类似视频的自动播放和暂停,同时还时时显示了该滑块的值。
3.具体代码如下所示
<!DOCTYPE html>
<html>
<head>
<title>数字递增组件</title>
<!--引入jquery-->
<script type="text/javascript" src="jquery-1.8.3.js"></script>
</head>
<body>
<!--做一个播放控件-->
<div id="movie">
<!--定义滑块组件-->
<input type="range" id="slider" min="0" max="1000" step="1" value="0" οnchange="print()" />
<!--显示滑块组件的当前值-->
2.感觉挺有意思,就做了一个关于滑块的动画的例子，可以通过开始和结束按钮来控制滑块的滑动和停止，有点类似视频的自动播放和暂停,同时还时时显示了该滑块的值。
3.具体代码如下所示
<!DOCTYPE html>
<html>
<head>
<title>数字递增组件</title>
<!--引入jquery-->
<script type="text/javascript" src="jquery-1.8.3.js"></script>
</head>
<body>
<!--做一个播放控件-->
<div id="movie">
<!--定义滑块组件-->
<input type="range" id="slider" min="0" max="1000" step="1" value="0" οnchange="print()" />
<!--显示滑块组件的当前值-->
最低0.47元/天 解锁文章
扫一扫
1926
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
