javascript+ajax控制滑块实现滑杆拉动式评论翻页效果
Code
<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>javascript+ajax控制滑块实现评论翻页效果</title><style type="text/css">
#trackBar
{}{ background-color:#666666;
}#trackBar_slider{}{ border:1px solid #808080; background-color:#FFFFFF;}#trackBar2{}{ background-color:#CC0000;}#trackBar2_slider{}{ border:1px solid #808080; background-color:#FFFFFF;}
</style></head><body><div id="trackBar"> </div><div id="info"></div><script type="text/javascript" language="javascript"><!--//对象未创建完成之前，不能在函数之中用thisfunction CTrackBar(trackBarIdStr, min, max, pos){ this.trackBarIdStr = trackBarIdStr; this.sliderIdStr = trackBarIdStr + "_slider"; this.trackBarId = document.getElementById(this.trackBarIdStr); this.sliderId = null; //还未创建 this.min = (min>=0)?min:0; this.max = (max>=min)?max:min; this.pos = (pos>=min && pos<=max)?pos:min; this.orientation = "h"; this.trackBarWidth = 400; this.trackBarHeight = 10 this.sliderWidth = 20; this.sliderHeight = 10; this.Create = Create; //函数 this.draging = false; this.offset = 0; this.BeforeDrag = BeforeDrag; this.OnDrag = OnDrag; this.EndDrag = EndDrag;}function Create(trackBarObjName){ if (this.orientation == "h") { this.trackBarId.innerHTML = "<div id=\"" + this.sliderIdStr + "\"" + " onmousedown=\"javascript:BeforeDrag(" + trackBarObjName + ");\"" + " style=\"position:relative;cursor:hand;\"></div>"; this.sliderId = document.getElementById(this.sliderIdStr); this.sliderId.style.pixelLeft = ((this.trackBarWidth-this.sliderWidth)*this.pos)/(this.max-this.min); } else { this.trackBarId.innerHTML = "<div id=\"" + this.sliderIdStr + "\"" + " onmousedown=\"javascript:BeforeDrag(" + trackBarObjName + ");\"" + " style=\"position:relative;cursor:n-hand;\"></div>"; this.sliderId = document.getElementById(this.sliderIdStr); this.sliderId.style.pixelTop = this.trackBarHeight - ((this.trackBarHeight-this.sliderHeight)*this.pos)/(this.max-this.min) - this.sliderHeight; } this.trackBarId.style.width = this.trackBarWidth; this.trackBarId.style.height = this.trackBarHeight; this.sliderId.style.width = this.sliderWidth; this.sliderId.style.height = this.sliderHeight; return true;}var curTrackBar = null;//准备拖拽function BeforeDrag(trackBar){ if (event.button != 1) { return; } document.body.style.cursor = (this.orientation=="h")?"hand":"hand"; curTrackBar = trackBar; curTrackBar.draging = true; if (curTrackBar.orientation == "h") { curTrackBar.offset = event.clientX - curTrackBar.trackBarId.style.pixelLeft - curTrackBar.sliderId.style.pixelLeft; } else { curTrackBar.offset = curTrackBar.trackBarId.style.pixelTop + curTrackBar.sliderId.style.pixelTop+curTrackBar.sliderId.offsetHeight- event.clientY; }}//拖拽中function OnDrag(){ if(!curTrackBar || !curTrackBar.draging) { return; } event.returnValue = false; var phyPos = 0; if (curTrackBar.orientation == "h") { phyPos = event.clientX - curTrackBar.trackBarId.style.pixelLeft - curTrackBar.offset; if (phyPos <= 0) { phyPos = 0; } else if(phyPos >= (curTrackBar.trackBarId.offsetWidth-curTrackBar.sliderId.offsetWidth)) { phyPos = curTrackBar.trackBarId.offsetWidth - curTrackBar.sliderId.offsetWidth; } } else { phyPos = curTrackBar.trackBarId.style.pixelTop + curTrackBar.trackBarId.offsetHeight - event.clientY - curTrackBar.offset; if (phyPos <= 0) { phyPos = 0; } else if(phyPos >= (curTrackBar.trackBarId.offsetHeight-curTrackBar.sliderId.offsetHeight)) { phyPos = curTrackBar.trackBarId.offsetHeight - curTrackBar.sliderId.offsetHeight; } } if (curTrackBar.orientation == "h") { curTrackBar.sliderId.style.pixelLeft = phyPos; curTrackBar.pos = parseInt(((curTrackBar.max-curTrackBar.min)*phyPos/(curTrackBar.trackBarId.offsetWidth-curTrackBar.sliderId.offsetWidth))); } else { curTrackBar.sliderId.style.pixelTop = curTrackBar.trackBarId.offsetHeight - phyPos - curTrackBar.sliderId.offsetHeight; curTrackBar.pos = parseInt(((curTrackBar.max-curTrackBar.min)*phyPos/(curTrackBar.trackBarId.offsetHeight-curTrackBar.sliderId.offsetHeight))); } OnTrackBarChng();}//结束拖拽function EndDrag(){ if (!curTrackBar) { return; } document.body.style.cursor = "default"; curTrackBar.draging = false;}function OnTrackBarChng(){ document.getElementById("info").innerHTML = curTrackBar.pos+ " / " + curTrackBar.max; document.getElementById("link").innerHTML = "这里可以设置你的ajax request页面参数。例如http://bbs.okajax.com/index.php?page=" + curTrackBar.pos}document.onmousemove = OnDrag;document.onmouseup = EndDrag;var trackBarObj = new CTrackBar("trackBar", 0, 100, 0);trackBarObj.Create("trackBarObj");//--></script><div id=link></div></body></html>
