经典的带阴影的可拖动的浮动层

佊婩椛Amanda

佊婩椛Amanda

2016-02-19 12:55

下面图老师小编跟大家分享一个简单易学的经典的带阴影的可拖动的浮动层教程,get新技能是需要行动的,喜欢的朋友赶紧收藏起来学习下吧!

!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
html
head
titleMyPixbot/title
meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"
script language="JavaScript" type="text/JavaScript"
!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&id.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&id.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_showHideLayers() { //v6.0
  var i,p,v,obj,args=MM_showHideLayers.arguments;
  for (i=0; i(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
    if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
    obj.visibility=v; }
}

function MM_dragLayer(objName,x,hL,hT,hW,hH,toFront,dropBack,cU,cD,cL,cR,targL,targT,tol,dropJS,et,dragJS) { //v4.01
  //Copyright 1998 Macromedia, Inc. All rights reserved.
  var i,j,aLayer,retVal,curDrag=null,curLeft,curTop,IE=document.all,NS4=document.layers;
  var NS6=(!IE&&document.getElementById), NS=(NS4||NS6); if (!IE && !NS) return false;
  retVal = true; if(IE && event) event.returnValue = true;
  if (MM_dragLayer.arguments.length 1) {
    curDrag = MM_findObj(objName); if (!curDrag) return false;
    if (!document.allLayers) { document.allLayers = new Array();
      with (document) if (NS4) { for (i=0; ilayers.length; i++) allLayers[i]=layers[i];
        for (i=0; iallLayers.length; i++) if (allLayers[i].document && allLayers[i].document.layers)
          with (allLayers[i].document) for (j=0; jlayers.length; j++) allLayers[allLayers.length]=layers[j];
      } else {
        if (NS6) { var spns = getElementsByTagName("span"); var all = getElementsByTagName("div");
          for (i=0;ispns.length;i++) if (spns[i].style&&spns[i].style.position) allLayers[allLayers.length]=spns[i];}
        for (i=0;iall.length;i++) if (all[i].style&&all[i].style.position) allLayers[allLayers.length]=all[i];
    } }
    curDrag.MM_dragOk=true; curDrag.MM_targL=targL; curDrag.MM_targT=targT;
    curDrag.MM_tol=Math.pow(tol,2); curDrag.MM_hLeft=hL; curDrag.MM_hTop=hT;
    curDrag.MM_hWidth=hW; curDrag.MM_hHeight=hH; curDrag.MM_toFront=toFront;
    curDrag.MM_dropBack=dropBack; curDrag.MM_dropJS=dropJS;
    curDrag.MM_everyTime=et; curDrag.MM_dragJS=dragJS;
    curDrag.MM_oldZ = (NS4)?curDrag.zIndex:curDrag.style.zIndex;
    curLeft= (NS4)?curDrag.left:(NS6)?parseInt(curDrag.style.left):curDrag.style.pixelLeft;
    if (String(curLeft)=="NaN") curLeft=0; curDrag.MM_startL = curLeft;
    curTop = (NS4)?curDrag.top:(NS6)?parseInt(curDrag.style.top):curDrag.style.pixelTop;
    if (String(curTop)=="NaN") curTop=0; curDrag.MM_startT = curTop;
    curDrag.MM_bL=(cL0)?null:curLeft-cL; curDrag.MM_bT=(cU0)?null:curTop-cU;
    curDrag.MM_bR=(cR0)?null:curLeft+cR; curDrag.MM_bB=(cD0)?null:curTop+cD;
    curDrag.MM_LEFTRIGHT=0; curDrag.MM_UPDOWN=0; curDrag.MM_SNAPPED=false; //use in your JS!
    document.onmousedown = MM_dragLayer; document.onmouseup = MM_dragLayer;
    if (NS) document.captureEvents(Event.MOUSEDOWN|Event.MOUSEUP);
  } else {
    var theEvent = ((NS)?objName.type:event.type);
    if (theEvent == 'mousedown') {
      var mouseX = (NS)?objName.pageX : event.clientX + document.body.scrollLeft;
      var mouseY = (NS)?objName.pageY : event.clientY + document.body.scrollTop;
      var maxDragZ=null; document.MM_maxZ = 0;
      for (i=0; idocument.allLayers.length; i++) { aLayer = document.allLayers[i];
        var aLayerZ = (NS4)?aLayer.zIndex:parseInt(aLayer.style.zIndex);
        if (aLayerZ document.MM_maxZ) document.MM_maxZ = aLayerZ;
        var isVisible = (((NS4)?aLayer.visibility:aLayer.style.visibility).indexOf('hid') == -1);
        if (aLayer.MM_dragOk != null && isVisible) with (aLayer) {
          var parentL=0; var parentT=0;
          if (NS6) { parentLayer = aLayer.parentNode;
            while (parentLayer != null && parentLayer.style.position) {            
              parentL += parseInt(parentLayer.offsetLeft); parentT += parseInt(parentLayer.offsetTop);
              parentLayer = parentLayer.parentNode;
          } } else if (IE) { parentLayer = aLayer.parentElement;      
            while (parentLayer != null && parentLayer.style.position) {
              parentL += parentLayer.offsetLeft; parentT += parentLayer.offsetTop;
              parentLayer = parentLayer.parentElement; } }
          var tmpX=mouseX-(((NS4)?pageX:((NS6)?parseInt(style.left):style.pixelLeft)+parentL)+MM_hLeft);
          var tmpY=mouseY-(((NS4)?pageY:((NS6)?parseInt(style.top):style.pixelTop) +parentT)+MM_hTop);
          if (String(tmpX)=="NaN") tmpX=0; if (String(tmpY)=="NaN") tmpY=0;
          var tmpW = MM_hWidth;  if (tmpW = 0) tmpW += ((NS4)?clip.width :offsetWidth);
          var tmpH = MM_hHeight; if (tmpH = 0) tmpH += ((NS4)?clip.height:offsetHeight);
          if ((0 = tmpX && tmpX tmpW && 0 = tmpY && tmpY tmpH) && (maxDragZ == null
              || maxDragZ = aLayerZ)) { curDrag = aLayer; maxDragZ = aLayerZ; } } }
      if (curDrag) {
        document.onmousemove = MM_dragLayer; if (NS4) document.captureEvents(Event.MOUSEMOVE);
        curLeft = (NS4)?curDrag.left:(NS6)?parseInt(curDrag.style.left):curDrag.style.pixelLeft;
        curTop = (NS4)?curDrag.top:(NS6)?parseInt(curDrag.style.top):curDrag.style.pixelTop;
        if (String(curLeft)=="NaN") curLeft=0; if (String(curTop)=="NaN") curTop=0;
        MM_oldX = mouseX - curLeft; MM_oldY = mouseY - curTop;
        document.MM_curDrag = curDrag;  curDrag.MM_SNAPPED=false;
        if(curDrag.MM_toFront) {
          eval('curDrag.'+((NS4)?'':'style.')+'zIndex=document.MM_maxZ+1');
          if (!curDrag.MM_dropBack) document.MM_maxZ++; }
        retVal = false; if(!NS4&&!NS6) event.returnValue = false;
    } } else if (theEvent == 'mousemove') {
      if (document.MM_curDrag) with (document.MM_curDrag) {
        var mouseX = (NS)?objName.pageX : event.clientX + document.body.scrollLeft;
        var mouseY = (NS)?objName.pageY : event.clientY + document.body.scrollTop;
        newLeft = mouseX-MM_oldX; newTop  = mouseY-MM_oldY;
        if (MM_bL!=null) newLeft = Math.max(newLeft,MM_bL);
        if (MM_bR!=null) newLeft = Math.min(newLeft,MM_bR);
        if (MM_bT!=null) newTop  = Math.max(newTop ,MM_bT);
        if (MM_bB!=null) newTop  = Math.min(newTop ,MM_bB);
        MM_LEFTRIGHT = newLeft-MM_startL; MM_UPDOWN = newTop-MM_startT;
        if (NS4) {left = newLeft; top = newTop;}
        else if (NS6){style.left = newLeft; style.top = newTop;}
        else {style.pixelLeft = newLeft; style.pixelTop = newTop;}
        if (MM_dragJS) eval(MM_dragJS);
        retVal = false; if(!NS) event.returnValue = false;
    } } else if (theEvent == 'mouseup') {
      document.onmousemove = null;
      if (NS) document.releaseEvents(Event.MOUSEMOVE);
      if (NS) document.captureEvents(Event.MOUSEDOWN); //for mac NS
      if (document.MM_curDrag) with (document.MM_curDrag) {
        if (typeof MM_targL =='number' && typeof MM_targT == 'number' &&
            (Math.pow(MM_targL-((NS4)?left:(NS6)?parseInt(style.left):style.pixelLeft),2)+
             Math.pow(MM_targT-((NS4)?top:(NS6)?parseInt(style.top):style.pixelTop),2))=MM_tol) {
          if (NS4) {left = MM_targL; top = MM_targT;}
          else if (NS6) {style.left = MM_targL; style.top = MM_targT;}
          else {style.pixelLeft = MM_targL; style.pixelTop = MM_targT;}
          MM_SNAPPED = true; MM_LEFTRIGHT = MM_startL-MM_targL; MM_UPDOWN = MM_startT-MM_targT; }
        if (MM_everyTime || MM_SNAPPED) eval(MM_dropJS);
        if(MM_dropBack) {if (NS4) zIndex = MM_oldZ; else style.zIndex = MM_oldZ;}
        retVal = false; if(!NS) event.returnValue = false; }
      document.MM_curDrag = null;
    }
    if (NS) document.routeEvent(objName);
  } return retVal;
}

function loadwin(obj){
 with(MM_findObj(obj))with(style){
  filters[0].apply();
  display='';
  filters[0].play();
 }
}
function cs(captionBG,bodyBG,tableBG){
oldBody=document.body;
 with(oldBody){
  var newBody=cloneNode();
  style.filter='blendtrans(duration=1)';
  filters[0].apply();
  with(document.styleSheets[0]){
   with(rules[0].style){backgroundColor=captionBG;}
   with(rules[1].style){backgroundColor=bodyBG;}
   with(rules[2].style){backgroundColor=tableBG}
  }
  filters[0].play();
  setTimeout(function(){
    if(oldBody!=null){
     oldBody.applyElement(newBody, "inside")
     oldBody.swapNode(newBody);
     oldBody.removeNode(true);
     }
    },1500);
 }
}
//--
/script
style type="text/css"
!--
.caption {
 font-size: 9px;
 color: #FFFFFF;
 background-color: #00CCFF;
 padding-left: 5px;
 cursor: default;
 font-family: "Verdana", "Arial";
 border: 1px inset;
}
body {
 background-color: #f6f6f6;
 border: 1px inset;
 overflow: hidden;
}
table {
 background-color: #eeeeee;
}
td {
 font-family: "Verdana", "Arial";
 font-size: 9px;
 border: 0px;
}
.win {
 filter:BlendTrans(duration=1) DropShadow(Color=#cccccc, OffX=3, OffY=3) alpha(opacity=90)
}
a {
 text-decoration: none;
 color: #003399;
}
a:hover {
 color: #FF0000;
}
input {
 font-family: "Verdana", "Arial";
 font-size: 9px;
 border-width: 1px;
}
.statusbar {
 font-family: "Tahoma", "Verdana";
 font-size: 9px;
 color: #999999;
 padding-left: 3px;
}
.button {
 border: 1px outset;
 text-align: center;
}
.navframe {
 padding: 5px;
}
--
/style
/head

body
div id="assist" style="position:absolute; left:15px; top:68px; width:185px; z-index:1;display:none;" class="win" onMouseDown="MM_dragLayer('assist','',0,0,150,18,true,false,-1,-1,-1,-1,15,68,100,'',false,'')"
  table width="180" border="1" cellpadding="0" cellspacing="0"
    tr
      td class="caption"SeekAssist/td
      td width="14" align="center"a href="#" onclick="with(MM_findObj('assistwin').style)display=display=='none'?'':'none'"%/a/td
      td width="14" align="center"a href="#" onClick="MM_showHideLayers('assist','','hide')"X/a/td
    /tr
    tr id="assistwin"
      td height="100" colspan="3" bordercolor="#eeeeee" /td
    /tr
  /table
        br
/div
scriptloadwin('assist')/script
div id="rank" style="position:absolute; left:15px; top:194px; width:185px; z-index:1;display:none;" class="win" onMouseDown="MM_dragLayer('rank','',0,0,150,18,true,false,-1,-1,-1,-1,15,194,100,'',false,'')"
  table width="180" border="1" cellpadding="0" cellspacing="0"
    tr
      td class="caption"SeekRank/td
      td width="14" align="center"a href="#" onclick="with(MM_findObj('rankwin').style)display=display=='none'?'':'none'"%/a/td
      td width="14" align="center"a href="#" onClick="MM_showHideLayers('assist','','inherit','rank','','hide')"X/a/td
    /tr
    tr id="rankwin"
      td height="100" colspan="3" bordercolor="#eeeeee" /td
    /tr
  /table
  br
/div
scriptsetTimeout("loadwin('rank')",500)/script
div id="mycolor" style="position:absolute; left:15px; top:320px; width:185px; z-index:1;display:none;" class="win" onMouseDown="MM_dragLayer('mycolor','',0,0,150,18,true,false,-1,-1,-1,-1,15,320,100,'',false,'')"
  table width="180" border="1" cellpadding="0" cellspacing="0"
    tr
      td class="caption"MyColor/td
      td width="14" align="center"a href="#" onclick="with(MM_findObj('mycolorwin').style)display=display=='none'?'':'none'"%/a/td
      td width="14" align="center"a href="#" onClick="MM_showHideLayers('mycolor','','hide')"X/a/td
    /tr
    tr id="mycolorwin"
      td height="100" colspan="3" bordercolor="#eeeeee"table width="100%" border="0" cellspacing="0" cellpadding="2"
        tr
          td align="center"a href="#" onclick="cs('#00CCFF','#f6f6f6','#eeeeee')"Default/a/td
        /tr
        tr
          td align="center"a href="#" onclick="cs('red','#eeccee','#eeddee')"StyleSheet#1/a/td
        /tr
        tr
          td align="center"a href="#" onclick="cs('#99ccff','#eeeeee','#ccddff')"StyleSheet#2/a/td
        /tr
        tr
          td align="center"a href="#" onclick="cs('#ff9999','#ffffff','#ffeeff')"StyleSheet#3/a/td
        /tr
        tr
          td align="center"a href="#" onclick="cs('skyblue','#eeeeee','#99ddff')"StyleSheet#4/a/td
        /tr
        tr
          td align="center"a href="#" onclick="cs('#009900','#eeffee','#ddffdd')"StyleSheet#5/a/td
        /tr
      /table/td
    /tr
  /table
  br
/div
scriptsetTimeout("loadwin('mycolor')",1000)/script
div id="results" style="position:absolute; left:204px; top:68px; width:575px; z-index:1;display:none;" class="win" onMouseDown="MM_dragLayer('results','',0,0,400,18,true,false,-1,-1,-1,-1,204,68,50,'',false,'')"
  table width="570" border="1" cellpadding="0" cellspacing="0"
    tr
      tdtable width="100%" border="0" cellspacing="0" cellpadding="0"
          tr
            td class="caption"Results/td
            td width="12" class="button"a href="#" onClick="with(MM_findObj('resultswin').style)display=display=='none'?'':'none'"%/a/td
            td width="12" class="button"a href="#" onClick="MM_showHideLayers('results','','inherit')"X/a/td
          /tr
      /table/td
    /tr
    tr
      td height="20" bordercolor="#eeeeee"input name="url" type="text" value="http://www.google.com/search?q=ezlee" size="100"
      a href="#" onclick="mainframe.location=url.value"Search/a/td
    /tr
    tr id="resultswin"
      td height="318" valign="top" class="navframe"aiframe name="mainframe" id="mainframe" src="http://www.google.com/search?q=ezlee" width="100%" height="100%" frameborder="0" scrolling="auto"font color="#FF0000"Welcome!/font/aiframe/td
    /tr
    tr
      td height="14" class="statusbar"Ready!/td
          /tr
  /table
  br
/div
scriptsetTimeout("loadwin('results')",2000)/script
/body
/html

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)
展开更多 50%)
分享

猜你喜欢

经典的带阴影的可拖动的浮动层

Web开发
经典的带阴影的可拖动的浮动层

利用DW的DragLayer轻松实现可拖动层

Web开发
利用DW的DragLayer轻松实现可拖动层

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

拖动层

Web开发
拖动层

JS+CSS打造可拖动的聊天窗口层

Web开发
JS+CSS打造可拖动的聊天窗口层

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

Painter 8 浮动层的魔力(3)

Painter
Painter 8 浮动层的魔力(3)

Painter 8 浮动层的魔力(2)

Painter
Painter 8 浮动层的魔力(2)

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

JavaScript TO HTML 转换

JavaScript TO HTML 转换

『VC++技术内幕』学习笔记(2)

『VC++技术内幕』学习笔记(2)
下拉加载更多内容 ↓