AjaxUI：滑动条- AJAX技术 - 软晨网（RuanChen.com）

当前位置: 首页 > 图文教程 > 网络编程 > AJAX技术 > AjaxUI：滑动条

技术文章搜索

关键字

AJAX技术中的 AjaxUI：滑动条

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-09-13 浏览: 35 ::

收藏到网摘: n/a

Ajax技术(WEB无刷新提交数据) 用实现ajax读博客rss示例代码

点击运行可以看到效果:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<meta content-type="text/html" charset="gb2312"/>
<style type="text/css">
body{text-align:center;font:12px Arial;}
#bg{width:600px;height:20px;background:#099;margin:auto;padding:3px;text-align:left;}
#drag{width:20px;height:20px;background:#0ff;}
p{width:600px;text-align:left;}
</style>
<script type="text/javascript"> var Parameter; var first=true;
//创建鼠标对象
var Cursor=new Object();
//设置鼠标对象的方法
Cursor.getCrusorCoordinate=function(event){ var event=event || window.event; var x=0; var y=0; if(event.pageX) { x=event.pageX; y=event.pageY; } else { x=event.clientX+document.body.scrollLeft-document.body.clientLeft; y=event.clientY+document.body.scrollTop-document.body.clientTop; } return {x:x,y:y};
}
//创建元素对象
function Element(id)
{ this.obj=document.getElementById(id);
}
Element.prototype={ //获得对象 getElement:function() { if(this.obj!=null||this.obj!=undefined) { return this.obj; } else { return "no such Element"; } }, //获得对象的父节点的id,如果没有则设置一个 getElementParent:function() { if(this.obj!=null||this.obj!=undefined) { var obj=this.obj.parentNode; if(obj!=null||obj!=undefined) { if(obj.id==null||obj.id==undefined) { obj.setAttribute("id",this.obj.id+"_parent"); } return obj.id; } else { return "no such parentNode"; } } else { return "no such ParentNode"; } }, //获得对象的页面坐标 getElementOffset:function() { if(this.obj!=null||this.obj!=undefined) { var left=0; var top=0; var obj=this.obj; while(obj.offsetParent) { left+=obj.offsetLeft; top+=obj.offsetTop; obj=obj.offsetParent; } return{offsetLeft:left,offsetTop:top}; } else { return{offsetLeft:"no such Element",offsetTop:"no such Element"}; } }, //获得对象的自身尺寸 getElementSize:function() { if(this.obj!=null||this.obj!=undefined) { return {width:this.obj.offsetWidth,height:this.obj.offsetHeight} } else { return{width:"no such Element",height:"no such Element"}; } }
}
function startMove(event)
{ var event=event || window.event; var marginLeft=Cursor.getCrusorCoordinate(event).x-Parameter.difX-Parameter.minLeft-Parameter.pL; if(marginLeft<=0) { marginLeft=0; } else if(marginLeft>=Parameter.maxLeft) { marginLeft=Parameter.maxLeft; } Parameter.obj.style.marginLeft=marginLeft+"px";
}
//开始拖动并设置初始参数
function startDrag(event,obj)
{ if(first) { var childElement=obj; var parentElement=new Element(childElement.getElementParent()); var cL=childElement.getElementOffset().offsetLeft; var pL=parentElement.getElementOffset().offsetLeft; var minLeft=cL-pL; var maxLeft=parentElement.getElementSize().width-minLeft-childElement.getElementSize().width; var difX=Cursor.getCrusorCoordinate(event).x-childElement.getElementOffset().offsetLeft; Parameter={obj:childElement.getElement(),pL:pL,minLeft:minLeft,maxLeft:maxLeft,difX:difX}; first=false; } if(document.attachEvent) { document.attachEvent("onmousemove",startMove); } else if(document.addEventListener) { document.addEventListener("mousemove",startMove,false); }
}
function stopDrag()
{ if(document.detachEvent) { document.detachEvent("onmousemove",startMove); } else if(document.removeEventListener) { document.removeEventListener("mousemove",startMove,false); }
}
//设置拖动监听
function dragBind()
{ var element=new Element("drag"); var childElement=element.getElement(); childElement.onmousedown=function(event){startDrag(event,element);}; childElement.onmouseup=function(){stopDrag();};
}
window.onload=dragBind;
</script>
</HEAD>
<BODY>
<div id="bg"><div id="drag" style="margin-left:0px;"></div></div>
滑动条，采用OO的方式来写这段代码,类、对象、方法、感觉很好，有个小bug，当鼠标在滑块外边释放时，无法停止对鼠标移动的监听，将mouseup事件绑定到document即可解决，当然代码要做一些相应的修改。mozilla下定位略微不准。可以纠正，不过就这样吧。
</BODY>
</HTML>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

Ajax技术(WEB无刷新提交数据) 用实现ajax读博客rss示例代码

AJAX技术 中的 AjaxUI：滑动条

评论 (0) All

AJAX技术中的 AjaxUI：滑动条