网页中多层效果的灵活使用

    类别:Asp.Net  贡献者:chawenhua  总点击:3368  受欢迎度:10  更新日期:2008年12月04日
简介:动态的网页技术(DHTM)已经非常普及,本文强力向大家推荐一段完整并且是经典的网页多层代码,适用于IE及NETSCAPE游览器,可实现完善的二层网页功能,具体代码请见面文后程序。   该段代码功能:打开该网页文件之后,将在正常的网页之上,浮动另外一层网页内容,可用鼠标随意移动第二层网页在第一层上的位置,并且当屏幕滚动时,第二图层可始终保持同第一图层的相对位置,效果非常好。   适用场合:有了这段代码,你可以对很...
  • 动态的网页技术(DHTM)已经非常普及,本文强力向大家推荐一段完整并且是经典的网页多层代码,适用于IE及NETSCAPE游览器,可实现完善的二层网页功能,具体代码请见面文后程序。   该段代码功能:打开该网页文件之后,将在正常的网页之上,浮动另外一层网页内容,可用鼠标随意移动第二层网页在第一层上的位置,并且当屏幕滚动时,第二图层可始终保持同第一图层的相对位置,效果非常好。   适用场合:有了这段代码,你可以对很多原有的网页进行改造,使游览者更为方便,比如可用于留言簿,第一层放置留言内容,浮动的第二层放置留言表单,这样游览留言操作和观察留言内容可在同一页面完成,并且无论屏幕滚动到什么位置,留言表单始终出现在屏幕之上,这无疑是最方便的留言系统工作方式。再比如可做为一般网页的导航条,有很多人为了编制美观的页面而放弃使用分栏导航页面方式,而使用整个页面,这样的页面每进入到一个分栏目,都要重新调入整个页面。有了这项技术,可以在原完整的页面之上,浮动一层导航菜单,即方便了导航又保持了页面的完整。另外也可以在某些页面之上浮动一个特定的图像或其它页面内容,等等,总之,这种技术应用非常广泛。  代码说明:代码段一可放置在网页的文件头处,即段。代码段二为正常的网页内容,即第一层的代码内容。第三段为第二层网页的代码段,即浮动的网页内容。代码段四为必要的控制代码,可放置在网页的最后处。灵活使用:下面的代码是完整的网页文件代码,把代码段二和代码段三换成你自己所需要的内容就可以了,但由于本网页文件涉及两个网页的制作过程,可能制作起来相当费力,并且很多网页制作工具不支持这一功能,用低级的网页工具存盘后将失去浮动效果,所以对于这样的网页最好的维护方法是分页维护,即分别编制两个完整的网页内容,之后按要求合并在一个网页文件内即可。这样向你介绍一种最可取的方法,众所周知,现在的网页技术可以实现在一个网页内调用其它网页的功能,即所谓的画中画功能,所以完全可以把代码二和代码三换成固定的调用其它网页的固定代码,之后只需要对这两个单独的页维护就可以了。具体可用下面的代码替换代码二和三: ILAYER id="ad1" visibility="hidden" height="60">     其中SRC:用于指定打开的网页地址; width:该表格占用的宽度; height:该表格点用的高度; marginwidth:网页内容在表格右侧的预留宽度; marginheight:网页内容在表格顶部预留的高度; hspace:网页右上角的横坐标; vspace:网页右上角的纵坐标; frameborder:是否显示边缘; scrolling:是否出现滚动条; 具体使用时把h1.htm分别换成不同的网页文件名。 完成的网页文件代码如下:     //代码段一 #floater {position: absolute;left: 500;top: 146;width: 125;visibility: visible;z-index: 10;} -->  //代码段一结束 浮动层  //代码段二(第一层内容,目前为空)   //代码段二结束 //代码段三(浮动层内容,目前为一简单表格)  bgcolor="#25A78D" bordercolordark="#00FFFF" bordercolorlight="#000000">  1111111 2222222    //代码段三结束  //代码段四  self.onError=null; currentX = currentY = 0; whichIt = null; lastScrollX = 0; lastScrollY = 0; NS = (document.layers) ? 1 : 0; IE = (document.all) ? 1: 0;  function heartBeat() { if(IE) { diffY = document.body.scrollTop; diffX = document.body.scrollLeft; } if(NS) { diffY = self.pageYOffset; diffX = self.pageXOffset; } if(diffY != lastScrollY) { percent = .1 * (diffY - lastScrollY); if(percent > 0) percent = Math.ceil(percent); else percent = Math.floor(percent); if(IE) document.all.floater.style.pixelTop += percent; if(NS) document.floater.top += percent; lastScrollY = lastScrollY + percent; } if(diffX != lastScrollX) { percent = .1 * (diffX - lastScrollX); if(percent > 0) percent = Math.ceil(percent); else percent = Math.floor(percent); if(IE) document.all.floater.style.pixelLeft += percent; if(NS) document.floater.left += percent; lastScrollX = lastScrollX + percent;}}   function checkFocus(x,y) { stalkerx = document.floater.pageX; stalkery = document.floater.pageY; stalkerwidth = document.floater.clip.width; stalkerheight = document.floater.clip.height; if( (x > stalkerx && x  stalkery && y else return false; } function grabIt(e) { if(IE) {whichIt = event.srcElement; while (whichIt.id.indexOf("floater") == -1) { whichIt = whichIt.parentElement; if (whichIt == null) { return true; } } whichIt.style.pixelLeft = whichIt.offsetLeft; whichIt.style.pixelTop = whichIt.offsetTop; currentX = (event.clientX + document.body.scrollLeft); currentY = (event.clientY + document.body.scrollTop); } else { window.captureEvents(Event.MOUSEMOVE); if(checkFocus (e.pageX,e.pageY)) { whichIt = document.floater; StalkerTouchedX = e.pageX-document.floater.pageX; StalkerTouchedY = e.pageY-document.floater.pageY; } } return true;} function moveIt(e) { if (whichIt == null) { return false; } if(IE) { newX = (event.clientX + document.body.scrollLeft); newY = (event.clientY + document.body.scrollTop); distanceX = (newX - currentX); distanceY = (newY - currentY); currentX = newX; currentY = newY; whichIt.style.pixelLeft += distanceX; whichIt.style.pixelTop += distanceY; if(whichIt.style.pixelTop if(whichIt.style.pixelLeft if(whichIt.style.pixelLeft > document.body.offsetWidth - document.body.scrollLeft - whichIt.style.pixelWidth - 20) whichIt.style.pixelLeft = document.body.offsetWidth - whichIt.style.pixelWidth - 20; if(whichIt.style.pixelTop > document.body.offsetHeight + document.body.scrollTop - whichIt.style.pixelHeight - 5) whichIt.style.pixelTop = document.body.offsetHeight + document.body.scrollTop - whichIt.style.pixelHeight - 5; event.returnValue = false; } else { whichIt.moveTo(e.pageX-StalkerTouchedX,e.pageY-StalkerTouchedY); if(whichIt.left if(whichIt.top if( (whichIt.left + whichIt.clip.width) >= (window.innerWidth+ self.pageXOffset-17)) whichIt.left = ((window.innerWidth+self.pageXOffset)-whichIt.clip.width)-17; if( (whichIt.top + whichIt.clip.height) >= (window.innerHeight+ self.pageYOffset-17)) whichIt.top = ((window.innerHeight+self.pageYOffset)-whichIt.clip.height)-17; return false; } return false; } function dropIt() { whichIt = null; if(NS) window.releaseEvents (Event.MOUSEMOVE); return true; }  if(NS) { window.captureEvents(Event.MOUSEUP|Event.MOUSEDOWN); window.onmousedown = grabIt; window.onmousemove = moveIt; window.onmouseup = dropIt; } if(IE) { document.onmousedown = grabIt; document.onmousemove = moveIt; document.onmouseup = dropIt; } if(NS || IE) action = window.setInterval("heartBeat()",1);  //代码段四结束

    补充本知识点暨快乐评论此文章:'做网页:网页中多层效果的灵活使用.'

踩下去0
顶上来0
复制本页网址,与你QQ/MSN上的好友分享  温馨提示:如果您喜欢本站,请把她推荐给您的朋友们!
现在有0人对本文发表评论。  »马上发布评论
现在有0人对本文发表评论。  »查看所有评论
您的姓名: * 可选项,留空即为匿名发表
评论内容:
剩余字数:  * 按 Ctrl + Enter 直接发送.
           »»我要分享做网页知识
相关文章推荐
合作伙伴: 百度站长平台 新浪读书频道 CSDN.Net YPState R灯具集 小金子学院 商录 全球网站推广库 搜狗站长平台 网页百科 更多» >>加入本站作者团
首页 | 关于我们 | 网站地图 | 合作伙伴 | 部分作者 | 会员注册 友情链接 | 联系方式 |
2004-2020 做网页学习网 鄂公网安备 42010402000280号 鄂ICP备13003030号