页面导航：首页 → 网络编程 → AJAX相关 → 正文内容 js 拖动效果

javascript 拖动_cookie_ajax等

发布：dxy 字体：[增加减小] 类型：转载

比较实用的js拖动效果代码。类的写法不错，是个不错的应用

点击运行可以看到效果:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>新版本网站--lib类函数功能应用DEMO演示</title> 
<script language="javascript" type="text/javascript"> 
<!-- 
Com=window.Com||{}; 
Com.Common={ 
    isIE6:function(){return navigator.userAgent.search('MSIE')>0&&navigator.userAgent.search('6')>0;}, 
    isIE:function(){return navigator.userAgent.search('MSIE')>0;}, 
    isOpera:function(){return navigator.userAgent.indexOf('Opera')>-1;}, 
    isMoz:function(){return navigator.userAgent.indexOf('Mozilla/5.')>-1;}, 
     
    LTrim:function(i){return i.replace(/^\s*/,"");}, 
  RTrim:function(i){return i.replace(/\s*$/,"");}, 
  Trim:function(i){return this.rTrim(this.lTrim(i));}, 
   
  $:function(i){ 
       if(!document.getElementById)return false; 
       if(typeof i==="string"){ 
          if(document.getElementById && document.getElementById(i)) {// W3C DOM 
                  return document.getElementById(i); 
               } 
               else if (document.all && document.all(i)) {// MSIE 4 DOM 
                  return document.all(i); 
               } 
               else if (document.layers && document.layers[i]) {// NN 4 DOM.. note: this won't find nested layers 
                  return document.layers[i]; 
               }  
               else { 
                 return false; 
               } 
       } 
       else{return i;} 
  }, 
   
  getElByClassName:function(tag,name,size,el){ 
       var el=(el)?el:document; 
       var itm=el.getElementsByTagName(tag); 
       var num=1; 
        
       for(i=0;i<itm.length;i++){ 
          if(itm[i].className===name&&size===num){ 
              return itm[i]; 
          } 
          else if(itm[i].className===name){ 
              num++; 
          } 
       } 
       return false; 
  }, 
    
  insertAfter:function(newElement,targetElement){ 
          var parent = targetElement.parentNode; 
          if(parent.lastChild == targetElement){ 
               parent.appendChild(newElement); 
          } 
          else{ 
               parent.insertBefore(newElement,targetElement.nextSibling); 
          } 
    }, 
     
    liveClock:function(){ 
           // Set the text to display before the clock: 
           var mypre_text = "当前时间：";

// Display the time in 24 or 12 hour time? 
           // 0 = 24, 1 = 12 
           var my12_hour = 1;

// How often do you want the clock updated? 
           // 0 = Never, 1 = Every Second, 2 = Every Minute 
           // If you pick 0 or 2, the seconds will not be displayed 
           var myupdate = 1;

// Display the date? 
           // 0 = No, 1 = Yes 
           var DisplayDate = 1;

// Global varibale definitions: 
           var dn="";

// The following arrays contain data which is used in the clock's 
           // date function. Feel free to change values for Days and Months 
           // if needed (if you wanted abbreviated names for example). 
           var DaysOfWeek = new Array(7); 
           DaysOfWeek[0] = "星期日"; 
           DaysOfWeek[1] = "星期一"; 
           DaysOfWeek[2] = "星期二"; 
           DaysOfWeek[3] = "星期三"; 
           DaysOfWeek[4] = "星期四"; 
           DaysOfWeek[5] = "星期五"; 
           DaysOfWeek[6] = "星期六";

var MonthsOfYear = new Array(12); 
           MonthsOfYear[0] = "1"; 
           MonthsOfYear[1] = "2"; 
           MonthsOfYear[2] = "3"; 
           MonthsOfYear[3] = "4"; 
           MonthsOfYear[4] = "5"; 
           MonthsOfYear[5] = "6"; 
           MonthsOfYear[6] = "7"; 
           MonthsOfYear[7] = "8"; 
           MonthsOfYear[8] = "9"; 
           MonthsOfYear[9] = "10"; 
           MonthsOfYear[10] = "11"; 
           MonthsOfYear[11] = "12";

// This array controls how often the clock is updated, 
           // based on your selection in the configuration. 
           var ClockUpdate = new Array(3); 
           ClockUpdate[0] = 0; 
           ClockUpdate[1] = 1000; 
           ClockUpdate[2] = 60000;

// Get all our date variables: 
          var Digital = new Date(); 
          var year = Digital.getYear(); 
          var day = Digital.getDay(); 
          var mday = Digital.getDate(); 
          var month = Digital.getMonth(); 
          var hours = Digital.getHours();

var minutes = Digital.getMinutes(); 
          var seconds = Digital.getSeconds();

// Set up the hours for either 24 or 12 hour display: 
          if(my12_hour){ 
           dn = "AM"; 
           if (hours > 12) { dn = "PM"; hours = hours - 12; } 
           if (hours == 0) { hours = 12; } 
          }  
          else{ 
           dn = ""; 
          }

if (minutes <= 9) { minutes = "0"+minutes; } 
          if (seconds <= 9) { seconds = "0"+seconds; } 
          if (year < 1000) {year += 1900; }

// This is the actual HTML of the clock. If you're going to play around 
          // with this, be careful to keep all your quotations in tact. 
          myclock = ''; 
          myclock += mypre_text; 
          myclock += hours+':'+minutes;

if ((myupdate < 2) || (myupdate == 0)) { myclock += ':'+seconds; } 
          myclock += ' '+dn;

if (DisplayDate){ myclock += ' ' + year + '年' + MonthsOfYear[month] + '月'+mday+'日' + ' ' + DaysOfWeek[day]; }

if(!this.$("datetime")) return false; 
          this.$("datetime").innerHTML = myclock;

if(myupdate != 0){  
             setTimeout("Com.Common.liveClock('datetime')",ClockUpdate[myupdate]);  
          } 
    }, 
     
    popNew:function(url,title,width,height){ 
         var w = 1024; 
         var h = 768;

if (document.all || document.layers){ 
               w = screen.availWidth; 
               h = screen.availHeight; 
         }

var leftPos = (w/2-width/2); 
         var topPos = (h/2.3-height/2.3);

yPos:function(element){ 
     var positionY = 0; 
     while(element != null){ 
       positionY += element.offsetTop; 
       element = element.offsetParent; 
     } 
     return positionY; 
  }, 
   
  addClass:function(element,value){ 
         if(!element.className){ 
               element.className = value; 
         } 
         else{ 
               var newClassName = element.className; 
               newClassName += " "; 
               newClassName += value; 
               element.className = newClassName; 
         } 
    }, 
     
    styleElementsSiblings:function(tag,theClass){ 
         if(!document.getElementsByTagName) return false; 
         var elems = document.getElementsByTagName(tag); 
          
         for(var i=0;i<elems.length;i++){ 
               var elem = elems[i]; 
               this.addClass(elem,theClass); 
         } 
    }, 
     
    stripeTables:function(clsName){ 
         if(!document.getElementsByTagName) return false; 
         var tables = document.getElementsByTagName("table"); 
          
         for(var i=0;i<tables.length;i++){ 
              var odd = false; 
              var rows = tables[i].getElementsByTagName("tr"); 
               
              for(var j=0;j<rows.length;j++){ 
                   if(odd == true){ 
                        this.addClass(rows[j],clsName); 
                        odd = false; 
                   } 
                   else{ 
                       odd = true; 
                   } 
              } 
         } 
    }, 
     
    highLightRows:function(clsName,tag){ 
         if(!document.getElementsByTagName) return false; 
         var rows = document.getElementsByTagName(tag); 
          
         for(var i=0;i<rows.length;i++){ 
              rows[i].oldClassName = rows[i].className; 
       
              rows[i].onmouseover = function(){ 
                   Com.Common.addClass(this,clsName); 
              } 
       
              rows[i].onmouseout = function(){ 
                   this.className = this.oldClassName; 
              } 
         } 
    } 
};

Com.Cookie={ 
    setCookie:function(cn,cv,d,dm){ 
        var now=new Date(); 
        var expire=new Date(); 
        if(d==null||d==0)d=1; 
          
        expire.setTime(now.getTime()+3600000*24*d); 
        document.cookie=cn+"="+escape(cv)+";expires="+expire.toGMTString()+";domain="+dm+"; path=/"; 
    }, 
      
    deleteCookie:function(cn,dm){ 
        if(this.getCookie(name)){ 
             document.cookie=cn+"="+((domain)?"; domain="+dm:"")+"; expires=Thu, 01-Jan-70 00:00:01 GMT"; 
        } 
    }, 
      
    getCookie:function(cn){ 
        var dc=document.cookie; 
        var prefix=cn+"="; 
        var begin=dc.indexOf("; "+prefix); 
          
        if(begin==-1){ 
           begin=dc.indexOf(prefix); 
           if(begin!=0)return null; 
        } 
         else{ 
            begin+=2; 
         } 
           
         var end=document.cookie.indexOf(";",begin);           
         if(end==-1){end=dc.length;}         
         return unescape(dc.substring(begin+prefix.length,end)); 
    }  
};

Com.StringBuffer={ 
    _strings_:new Array, 
   
  Append:function(str){ 
      this._strings_.push(str); 
    }, 
    
    toString:function(){ 
     return this._strings_.join(""); 
    } 
};

Com.Event={ 
  addEvent:function(obj,evType,fn){ 
    if(obj.addEventListener){ 
       obj.addEventListener(evType,fn,false); 
       return true; 
  } 
        else if(obj.attachEvent){ 
           var r=obj.attachEvent("on"+evType,fn); 
           Com.EventCache.add(obj,evType,fn); 
           return r; 
        } 
        else{ 
           return false; 
        } 
    }, 
      
    removeEvent:function(obj,evType,fn){ 
       if(obj.removeEventListener){ 
          obj.removeEventListener(evType,fn,false); 
          return true; 
       } 
       else if(obj.detachEvent){ 
          var r=obj.detachEvent("on"+evType,fn); 
          return r; 
       } 
       else{ 
          return false; 
       } 
    }, 
     
    getEvent:function(e){ 
      e=window.event||e; 
      e.leftButton=false; 
       
      if(e.srcElement==null&&e.target!=null){ 
         e.srcElement=e.target; 
         e.leftButton=(e.button==1); 
      } 
        else if(e.target==null&&e.srcElement!=null){ 
           e.target=e.srcElement; 
           e.leftButton=(e.button==0); 
        } 
        else if(e.srcElement!=null&&e.target!=null){ 
        } 
        else{ 
           return null 
        }

if(document.body&&document.documentElement){ 
           e.mouseX=e.pageX||(e.clientX+Math.max(document.body.scrollLeft,document.documentElement.scrollLeft)); 
           e.mouseY=e.pageY||(e.clientY+Math.max(document.body.scrollTop,document.documentElement.scrollTop)); 
        } 
        else{ 
           e.mouseX=-1;e.mouseY=-1; 
        } 
        return e; 
    }, 
     
    stopEvent:function(e){ 
      if(e&&e.cancelBubble!=null){ 
         e.cancelBubble=true; 
         e.returnValue=false; 
      } 
       
        if(e&&e.stopPropagation&&e.preventDefault){ 
           e.stopPropagation(); 
           e.preventDefault(); 
        } 
         
        return false; 
    } 
};

Com.EventCache=function(){ 
  var listEvents=[]; 
  return{ 
    listEvents:listEvents, 
     
    add:function(node,sEventName,fHandler,bCapture){ 
       listEvents[listEvents.length]=arguments; 
    }, 
     
    flush:function(){ 
       var i,item; 
        
       for(i=listEvents.length-1;i>=0;i=i-1){ 
            item=listEvents[i]; 
             
            if(item[0].removeEventListener){ 
                 item[0].removeEventListener(item[1],item[2],item[3]); 
            }; 
             
            if(item[1].substring(0,2)!="on"){ 
                 item[1]="on"+item[1]; 
            }; 
             
            if(item[0].detachEvent){ 
                 item[0].detachEvent(item[1],item[2]); 
            }; 
             
            item[0][item[1]]=null; 
       }; 
    } 
  }; 
}();

Com.Event.addEvent(window,"unload",Com.EventCache.flush);

function error_handler(a,b,c){ 
  window.status=(c+"\n"+b+"\n\n"+a+"\n\n"+error_handler.caller); 
  return true; 
}

Com.Ajax={ 
    useActiveX:function(){return (typeof ActiveXObject != "undefined");}, 
    useDom:function(){return document.implementation && document.implementation.createDocument;}, 
    useXmlHttp:function(){return (typeof XMLHttpRequest != "undefined");},     
    ARR_XMLHTTP_VERS : ["MSXML2.XmlHttp.6.0","MSXML2.XmlHttp.3.0"], 
    ARR_DOM_VERS : ["MSXML2.DOMDocument.6.0","MSXML2.DOMDocument.3.0"], 
     
    createXMLHTTPRequest:function(){ 
       //if it natively supports XMLHttpRequest object 
         if (this.useXmlHttp){ 
                return new XMLHttpRequest(); 
         }  
         else if (this.useActiveX) { //IE < 7.0 = use ActiveX 
           if (!this.XMLHTTP_VER) { 
                for (var i=0; i < this.ARR_XMLHTTP_VERS.length; i++) { 
                    try { 
                          new ActiveXObject(this.ARR_XMLHTTP_VERS[i]); 
                          this.XMLHTTP_VER = this.ARR_XMLHTTP_VERS[i]; 
                          break; 
                    } catch (oError) {                 
                    } 
                } 
           } 
           if (this.XMLHTTP_VER) { 
                return new ActiveXObject(this.XMLHTTP_VER); 
           }  
           else { 
                throw new Error("Could not create XML HTTP Request."); 
           } 
         }  
         else { 
                throw new Error("Your browser doesn't support an XML HTTP Request."); 
         } 
    }, 
     
    Updater:function(tarObj,URL,sMethod,parameters){ 
       var oXmlHttp = this.createXMLHTTPRequest(); 
        
       oXmlHttp.open(sMethod, URL+parameters, true); 
            oXmlHttp.onreadystatechange = function () { 
                if (oXmlHttp.readyState == 4) { 
                    if (oXmlHttp.status == 200 || window.location.href.indexOf("http")==-1) { 
                        if(Com.Common.$(tarObj)){ 
                            Com.Common.$(tarObj).innerHTML = oXmlHttp.responseText; 
                        } 
                        else{ 
                           return false; 
                        }           
                    } else { 
                        throw new Error("An error occurred."); 
                    } 
                }     
            } 
             
            oXmlHttp.send(null);       
    }, 
     
    Request:function(sMethod,URL,parameters,func){ 
        var oXmlHttp = this.createXMLHTTPRequest(); 
        
        oXmlHttp.open(sMethod, URL+parameters, true); 
          oXmlHttp.onreadystatechange = function() { 
                if (oXmlHttp.readyState == 4) { 
                    if (oXmlHttp.status == 200 || window.location.href.indexOf("http")==-1) { 
                            return func(oXmlHttp);      
                    } else { 
                        throw new Error("An error occurred."); 
                    } 
                }     
          } 
             
          oXmlHttp.send(null);    
    } 
};

Com.AjaxTab={ 
    setTabsEvent:function(){ 
         for(var i=0;i<arguments.length;i++){ 
             var tabs = Com.Common.$(arguments[i]); 
             if(!tabs || !document.getElementsByTagName) return false; 
               
             var theList = tabs.getElementsByTagName("li");  
             var theLink = tabs.getElementsByTagName("a");   
               
             for(var j=0;j<theList.length;j++){ 
                 var theTab = theList[j]; 
                 if(theTab.parentNode!=tabs) continue; 
                     
                 var theA = theLink[j]; 
                 theA.onclick = function(){ 
                     return false;     
                 } 
                     
                 theTab.onclick = function(){ 
                     var theClass = this.className; 
                     if(theClass!="current"){ 
                         var objId = this.getAttribute("id").split("_")[1];  
                         var tarObj = this.getAttribute("id").split("_")[0];  
                         var theURL = tarObj + "/" + tarObj + objId + ".htm";  
                         var listElem = Com.Common.$(tarObj); 
                         Com.AjaxTab.chgTabStyle(listElem,objId,tarObj,theURL);     
                         return false; 
                     } 
                 } 
             } 
         }       
      }, 
       
      chgTabStyle:function(ListName,tabId,tarInject,URL){ 
           if(!ListName || !document.getElementsByTagName) return false; 
         var Tabs = ListName; 
         var theLi = Tabs.getElementsByTagName("li"); 
  
         for(var i=0;i<theLi.length;i++){ 
              if(i==tabId){ 
                 theLi[tabId].className = "current"; 
                 this.showMsg(tarInject+"_cnt",URL); 
              } 
              else{ 
                   theLi[i].className = ""; 
              } 
         } 
      }, 
       
      showMsg:function(tagid,URL){ 
         if(!Com.Common.$(tagid)) return false;

var loadstatustext="<div class='loading'>正在加载内容, 请稍候...
<img src='img/loading.gif' alt='正在加载内容, 请稍候...' /></div>";   
         Com.Common.$(tagid).innerHTML = loadstatustext;      
         var para = "?d=" + Math.random();          
         var myAjax = Com.Ajax.Updater(tagid,URL,"get",para); 
      } 
};

Com.Drag = { 
obj : null, 
zIndex : 300, 
dragWidth : screen.availWidth-328, 
  dragHeight : screen.availHeight-344, 
   
  initDragDivs : function(handles,drags){ 
   for(var i=0;i<arrHandle.length;i++){ 
    var h = Com.Common.$(handles[i]); 
    var d = Com.Common.$(drags[i]); 
       this.init(h, d, 0, this.dragWidth, 0, this.dragHeight); 
     } 
  }, 
   
init : function(o, oRoot, minX, maxX, minY, maxY, bSwapHorzRef, bSwapVertRef, fXMapper, fYMapper) 
{ 
if(!o || !oRoot) return false;

o.setAttribute("title","^-^,按住我，可以拖动我哦！！！"); 
    o.style.cursor = "move";

o.onmousedown= Com.Drag.start;

o.hmode= bSwapHorzRef ? false : true ; 
o.vmode= bSwapVertRef ? false : true ;

o.root = oRoot && oRoot != null ? oRoot : o ; 
o.root.onclick = function(){ 
 o.root.style.zIndex = Com.Drag.zIndex; 
   Com.Drag.zIndex++; 
}

if (o.hmode  && isNaN(parseInt(o.root.style.left  ))) o.root.style.left   = "0px"; 
if (o.vmode  && isNaN(parseInt(o.root.style.top   ))) o.root.style.top    = "0px"; 
if (!o.hmode && isNaN(parseInt(o.root.style.right ))) o.root.style.right  = "0px"; 
if (!o.vmode && isNaN(parseInt(o.root.style.bottom))) o.root.style.bottom = "0px";

o.minX= typeof minX != 'undefined' ? minX : null; 
o.minY= typeof minY != 'undefined' ? minY : null; 
o.maxX= typeof maxX != 'undefined' ? maxX : null; 
o.maxY= typeof maxY != 'undefined' ? maxY : null;

o.xMapper = fXMapper ? fXMapper : null; 
o.yMapper = fYMapper ? fYMapper : null;

o.root.onDragStart= new Function(); 
o.root.onDragEnd= new Function(); 
o.root.onDrag= new Function(); 
},

start : function(e) 
{ 
var o = Com.Drag.obj = this; 
e = Com.Drag.fixE(e); 
Com.Drag.fixIndex(o);

var y = parseInt(o.vmode ? o.root.style.top  : o.root.style.bottom); 
var x = parseInt(o.hmode ? o.root.style.left : o.root.style.right ); 
o.root.onDragStart(x,y);

o.lastMouseX= e.clientX; 
o.lastMouseY= e.clientY;

if (o.hmode) { 
if (o.minX != null)o.minMouseX= e.clientX - x + o.minX; 
if (o.maxX != null)o.maxMouseX= o.minMouseX + o.maxX - o.minX; 
} else { 
if (o.minX != null) o.maxMouseX = -o.minX + e.clientX + x; 
if (o.maxX != null) o.minMouseX = -o.maxX + e.clientX + x; 
}

if (o.vmode) { 
if (o.minY != null)o.minMouseY= e.clientY - y + o.minY; 
if (o.maxY != null)o.maxMouseY= o.minMouseY + o.maxY - o.minY; 
} else { 
if (o.minY != null) o.maxMouseY = -o.minY + e.clientY + y; 
if (o.maxY != null) o.minMouseY = -o.maxY + e.clientY + y; 
}

document.onmousemove= Com.Drag.drag; 
document.onmouseup= Com.Drag.end;

return false; 
},

drag : function(e) 
{ 
e = Com.Drag.fixE(e); 
var o = Com.Drag.obj; 
     
    if(document.all){ 
o.root.style.filter = "alpha(opacity=50)"; 
} 
else{ 
o.root.style.opacity = 0.5; 
} 
     
var ey= e.clientY; 
var ex= e.clientX; 
var y = parseInt(o.vmode ? o.root.style.top  : o.root.style.bottom); 
var x = parseInt(o.hmode ? o.root.style.left : o.root.style.right ); 
var nx, ny;

if (o.minX != null) ex = o.hmode ? Math.max(ex, o.minMouseX) : Math.min(ex, o.maxMouseX); 
if (o.maxX != null) ex = o.hmode ? Math.min(ex, o.maxMouseX) : Math.max(ex, o.minMouseX); 
if (o.minY != null) ey = o.vmode ? Math.max(ey, o.minMouseY) : Math.min(ey, o.maxMouseY); 
if (o.maxY != null) ey = o.vmode ? Math.min(ey, o.maxMouseY) : Math.max(ey, o.minMouseY);

nx = x + ((ex - o.lastMouseX) * (o.hmode ? 1 : -1)); 
ny = y + ((ey - o.lastMouseY) * (o.vmode ? 1 : -1));

if (o.xMapper)nx = o.xMapper(y) 
else if (o.yMapper)ny = o.yMapper(x)

Com.Drag.obj.root.style[o.hmode ? "left" : "right"] = nx + "px"; 
Com.Drag.obj.root.style[o.vmode ? "top" : "bottom"] = ny + "px"; 
Com.Drag.obj.lastMouseX= ex; 
Com.Drag.obj.lastMouseY= ey;

Com.Drag.obj.root.onDrag(nx, ny); 
return false; 
},

end : function() 
{ 
var o = Com.Drag.obj;  
document.onmousemove = document.onmouseup = function(){ 
    if(document.all){ 
         o.root.style.filter = ""; 
      } 
      else{ 
         o.root.style.opacity = 1; 
      } 
      return null; 
  } 
Com.Drag.obj.root.onDragEnd(parseInt(Com.Drag.obj.root.style[Com.Drag.obj.hmode ? "left" : "right"]), parseInt(Com.Drag.obj.root.style[Com.Drag.obj.vmode ? "top" : "bottom"])); 
Com.Drag.obj = null; 
},

fixE : function(e) 
{ 
if (typeof e == 'undefined') e = window.event; 
if (typeof e.layerX == 'undefined') e.layerX = e.offsetX; 
if (typeof e.layerY == 'undefined') e.layerY = e.offsetY; 
return e; 
},

fixIndex : function(elem){   
elem.root.style.zIndex = Com.Drag.zIndex; 
Com.Drag.zIndex++; 
} 
};

Com.Skin={ 
 setChgEvent:function(obj){ 
        var ul = Com.Common.$(obj); 
        if(!ul || !document.getElementsByTagName) return false; 
        var tabs = ul.getElementsByTagName("img"); 
         
        for(var i=0;i<tabs.length;i++){ 
           tabs[i].onclick = function(){ 
               var styleName = this.getAttribute("id")+" style"; 
               Com.Skin.setActiveStyleSheet(styleName,1); 
               return false;   
           } 
        } 
   },

setActiveStyleSheet:function(title){ 
        var i, a, main; 
        for(i=0; (a = document.getElementsByTagName("link")[i]); i++) { 
            if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) { 
                a.disabled = true; 
                if(a.getAttribute("title") == title) a.disabled = false; 
            } 
        } 
   }, 
    
   getActiveStyleSheet:function(){ 
        var i, a; 
        for(i=0; (a = document.getElementsByTagName("link")[i]); i++) { 
             if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title") && !a.disabled) return a.getAttribute("title"); 
        } 
        return null; 
   }, 
    
   getPreferredStyleSheet:function() { 
        var i, a; 
        for(i=0; (a = document.getElementsByTagName("link")[i]); i++) { 
            if(a.getAttribute("rel").indexOf("style") != -1 
               && a.getAttribute("rel").indexOf("alt") == -1 
               && a.getAttribute("title") 
            ) return a.getAttribute("title"); 
        } 
        return null; 
   },

setDefautlStyle:function(){ 
        var cookie = Com.Cookie.getCookie("style"); 
        var title = cookie ? cookie : this.getPreferredStyleSheet(); 
        this.setActiveStyleSheet(title); 
   }, 
    
   setSkinCookie:function(e){ 
        var title = this.getActiveStyleSheet(); 
        Com.Cookie.setCookie("style", title, 365, ""); 
   } 
}; 
//--> 
</script> 
<style type="text/css"> 
 
</style> 
</head> 
<body> 
<script language="javascript" type="text/javascript"> 
<!-- 
var arrHandle = ["handle","handle1","handle2","handle3"]; 
var arrDrag = ["drag","drag1","drag2","drag3"];

function displayDiv(flg,elemID){ 
    Com.Common.$(elemID).style.display=flg==0?"block":"none"; 
}

function displayAllDiv(){ 
    for(var i=0;i<arrDrag.length;i++){ 
       Com.Common.$(arrDrag[i]).style.display="block"; 
    } 
}

alert("你的浏览器是否为IE6："+Com.Common.isIE6()); 
//--> 
</script> 
<h1 id="title">新版本网站--lib类函数功能应用DEMO演示</h1> 
<script language="javascript" type="text/javascript"> 
 
</script> 
<span id="container"> 
<div class="main">1</div> 
<div class="main">2</div> 
<div class="main">3</div> 
<div class="main">4</div> 
<div class="main">5</div> 
<div class="main">6</div> 
<div class="main">7</div> 
<div class="main">8</div> 
</span> 
<script language="javascript" type="text/javascript"> 
<!-- 
var tags = Com.Common.getElByClassName("div","main",5,Com.Common.$("container")); 
alert("通过Com.Common.getElByClassName()方法得到第5个div标签的class='main'的内容为："+tags.innerHTML);

//Com.Common.styleElementsSiblings("div","bgGray"); 
Com.Common.highLightRows("bgGray","div");

var elem  =  document.createElement("p");    
elem.innerHTML="19.95";    
Com.Common.insertAfter(elem,Com.Common.$("container")); 
//--> 
</script> 
<div id="datetime"></div> 
<script language="javascript" type="text/javascript"> 
 
</script> 
<form name="frmDemo" id="frmDemo" action="" method="post"> 
      <input type="text" name="txtWord" id="txtWord" value="请输入要搜索的关键字" /> 
      <input type="button" name="btnEnter" id="btnEnter" onclick="displayAllDiv();" value="显示拖动窗口" /> 
</form> 
<script language="javascript" type="text/javascript"> 
<!-- 
Com.Common.resetForm(Com.Common.$("frmDemo")); 
Com.Common.addClass(Com.Common.$("frmDemo"),"bgGray");

Com.StringBuffer.Append("hello "); 
Com.StringBuffer.Append("world"); 
alert(Com.StringBuffer.toString()); 
//--> 
</script> 
<div class="drag" id="drag" style="left:300px;top:300px;"> 
<div class="handle" id="handle"><h2>拖动窗口(1)</h2><span><a href="#" title="关闭窗口" onclick="displayDiv(1,'drag')">关闭窗口</a></a></span><br class="clear" /></div> 
<div class="cnt"> 
 
理光R系列自来都已全面而著称，去年推出的R7则堪称是相当完善的一款产品，轻巧的机身，7.1倍光学变焦镜头，大尺寸LCD，快速的开机、对焦速度，加上合理的价格，取得了相当不错的销售成绩。 
 
 
08年2月19日，理光官方正式发布了R7的最新替代产品-R8，不到三天，这款新一代全能DC就已经上市，其售价为2880元，并赠送1GB SD卡一张。 
 
 
理光R系列自来都已全面而著称，去年推出的R7则堪称是相当完善的一款产品，轻巧的机身，7.1倍光学变焦镜头，大尺寸LCD，快速的开机、对焦速度，加上合理的价格，取得了相当不错的销售成绩。 
 
 
08年2月19日，理光官方正式发布了R7的最新替代产品-R8，不到三天，这款新一代全能DC就已经上市，其售价为2880元，并赠送1GB SD卡一张。 
 
</div> 
</div>

<div class="drag" id="drag1" style="left:600px;top:200px;"> 
<div class="handle" id="handle1"><h2>Ajax标签导航窗口(2)</h2><span><a href="#" title="关闭窗口" onclick="displayDiv(1,'drag1')">关闭窗口</a></a></span><br class="clear" /></div> 
<ul id="tabs"> 
<li class="current" id="tabs_0"><a href="#1">Dom 编程艺术</a></li> 
<li id="tabs_1"><a href="#1">Ajax实战</a></li> 
<li id="tabs_2"><a href="#1">CSS权威指南</a></li> 
</ul><br class="clear" /> 
<div class="cnt" id="tabs_cnt"> 
 
DOM理光R系列自来都已全面而著称，去年推出的R7则堪称是相当完善的一款产品，轻巧的机身，7.1倍光学变焦镜头，大尺寸LCD，快速的开机、对焦速度，加上合理的价格，取得了相当不错的销售成绩。 
 
 
08年2月19日，理光官方正式发布了R7的最新替代产品-R8，不到三天，这款新一代全能DC就已经上市，其售价为2880元，并赠送1GB SD卡一张。 
 
 
理光R系列自来都已全面而著称，去年推出的R7则堪称是相当完善的一款产品，轻巧的机身，7.1倍光学变焦镜头，大尺寸LCD，快速的开机、对焦速度，加上合理的价格，取得了相当不错的销售成绩。 
 
 
08年2月19日，理光官方正式发布了R7的最新替代产品-R8，不到三天，这款新一代全能DC就已经上市，其售价为2880元，并赠送1GB SD卡一张。 
 
</div> 
</div>

<div class="drag" id="drag2" style="left:150px;top:250px;"> 
<div class="handle" id="handle2"><h2>拖动窗口(3)</h2><span><a href="#" title="关闭窗口" onclick="displayDiv(1,'drag2')">关闭窗口</a></a></span><br class="clear" /></div> 
<div class="cnt"> 
 
理光R系列自来都已全面而著称，去年推出的R7则堪称是相当完善的一款产品，轻巧的机身，7.1倍光学变焦镜头，大尺寸LCD，快速的开机、对焦速度，加上合理的价格，取得了相当不错的销售成绩。 
 
 
08年2月19日，理光官方正式发布了R7的最新替代产品-R8，不到三天，这款新一代全能DC就已经上市，其售价为2880元，并赠送1GB SD卡一张。 
 
 
理光R系列自来都已全面而著称，去年推出的R7则堪称是相当完善的一款产品，轻巧的机身，7.1倍光学变焦镜头，大尺寸LCD，快速的开机、对焦速度，加上合理的价格，取得了相当不错的销售成绩。 
 
 
08年2月19日，理光官方正式发布了R7的最新替代产品-R8，不到三天，这款新一代全能DC就已经上市，其售价为2880元，并赠送1GB SD卡一张。 
 
</div> 
</div>

<div class="drag" id="drag3" style="left:480px;top:350px;"> 
<div class="handle" id="handle3"><h2>Ajax标签导航窗口(4)</h2><span><a href="#" title="关闭窗口" onclick="displayDiv(1,'drag3')">关闭窗口</a></a></span><br class="clear" /></div> 
<ul id="news"> 
<li class="current" id="news_0"><a href="#1">Dom 编程艺术</a></li> 
<li id="news_1"><a href="#1">Ajax实战</a></li> 
<li id="news_2"><a href="#1">CSS权威指南</a></li> 
</ul><br class="clear" /> 
<div class="cnt" id="news_cnt"> 
 
理光R系列自来都已全面而著称，去年推出的R7则堪称是相当完善的一款产品，轻巧的机身，7.1倍光学变焦镜头，大尺寸LCD，快速的开机、对焦速度，加上合理的价格，取得了相当不错的销售成绩。 
 
 
08年2月19日，理光官方正式发布了R7的最新替代产品-R8，不到三天，这款新一代全能DC就已经上市，其售价为2880元，并赠送1GB SD卡一张。 
 
 
理光R系列自来都已全面而著称，去年推出的R7则堪称是相当完善的一款产品，轻巧的机身，7.1倍光学变焦镜头，大尺寸LCD，快速的开机、对焦速度，加上合理的价格，取得了相当不错的销售成绩。 
 
 
08年2月19日，理光官方正式发布了R7的最新替代产品-R8，不到三天，这款新一代全能DC就已经上市，其售价为2880元，并赠送1GB SD卡一张。 
 
</div> 
</div> 
<script language="javascript" type="text/javascript"> 
<!--

Com.Drag.initDragDivs(arrHandle,arrDrag); 
Com.AjaxTab.setTabsEvent("tabs","news"); 
//--> 
</script> 
</body> 
</html>

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

Tags：javascript 拖动 cookie ajax

浏览次数：载入中... 打印本文关闭本文返回首页

顶一下

上一篇文章：Ajax核心XMLHTTP组件资料
下一篇文章：AJAX 异步传输数据的问题

·在百度中搜索关于“javascript 拖动_cookie_ajax等相关内容

文章评论

共有位脚本之家网友发表了评论我来说两句

javascript 拖动_cookie_ajax等

文章评论

同类文章

最近更新

热点排行

javascript 拖动_cookie_ajax等

文章评论

同 类 文 章

最 近 更 新

热 点 排 行

同类文章

最近更新

热点排行