无级滑动条

作者：袖梨 2022-07-02

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title>滑动条--by 快乐笛子</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <script type="text/javascript" src="http://www.happyshow.org/sample/20080429/myJSFrame.js"></script>
  <style type="text/<a href="http://www.111com.net/cssdiv/css.html" target="_blank">css</a>">	
	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.happyshow.org/sample/20080429/slidebar.js"></script>
 </head>

<body>
 <h1>滑动条</h1>
<div class="box">
<a href="https://img.111cn.netpng-1392.gif" class="js-smartPhoto-pc" target="_blank"><img src="https://img.111cn.netpng-1392.gif" style="position:absolute; top:0; right:0" id="tortoise" /></a>
<a href="https://img.111cn.netpng-0047.gif" class="js-smartPhoto-pc" target="_blank"><img src="https://img.111cn.netpng-0047.gif" style="position:absolute; top:0; right:0" id="butterfly" /></a>
<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 />

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

无级滑动条

相关文章

精彩推荐