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

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

AJAX技术: 一个简单的ASP+AJAX留言本源码下载; IE7下ajax之open Method New的说明; ASP+Ajax实现无刷新评论简单例子; AJAX的阻塞及跨域名解析; [js]一个获取页面ip的正则; AJAX乱码解决新方法; 也写一个Ajax.Request类附代码; AJAX简历系统附js文件; Ajax留言本源码提供下载了; 找到一款不错的基于AJAX留言板源码(PHP版、ASP版)提供下载了; Ajax 学习资源中外都有; 本人ajax留言板的源程序不错的应用js; xmlhttp 乱码比较完整的解决方法 (UTF8,GB2312 编码解码); AJAX集天气\IP\多国语言翻译MP3(可同步LRC歌词显示)\万年历查询通; AJAX缓存问题的两种解决方法(IE); AJAX 常用函数创建XMLHTTP对象，区别IE，Mozilla浏览器; Ajax的小贴士使用小结; 用ajax动态加载需要的js文件; XMLHTTP多浏览器兼容性写法; PJBLOG中用到的ajaxjs.几个简单的函数

No. « ‹ 4 5 6 7 › »

技术文章搜索

关键字

AJAX技术中的 AjaxUI：滑动条

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

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