<!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>无标题文档</title> <script type="text/javascript"> //全局变量定义 var maxZIndex = 0; //层最大数值 var allTip = new Array; //存储所有的纸条 var allClose = new Array; //所有关闭按钮 var allTipNum = 0; //纸条总数 var allCloseNum = 0; //关闭按钮总数 var tipTag = "div"; //纸条显示所用的html Tag var tipClass = "tips"; //纸条显示所用Tag 的class var closeClass = "close"; //关闭按钮css类 var areaWidth = 0; //展示区宽度 var areaHeight = 0; //展示区高度 var areaBaseX = 0; //展示区基X var areaBaseY = 0; //展示区基Y var areaID = "area"; //展示区ID var isIE = document.all ? true : false; //是否是IE浏览器标识 var isMouseDown = false; //鼠标被按下的标记 var currentTip; //当前被点中的Tip var currentTipID; //当前被点中的Tip的ID var currentClose; //当前关闭按钮 var MouseX; //鼠标点下的X坐标 var MouseY; //鼠标点下的Y坐标 /************************************************ * 功能:获取所有的纸条 * * 函数名:getAllTip *************************************************/ function getAllTip() { var allTag = document.getElementsByTagName(tipTag); //根据纸条使用的html标签获取所有的标签以供筛选 var allTagLen = allTag.length; //数组AllTag的长度 for (var i = 0; i < allTagLen; i++) { if (allTag[i].className == tipClass) { //删选出纸条 allTip[allTipNum] = allTag[i]; allTipNum++; } else if (allTag[i].className == closeClass) { allClose[allCloseNum] = allTag[i]; allCloseNum++; } } } /************************************************ * 功能:获取最大的z-index * 注意:z-index要写在标签内部中 * 写在(外部)css样式表无法获取 * 函数名:getMaxZIndex *************************************************/ function getMaxZIndex() { for (var i = 0; i < allTipNum; i++) { var curZ = parseInt(allTip[i].style.zIndex); if (curZ > maxZIndex) { maxZIndex = curZ; } } } /************************************************ * 功能:获取显示区的大小 * * 函数名:getAreaSize *************************************************/ function getAreaSize() { var par = null; if (allTipNum > 0) { par = allTip[0].parentElement; alert(par.className); areaHeight = par.style.height; areaWidth = par.style.width; } } /************************************************ * 将目标块前置 * 参数:为目标块id * 函数名:takTipToFront *************************************************/ function takeTipToFront(tip) { var curZ = parseInt(tip.style.zIndex); if (isNaN(curZ) || curZ < maxZIndex) { tip.style.zIndex = ++maxZIndex; } } //关闭 function closeTip(obj) { var tip = ""; while (obj) { if (obj.className == tipClass) { tip = obj.parentNode; break; } else { obj = obj.parentNode; } } if (tip) { tip.style.display = "none"; } //alert(tip); isMouseDown = false; currentClose = ""; currentTip = ""; } /************************************************ * 随机打乱纸条 * * 函数名:randomShowTip *************************************************/ function randomShowTip() { var area = document.getElementById(areaID); areaBaseX = area.offsetTop; //容器基X areaBaseY = area.offsetLeft; //容器基Y areaHeight = area.offsetHeight; //容器高 areaWidth = area.offsetWidth; //容器宽 var tipWidth; var tipHeight; if (allTipNum > 0) { for (var i = 0; i < allTipNum; i++) { if (allTip[i].style.display != "none") { tipWidth = allTip[i].offsetWidth; tipHeight = allTip[i].offsetHeight; var r1 = Math.random(); var r2 = Math.random(); var diffx = Math.ceil((areaWidth - tipWidth - 15) * r1); //至少有15px的边距 var diffy = Math.ceil((areaHeight - tipHeight - 20) * r2); if (diffx < 15) { diffx += 15; } if (diffy < 20) { diffy += 20; } allTip[i].style.left = areaBaseX + diffx + "px"; allTip[i].style.top = areaBaseY + diffy + "px"; } } } } /************************************************ * 处理通用的(在任何位置)鼠标按下事件 * * 函数名:processMouseDown *************************************************/ function processMouseDown() { document.onmousedown = function(e) { var e = e ? e : event; if (e.button == (isIE ? 1 : 0)) { isMouseDown = true; } if (isMouseDown && currentTip && !currentClose) { takeTipToFront(currentTip); if (isIE) { currentTip.filters.alpha.opacity = 30; } else { currentTip.style.opacity = 0.3; } } } } /************************************************ * 处理通用的(在任何位置)鼠标放开事件 * * 函数名:processMouseUp *************************************************/ function processMouseUp() { document.onmouseup = function(e) { isMouseDown = false; if (currentTip) { if (isIE) { currentTip.releaseCapture(); currentTip.filters.alpha.opacity = 100; } else { window.releaseEvents(currentTip.MOUSEMOVE); currentTip.style.opacity = 1; } } currentTip = ""; currentClose = ""; } } /************************************************ * 处理纸条移动 * *************************************************/ function processMoveTip() { document.onmousemove = function(e) { var e = e ? e : event; if (isMouseDown && currentTip && !currentClose) { var mrx = e.clientX - MouseX; var mry = e.clientY - MouseY; currentTip.style.left = parseInt(currentTip.style.left) + mrx + "px"; currentTip.style.top = parseInt(currentTip.style.top) + mry + "px"; MouseX = e.clientX; MouseY = e.clientY; } } } /************************************************ * 功能:纸条点击事件发生后准备相关参数, * 供其他时间调用 * * 函数名:eventReady *************************************************/ function eventReady() { for (var i = 0; i < allTipNum; i++) { allTip[i].onmousedown = function(e) { var e = e ? e : event; currentTip = this; currentTipID = this.getAttribute("id"); currentTip.style.left = currentTip.offsetLeft + "px"; currentTip.style.top = currentTip.offsetTop + "px"; MouseX = e.clientX; MouseY = e.clientY; if (isIE) { currentTip.setCapture(); } else { window.captureEvents(Event.MOUSEMOVE); } } //var closeico = allTip.childNode } for (var i = 0; i < allCloseNum; i++) { allClose[i].onclick = function() { currentClose = this; closeTip(currentClose); } } } /************************************************ * onload运行多函数加载器 * 功能:添加多个函数到window.onload事件中 * 要加载的函数无参 * 参数:fun为要增加的函数名 * 函数名:addLoadEvent *************************************************/ function addLoadEvent(fun) { var oldload = window.onload; if (typeof window.onload == 'function') { window.onload = function() { oldload(); fun(); } } else { window.onload = fun; } } //下面添加装载时运行的函数,顺序不能变 addLoadEvent(getAllTip); addLoadEvent(getMaxZIndex); addLoadEvent(randomShowTip); addLoadEvent(eventReady); addLoadEvent(processMouseDown); addLoadEvent(processMouseUp); addLoadEvent(processMoveTip); </script> <style type="text/css"> body { margin: 0; } .container { /*position: absolute;*/ margin: 50px; width: 1200px; height: 600px; background: #000; } .tips { position: absolute; height: 160px; width: 260px; border: 2px #FFF solid; background: #8C60B5; cursor: move; filter: alpha(opacity=100); /*ie*/ opacity: 1; /*firefox*/ } #tip1 { top: 200px; left: 300px; } #tip2 { top: 250px; left: 450px; } .close { float: right; margin-right: 5px; margin-top: 5px; width: 12px; height: 12px; background: url(images/tips/close.png) no-repeat; } .closeico { border: 0px; } </style> </head> <body> <div class="container" id="area"> <div class="tips" id="tip1" style="z-index: 10;"> <div class="close" title="关闭"> </div> 123</div> <div class="tips" id="tip2" style="z-index: 2;"> <div class="close" title="关闭"> </div> 456</div> </div> </body> </html>