Posted on 2008-09-15 01:02
G_G 閱讀(434)
評論(0) 編輯 收藏 所屬分類:
javascript
直接 運行 div_show_drag.rar
http://www.tkk7.com/Files/Good-Game/div_Show_drag.rarhtml test
<html>
<head>
<script?type="text/javascript"?src="showDivUtil.js"></script>
</head>
<body>
<input?type="button"?id="_in"?value="google-baidu"?onclick="test();"/>
<div?id='_div'?/>
<script?language="javascript">
/*api說明
????ShowDiv（?源element?,?是否使用現有?div?)
????????源element,是否使用現有?div?都可為null?;
*/
var?ediv?=?new?ShowDiv('_in',null);
function?test(){
????if(?!?ediv.isShow?){
????????// tdiv［X,Y,H,W］準備展現div set->tdiv.X = ..? ? ,
??????? // tsubEle［X,Y,H,W］
??????? // 源ele大小位置??,tscreen［screenH,screenW］屏幕長寬
????????ediv.setLocation?=?function(tdiv,tsubEle,tscreen){
????????????/*??居中展現
?????????????tdiv.W?=200?;
?????????????tdiv.H?=?300?;
?????????????tdiv.X?=?tscreen.screenW/2-tdiv.W/2?;
?????????????tdiv.Y?=?tscreen.screenH/2-tdiv.H/2?;
????????????*/
?????????????/*??根據?tsubEle?位置?左顯示
????????????tdiv.X?=?tsubEle.X+tsubEle.W?;
????????????tdiv.Y?=?tsubEle.Y?;
?????????????*/
??????????????/*??根據?tsubEle?大小??左長條?顯示?
?????????????tdiv.X?=?tsubEle.X+tsubEle.W?;
?????????????tdiv.Y?=?tsubEle.Y?;
?????????????*/
????????????
????????
??????????????/*??根據?tsubEle?大小??下長條?顯示
?????????????tdiv.X?=?tsubEle.X+tsubEle.W?;
?????????????tdiv.Y?=?tsubEle.Y?;
?????????????tdiv.H?=?200?;
?????????????tdiv.W?=?tsubEle.W?;
?????????????*/
????????????
????????????/*??
..?等等?自己嘗試吧*/
????????????tdiv.innerHTML?=?"<li>google</li><li>baidu</li>"?;
????????????//可以參考?
????????????Drag.init(tdiv);
????????}????
????????ediv.setStyle('background-color:#F4F4F4;');
????????ediv.show();
????}else{
????????ediv.close();
????????//ediv.delete();
????}
}
</script>
</body>
</html>
showDivUtil.js
/*
* Skynet
*? 2008-9-15 00:56
*?? liukaiyi@gmail.com
*/
function?ShowDiv(subEle,ediv){
????//public?
????this.style??;
????this.isShow?=?false?;
????//private?
????this._div??;
????this._subEle??;
????this._subEle??;
????????if(?typeof?ediv?==?"undefined"?||?ediv?==?null)?
????????????this._div=document.createElement("div");
????????else?if(?typeof?ediv?==?"string")?
????????????this._div=document.getElementById(ediv);????
????????else?if(??/object/.test(typeof?ediv)?)
????????????this._div=?ediv?;
????????
????????if(?typeof?subEle?==?"string")?
????????????this._subEle=document.getElementById(subEle);????
????????else?if(??/object/.test(typeof?subEle)?)
????????????this._subEle=?subEle?;
}
????//外置方法?x?,?y?,w?,?h?,?div
????ShowDiv.prototype.setLocation?=?new?Function()?;
????//設置?div?樣式
????ShowDiv.prototype.setStyle=function(styleStrOrObj){
????????this.style=this._div.style?;
????????if(?typeof?styleStrOrObj?==?"string"){
????????????var?strs?=?styleStrOrObj.split(/;/)?;
????????????for(var?i=0;i<strs.length;i++){
????????????????var?key?=?strs[i].split(/:/)[0];
????????????????var?value?=?strs[i].split(/:/)[1];
????????????????var?_s?=?key.indexOf("-")?;
????????????????if(?_s>0)?
????????????????????key=key.substring(0,_s)+key.substring(_s+1,_s+2).toLocaleUpperCase()+key.substring(_s+2,key.length);
????????????????if(?key!=null&&key!=''&&key!='?'?){
????????????????????eval(?'this._div.style.'+key+'="'+value+'"'?);
????????????????}
????????????}
????????}else?if(??/object/.test(typeof?styleStrOrObj)?)?{
????????????this._div.style?=?styleStrOrObj?;
????????}
????????if(this._div.style.position==null?||?this._div.style.position=="")
????????????this._div.style.position="absolute";
????}
????
????ShowDiv.prototype.show=function(){
????????if(?typeof?this._subEle?!=?"undefined"?||?this._subEle?!=?null){
????????????this._subEle.Y?=?getElementPos(this._subEle).y;
????????????this._subEle.X?=?getElementPos(this._subEle).x?;
????????????this._subEle.W?=?this._subEle.offsetWidth?;
????????????this._subEle.H?=?this._subEle.offsetHeight?;
????????}
????????//this._div.Y?=?sset
????????//this._div.X?=?sset
????????this._div.W?=?parseInt(?this._div.style.width?);
????????this._div.H?=?parseInt(?this._div.style.height?);
????????
????????this.setLocation(this._div,this._subEle,{screenW:document.body.clientWidth,screenH:document.body.clientHeight});
????????this._div.style.left?=?this._div.X??;
????????this._div.style.top?=?this._div.Y?;
????????
????????if(?this._div.W?&&?this._div.H?){
????????????this._div.style.width?=?this._div.W?;
????????????this._div.style.height?=?this._div.H?;
????????}
????????document.body.appendChild(this._div);
????????this.isShow?=?true?;
????}
????ShowDiv.prototype.close=function(){
????????document.body.removeChild(this._div);?
????????this.isShow?=?false?;
????}
?????ShowDiv.prototype.delete=function(){
????????document.body.removeChild(this._div);?
????????this._div?=?null?;
????????this.isShow?=?false?;
????}
?
//得到 Element 位置
//?說明：用?Javascript?獲取指定頁面元素的位置
//?整理：http://www.codebit.cn
//?來源：YUI?DOM
function?getElementPos(el)?{
????var?ua?=?navigator.userAgent.toLowerCase();
????var?isOpera?=?(ua.indexOf('opera')?!=?-1);
????var?isIE?=?(ua.indexOf('msie')?!=?-1?&&?!isOpera);?//?not?opera?spoof
????if(el.parentNode?===?null?||?el.style.display?==?'none'){
????????return?false;
????}
????var?parent?=?null;
????var?pos?=?[];
????var?box;
????if(el.getBoundingClientRect){
????//?IE?
????????box?=?el.getBoundingClientRect();
????????var?scrollTop?=?Math.max(document.documentElement.scrollTop,?document.body.scrollTop);
????????var?scrollLeft?=?Math.max(document.documentElement.scrollLeft,?document.body.scrollLeft);
????????return?{x:box.left?+?scrollLeft,?y:box.top?+?scrollTop};
????}else?if(document.getBoxObjectFor){
?????//?gecko
????????box?=?document.getBoxObjectFor(el);
????????var?borderLeft?=?(el.style.borderLeftWidth)?parseInt(el.style.borderLeftWidth):0;
????????var?borderTop?=?(el.style.borderTopWidth)?parseInt(el.style.borderTopWidth):0;
????????pos?=?[box.x?-?borderLeft,?box.y?-?borderTop];
????}else?{
?????//?safari?&?opera
????????pos?=?[el.offsetLeft,?el.offsetTop];
????????parent?=?el.offsetParent;
????????if?(parent?!=?el)?{
????????????while?(parent)?{
????????????????pos[0]?+=?parent.offsetLeft;
????????????????pos[1]?+=?parent.offsetTop;
????????????????parent?=?parent.offsetParent;
????????????}
????????}
?????????if?(ua.indexOf('opera')?!=?-1||?(?ua.indexOf('safari')?!=?-1?&&?el.style.position?==?'absolute'?)){
????????????pos[0]?-=?document.body.offsetLeft;
????????????pos[1]?-=?document.body.offsetTop;
????????}
????}
?
????if?(el.parentNode)?{?parent?=?el.parentNode;?}
????else?{?parent?=?null;?}
?
?
????//?account?for?any?scrolled?ancestors
?????while?(parent?&&?parent.tagName?!=?'BODY'?&&?parent.tagName?!=?'HTML'){?????
????????pos[0]?-=?parent.scrollLeft;
????????pos[1]?-=?parent.scrollTop;
????????if?(parent.parentNode)?{?parent?=?parent.parentNode;?}
????????else?{?parent?=?null;?}
????}
????return?{x:pos[0],?y:pos[1]};
}?