无级滑动条

时间：2022-07-02 14:17:12 编辑：袖梨来源：一聚教程网

YPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.***w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

提示：您可以先修改部分代码再运行

<title>滑动条--by 快乐笛子</title>
  <script type="text/javascript" src="http://www.*hap*p*yshow.org/sample/20080429/myJSFrame.js"></script>
  <style type="text/<a href=" http: target="_blank">css">	
	body {font-size:14px}
	.box { padding:10px}
	.slidebox {   overflow:hidden; position:relative;}
	.lineBox { padding:0 6px;}
	.slidebox .line {background:url(bg.gif) repeat-x left bottom; width:100%;  cursor:pointer}
	.slidebox .cursor { position:absolute; z-index:20; top:0px; left:0px;    overflow:hidden; background:url(cursor.gif) no-repeat; cursor:pointer; filter:alpha(opacity=90); opacity:0.9}
  </style>
  <script type="text/javascript" src="http://www.h*app*ysh*ow.org/sample/20080429/slidebar.js"></script>

<table border="0" cellpadding="5">
<tr>
<td>
	<script type="text/javascript">
		var t = new SlideBar();	
		t.maxValue = "1";
		t.onmoving = function(){
			$("abc").value = this.title = this.value;
			$("tortoise").style.top = ((Math.cos(this.value*30)*40)+150) + "px";
			$("tortoise").style.right = 0.8*w*this.value + "px";
		};
		t.onend = function(){$("acc").innerHTML = this.value;}
		t.write();
	</script>
	
	<br>

<input type="text" id="abc" size="4" style="padding:2px">
<input type="button" value="getValue" onclick="alert(SlideBar.getValue(SlideBar.List[0]))">
<input type="button" value="setValue" onclick="SlideBar.setValue(SlideBar.List[0],0.36)">
<br>
结果的值=<span id="acc"></span>
</td>
<td>
	<script type="text/javascript">
		var h = document.documentElement.clientHeight;
		var w = document.documentElement.clientWidth;
		var y = new SlideBar();		
		y.maxValue = "1";
		y.defaultValue = "0.3";
		y.id="cai";
		y.onmoving = function(){		
			$("def").value = this.title = this.value;
			$("butterfly").style.top = h*this.value + "px";
			$("butterfly").style.left = (Math.cos(this.value*40)*40+200) + "px";
		};
		y.onend = function(){$("info2").innerHTML = this.value;}
		y.write();
	</script>
	
	<br>

提示：您可以先修改部分代码再运行

推荐专题

最新下载

热门教程

无级滑动条

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程