<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>孔国安qq158520812</title>
</head>
<style>
.silderF{ width:500px; height:10px; background-image:url(1.gif)}
.silderC{ background-image:url(2.gif); background-repeat:no-repeat;position:absolute;}
</style>
<script>
var clipx;//鼠标相对于目标的举例
var silderC;//拖拽对象
var silderF;//父亲对象
var maxsilderLeft;//对大x值
var minsilderLeft;//最小x值
var isinit=false;//是否初始化控件
var maxcont;//记录数
var valuec;//显示值的地方
function $(id){
return document.getElementById(id);
}
//初始话拖动条
//id为要实现滑动条控件的Id
//iniFcss是拖动底部的css样式
//iniCcss是拖动的css样式
//cMole拖动条所占拖动背景的份额
//count拖动长度代表的份额
//initCount初始话拖动条位置
//valuec存放value的Id值
function initbar(id,iniFcss,iniCcss,cMole,count,initCount,valueid){
maxcont=count;
var cBeginx=0;
if(initCount){
cBeginx=initCount/maxcont
}
createSlide(id,iniFcss,iniCcss,cMole,cBeginx,maxcont,valueid);
}
//cBeginx拖动条最开始的位置份额
function createSlide(id,iniFcss,iniCcss,cMole,cBeginx,maxcont,valueid){
silderC=null;
silderF=null;
silderF=document.createElement("DIV");
silderF.className=iniFcss;//滑块的父亲页面
silderC=document.createElement("DIV");//滑块
silderC.title=valueid;
silderF.appendChild(silderC);
$(id).appendChild(silderF);
silderC.className=iniCcss;
silderC.style.height=silderF.offsetHeight+"px";
maxsilderLeft=silderF.offsetWidth;
minsilderLeft=leftPosition(silderF);
maxsilderLeft+=minsilderLeft;
silderC.style.width=maxsilderLeft/cMole+"px";
if(cBeginx!=0){
silderC.style.left=minsilderLeft+(silderF.offsetWidth-silderC.offsetWidth)*(cBeginx)
}
silderC.onmousedown=dragready//准备拖拽
}
function dragready(d){//准备拖拽
var e;
var objLeft;//目标对象的左距离
var x;//鼠标对象的x位置
var y;//鼠标对象的y位置
if(!d){
e=window.event;
}else{
e=d;
}
obj=(e.target)?e.target:e.srcElement;
silderC=obj
silderF=obj.parentNode
if (e.pageX)
{
x=e.pageX;
y=e.pageY;
}else if(e.clientX){
x=e.clientX;
y=e.clientY;
}
silderCLeft=leftPosition(silderC);
clipx=x-silderCLeft;
silderF.onmousemove=move;
silderC.onmouseup=drop;
}
function move(e){//移动中
if (!e)
{
e=window.event;
}
if (e.pageX)
{
x=e.pageX;
y=e.pageY;
}else if(e.clientX){
x=e.clientX;
y=e.clientY;
}
if (silderC)
{ var clil=x-clipx
var temp=clil+silderC.offsetWidth;
if(clil>=minsilderLeft&&temp<=maxsilderLeft){
silderC.style.left=(clil)+'px';
var tempint=parseInt(maxcont*((clil-minsilderLeft)/(maxsilderLeft-silderC.offsetWidth- minsilderLeft)));
$(silderC.title).value=tempint;
}else{
silderF.onmousemove="";
silderF.style.cursor="";
}
}
}
function drop(){
silderF.onmousemove="";
silderC.style.cursor="";
}
function leftPosition(target) {
var left = 0;
if(target.offsetParent) {
while(1) {
left += target.offsetLeft;
if(!target.offsetParent) {
break;
}
target = target.offsetParent;
}
} else if(target.x) {
left += target.x;
}
return left;
}
function test(){
initbar("f","silderF","silderC",50,552,100,"fv")
initbar("f","silderF","silderC",50,552,100,"fa")
initbar("f","silderF","silderC",50,552,100,"fc")
//initbar('e')
//initbar('g')
}
</script>
<body onLoad="test()">
<DIV ID="f" ></DIV>
<div id="d" title="jj">0</div>
<DIV ID="e" > </DIV>
<DIV ID="g" ></DIV>
<input name="text" id="fv" name="fv">
<input name="text" id="fa" name="fa">
<input name="text" id="fc" name="fc">
</body>
</html>
- 1
- 2
前往页