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

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

AJAX技术: 通过PHP和Sajax使用Ajax之JavaScript; 更正用AJAX实现IE TREE无刷新取值的方法; 基于PHP和AJAX创建RSS聚合器; 用 PHPRPC 实现 Ajax 级联下拉菜单; Ajax & XMLHttpRequset; Ajax简单客户登陆验证; AJAX之xmlHttp; 漫谈Ajax在.Net中的使用; 一個Ajax.NET的查詢實例; 使用AJAX技术打造博客无刷新搜索引擎; AJAX、AJAX实例及AJAX源代码（asp）; 利用Ajax传递Xml文档; 利用PHP＋JavaScript打造AJAX搜索窗; Ajax无刷新实现图片切换特效; 迁移你的Web页面到ASP.NET AJAX 1.0; 初步了解 ASP.NET AJAX 扩展; Ajax程序中,自己实现页面前进、后退、与标签功能; 在虚拟主机上部署ASP.NET AJAX 1.0 Beta的程序集; asp.net ajax 1.0,hello world程序; asp.net ajax学习系列功能强大的UpdatePanel控件

No. « ‹ 14 15 16 17 › »

技术文章搜索

关键字

AJAX技术中的 AjaxUI：滑动条

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

收藏到网摘: 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：滑动条