创建可拖动带阴影的浮动层

152 浏览量更新于2024-08-29 收藏 32KB PDF 举报

该资源是一个实现经典带阴影的可拖动浮动层的HTML页面示例。页面使用了JavaScript来处理窗口大小变化时的重载和元素的动态显示与隐藏。在网页开发中，创建可拖动的浮动层是一种常见的交互设计，它允许用户通过鼠标拖动来移动页面上的某个部分，常用于对话框、提示框或设置面板等。这个示例中，浮动层具有阴影效果，增加了视觉层次感和专业性。 HTML 部分包括标准的文档类型声明（`<!DOCTYPE HTML>`），定义了页面为HTML4.01过渡类型。接着是`<html>`、`<head>`和`<body>`标签，其中`<title>`定义了页面标题为"MyPixbot"，`<meta>`标签设置了字符编码为ISO-8859-1。 JavaScript 代码部分包含了两个主要功能：`MM_reloadPage`和`MM_findObj`。`MM_reloadPage`函数用于处理浏览器窗口大小改变时的页面重载。在老版本的Netscape Navigator 4中，如果窗口尺寸改变，该函数会重新加载页面以保持页面布局的一致性。对于其他支持`onresize`事件的浏览器，当窗口尺寸不等于之前记录的尺寸时，也会触发页面重载。 `MM_findObj`函数则是一个通用的查找DOM对象的函数，它可以根据名称在当前文档或嵌套框架中查找元素。首先尝试直接获取指定名称的对象，如果找不到，则遍历所有表单元素和`<layer>`（在旧版Netscape中使用）以及通过`getElementById`方法查找。这个函数对于处理早期浏览器中不完全支持DOM操作的情况非常有用。 `MM_showHideLayers`函数未在提供的内容中完整展示，但通常用于处理层的显示和隐藏，可能涉及到JavaScript操作CSS属性如`style.display`来改变元素的可见状态。标签中提到的"border"可能与浮动层的边框样式有关，"onclick"是JavaScript事件处理，用于响应用户的点击行为，"parseint"是JavaScript中的函数，用于将字符串转换为整数，这在处理用户输入或者计算时可能会用到，而"table"可能指的是页面中包含的表格元素。这个资源提供了创建可拖动且有阴影效果的浮动层的基础结构，利用JavaScript实现了窗口大小调整时的动态响应，并包含了一些早期浏览器兼容性的处理。这样的技术对于理解和实践Web前端开发，尤其是了解历史上的浏览器兼容性问题有一定的参考价值。

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

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>

<html>

<head>

<title>MyPixbot</title>

<!–

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);

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&&i<d.forms.length;i++) x=d.forms[i][n];

for(i=0;!x&&d.layers&&i<d.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

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; i<layers.length; i++) allLayers[i]=layers[i];

for (i=0; i<allLayers.length; i++) if (allLayers[i].document && allLayers[i].document.layers)

with (allLayers[i].document) for (j=0; j<layers.length; j++) allLayers[allLayers.length]=layers[j];

} else {

if (NS6) { var spns = getElementsByTagName(“span”); var all = getElementsByTagName(“div”);

for (i=0;i<spns.length;i++) if (spns[i].style&&spns[i].style.position) allLayers[allLayers.length]=spns[i];}

for (i=0;i<all.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=(cL<0)?null:curLeft-cL; curDrag.MM_bT=(cU<0)?null:curTop-cU;

curDrag.MM_bR=(cR<0)?null:curLeft+cR; curDrag.MM_bB=(cD<0)?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);

下载后可阅读完整内容，剩余4页未读，立即下载

weixin_38685882

粉丝: 6
资源: 934

创建可拖动带阴影的浮动层

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

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

经典带阴影可拖动的浮动层特效代码

MyPixbot带阴影的可拖动的浮动层

带阴影的可拖动的浮动层.rar

MyPixbot带阴影的可拖动的浮动层特效代码

MyPixbot带阴影的可拖动的浮动层.rar

javascript[超牛]带阴影的可拖动的浮动层

highslide可拖动的浮动层效果

可拖动div层，兼容IE火狐等浏览器

最新资源