谁能告诉我用JS如何实现 ;
3个回答
展开全部
使用jQuery中的TrackBar插件可实现这个效果：示例代码（新建一个html，把代码贴上去，这里的js和图片采用网上的链接，使用时下载到本地，然后修改一下链接）：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>TrackBar</title>
<style>
/* Reset */
table.trackbar div, table.trackbar td {margin:0; padding:0;}
table.trackbar {border-collapse:collapse;border-spacing:0;}
table.trackbar img{border:0;}
/* Styles */
table.trackbar {width:250px; margin: 10px 30px; background:repeat-x url(http://www.rurobotics.com/TrackBar/jQuery/imgtrackbar/b_bg_on.gif) top left;}
table.trackbar .l {width:1%; text-align: right; font-size: 1px; background:repeat-x url(http://www.rurobotics.com/TrackBar/jQuery/imgtrackbar/b_bg_off.gif) top left;}
table.trackbar .l div {position:relative; width:0; text-align: right; z-index:500; white-space:nowrap;}
table.trackbar .l div img {cursor:pointer;}
table.trackbar .l div span {position:absolute;top:-12px; right:6px; z-index:1000; font:11px tahoma; color:#000;}
table.trackbar .l div span.limit {text-align:left; position:absolute;top:-12px; right:100%; z-index:100; font:11px tahoma; color:#D0D0D0;}
table.trackbar .r {position:relative; width:1%; text-align: left; font-size: 1px; background:repeat-x url(http://www.rurobotics.com/TrackBar/jQuery/imgtrackbar/b_bg_off.gif) top right; cursor:default;}
table.trackbar .r div {position:relative; width:0; text-align: left; z-index:500; white-space:nowrap;}
table.trackbar .r div img {cursor:pointer;}
table.trackbar .r div span {position:absolute;top:-12px; left:6px; z-index:1000; font:11px tahoma; color:#000;}
table.trackbar .r div span.limit {position:absolute;top:-12px; left:100%; z-index:100; font:11px tahoma; color:#D0D0D0;}
table.trackbar .c {font-size:1px; width:100%;}
</style>
<script type="text/javascript" src="http://www.rurobotics.com/TrackBar/jQuery/jquery-1.2.3.min.js"></script>
<script type="text/javascript" src="http://www.rurobotics.com/TrackBar/jQuery/jquery.trackbar.js"></script>
</head>
<body>
<table width="350px">
<tr><td>Points:</td><td><div id="asd"></div></td><td><input id="Button1" type="button" value="提交"/></td></tr>
</table>
</body>
</html>
<script language="javascript" type="text/javascript">
$(document).ready(function () {
$('#asd').trackbar({
onMove: function () {
},
dual: false, // two intervals
width: 300, // px
leftLimit: 0, // unit of value
leftValue: 50, // unit of value
rightLimit: 100, // unit of value
rightValue: 80, // unit of value
hehe: ":-)"
});
});
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>TrackBar</title>
<style>
/* Reset */
table.trackbar div, table.trackbar td {margin:0; padding:0;}
table.trackbar {border-collapse:collapse;border-spacing:0;}
table.trackbar img{border:0;}
/* Styles */
table.trackbar {width:250px; margin: 10px 30px; background:repeat-x url(http://www.rurobotics.com/TrackBar/jQuery/imgtrackbar/b_bg_on.gif) top left;}
table.trackbar .l {width:1%; text-align: right; font-size: 1px; background:repeat-x url(http://www.rurobotics.com/TrackBar/jQuery/imgtrackbar/b_bg_off.gif) top left;}
table.trackbar .l div {position:relative; width:0; text-align: right; z-index:500; white-space:nowrap;}
table.trackbar .l div img {cursor:pointer;}
table.trackbar .l div span {position:absolute;top:-12px; right:6px; z-index:1000; font:11px tahoma; color:#000;}
table.trackbar .l div span.limit {text-align:left; position:absolute;top:-12px; right:100%; z-index:100; font:11px tahoma; color:#D0D0D0;}
table.trackbar .r {position:relative; width:1%; text-align: left; font-size: 1px; background:repeat-x url(http://www.rurobotics.com/TrackBar/jQuery/imgtrackbar/b_bg_off.gif) top right; cursor:default;}
table.trackbar .r div {position:relative; width:0; text-align: left; z-index:500; white-space:nowrap;}
table.trackbar .r div img {cursor:pointer;}
table.trackbar .r div span {position:absolute;top:-12px; left:6px; z-index:1000; font:11px tahoma; color:#000;}
table.trackbar .r div span.limit {position:absolute;top:-12px; left:100%; z-index:100; font:11px tahoma; color:#D0D0D0;}
table.trackbar .c {font-size:1px; width:100%;}
</style>
<script type="text/javascript" src="http://www.rurobotics.com/TrackBar/jQuery/jquery-1.2.3.min.js"></script>
<script type="text/javascript" src="http://www.rurobotics.com/TrackBar/jQuery/jquery.trackbar.js"></script>
</head>
<body>
<table width="350px">
<tr><td>Points:</td><td><div id="asd"></div></td><td><input id="Button1" type="button" value="提交"/></td></tr>
</table>
</body>
</html>
<script language="javascript" type="text/javascript">
$(document).ready(function () {
$('#asd').trackbar({
onMove: function () {
},
dual: false, // two intervals
width: 300, // px
leftLimit: 0, // unit of value
leftValue: 50, // unit of value
rightLimit: 100, // unit of value
rightValue: 80, // unit of value
hehe: ":-)"
});
});
</script>
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
这是HTML5里面的新东西，一行代码就够了，用js实现，嗯……很难。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
你是要做播放器这样，还是页面加载！ html5不过ie内核的浏览器大多不支持！
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（1）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
