非常漂亮的链接提示效果 (附源码)
使用心得:1. mP.tTags = new Array("tr", "img"); //要添加提示的 标记名称
例如: mP.tTags = new Array("tr","img","a");
2. mP.useTables = false; //容器标志,使用 Div 或Table
tooltip.js
//ToogleDisplay Startfunction toggledisplay(section) {if (document.getElementById().style.display == "block") {document.getElementById().style.display = "none";document.images.src = "/uploads/toggledisplay_expand.gif";} else {document.getElementById().style.display = "block";document.images.src = "/uploads/toggledisplay_collapse.gif";}}//ToogleDisplay End//Font size control Startfunction doZoom(size) {document.getElementById("zoomtext").style.fontSize = size + "px";}//Font size control End//My Tips Srartvar mP = new Array();mP.attDesc = "title";mP.useDefStyle = false;//mP.tClass = "*";mP.tClass = "sub";mP.popupDelay = 1;mP.hideDelay = 75;mP.instPopDur = 1;mP.xOfst = 15;mP.yOfst = 15;mP.clipSteps = 10;mP.revStyle = 1;mP.revInt = 10;mP.warpSteps = 15;mP.preload = true;mP.divIds = new Array("popupcontainer", "popupcontent", "popupcontdouble", "popupbottom", "popupboxmodeltest");//mP.tTags = new Array("a", "img");//oldmP.tTags = new Array("tr", "img");mP.setAttNull = true;mP.customAtt = "hoverinfo";mP.useTables = false;mP.defZindex = 100;mP.defWidth = "200px";mP.defCSS = new Array("border", "4px solid black", "padding", "6px", "backgroundColor", "#BBBBBB", "color", "black", "fontSize", "12px", "filter", "alpha(opacity=90)", "opacity", ".90", "textAlign", "center", "width", "auto", "height", "auto");var TestW3DOM = (document.createElement && document.getElementsByTagName && document.getElementById);var pcR = new Array(), gV = new Array(), aOb = new Array();mP.revEvals = new Array(null, "\"rect(\"+(clipYTarget-aOb.clipY)+\"px, \"+(clipXTarget+aOb.clipX)+\"px, \"+(clipYTarget+aOb.clipY)+\"px, \"+(clipYTarget-aOb.clipY)+\"px)\"", "\"rect(0px, \"+(aOb.clipX*2)+\"px, \"+(clipYTarget*2)+\"px, 0px)\"", "\"rect(0px, \"+(aOb.clipX*2)+\"px, \"+(aOb.clipY*2)+\"px, 0px)\"");mP.defDesc = "", mP.edgeBufferZone = 30, pcR.hvrdObj = null, aOb.objMovd = null, aOb.clipStep = 0, aOb.warpStep = 0;aOb.popActv = false, aOb.objMovd = false, gV.xPosEval = "e.clientX + mP.xOfst", gV.activeDelay = mP.popupDelay;gV.yPosEval = "e.clientY + mP.yOfst", aOb.revInt = new Array(), aOb.prevs = new Array();addTrigger(window, "load", multipopup);function multipopup() {if (!TestW3DOM) {return;}addPopupDiv();addTrigger(document, "mousemove", movePopup);addTrigger(window, "resize", sizeUpdate);scrollUpdate();sizeUpdate();if (mP.useTables == true) {gV.targetTag = "td";} else {gV.targetTag = "div";}//alert(gV.targetTag);if (mP.tClass != "*") {var targetDivs = getElementsByClass(gV.targetTag, mP.tClass);} else {var targetDivs = new Array(document);}//alert(targetDivs.length);for (var im = 0; im < targetDivs.length; im++) {for (var st = 0; st < mP.tTags.length; st++) {var targetNodes = targetDivs.getElementsByTagName(mP.tTags);//alert("targetNodes length: " + targetNodes.length + " : " + mP.tTags);for (var i = 0; i < targetNodes.length; i++) {var toi = targetNodes.getAttribute(mP.attDesc);if (toi != null && toi != "") {targetNodes.setAttribute(mP.customAtt, toi);if (mP.setAttNull) {targetNodes.removeAttribute(mP.attDesc);}if (!addCheckTrigger(targetNodes, "mouseover", writeDescription)) {targetNodes.onmouseover = writeDescription;}if (!addCheckTrigger(targetNodes, "mouseout", clearDescription)) {targetNodes.onmouseout = clearDescription;}}}}}}function writeDescription() {var tagDescription = this.getAttribute(mP.customAtt);if (tagDescription != "") {pcR.hvrdObj = this;pcR.cDiv.innerHTML = "";pcR.cDiv.innerHTML = tagDescription;aOb.tHeight = pcR.cDiv.offsetHeight;pcR.hvrdFirst = true;if (aOb.popActv != true) {aOb.revealTimer = window.setTimeout("startrevealPopup()", gV.activeDelay);} else {if (aOb.clipStep == mP.clipSteps) {pcR.tDiv.style.clip = "rect(auto auto auto auto)";pcR.tDiv.style.visibility = "visible";pcR.hvrdFirst = false;}}if (pcR.hvrdFirst == true && mP.warpSteps > 0) {pcR.dDiv.style.height = aOb.tHeight + "px";aOb.tPrevHeight = aOb.tHeight;}window.clearTimeout(aOb.resetDelayTimer);window.clearTimeout(aOb.hidePopupTimer);}}function clearDescription() {window.clearTimeout(aOb.revealTimer);aOb.hidePopupTimer = window.setTimeout("hidePopup()", mP.hideDelay);if (aOb.revealTimer == 0) {gV.activeDelay = 0;}pcR.hvrdObj = null;aOb.resetDelayTimer = window.setTimeout("resetPopupDelay()", mP.instPopDur);aOb.tPrevHeight = aOb.tHeight;aOb.prevs = aOb.tHeight;if (aOb.warpStep != mP.warpSteps && aOb.warpStep > 0) {aOb.tPrevHeight = aOb.widthSet;}aOb.warpStep = 0;}function hidePopup() {for (i = 0; i < aOb.revInt.length; i++) {window.clearInterval(aOb.revInt);}aOb.revInt = new Array();aOb.warpStep = 0;pcR.tDiv.style.visibility = "hidden";pcR.cDiv.innerHTML = "";pcR.cDiv.innerHTML = mP.defDesc;aOb.objMovd = false;aOb.popActv = false;aOb.clipStep = 0;gV.xPosEval = "e.clientX + mP.xOfst";gV.yPosEval = "e.clientY + mP.yOfst";}function resetPopupDelay() {gV.activeDelay = mP.popupDelay;}function startrevealPopup() {if (pcR.hvrdObj != null) {aOb.revealTimer = 0;aOb.revInt = window.setInterval("revealPopup()", mP.revInt);}}function movePopup(e) {if (pcR.hvrdObj != null || aOb.popActv == true) {if (!e) {var e = window.event;}scrollUpdate();var divHeight = pcR.tDiv.offsetHeight;var divWidth = pcR.tDiv.offsetWidth;var yPos = eval(gV.yPosEval);var xPos = eval(gV.xPosEval);yPos = maximum(minimum(yPos, pcR.height - divHeight - mP.edgeBufferZone), 0);xPos = maximum(minimum(xPos, pcR.width - divWidth - mP.edgeBufferZone), 0);if (pointCollisionDetect(e.clientX, e.clientY, yPos, xPos + divWidth, yPos + divHeight, xPos, 3)) {collisionFix();aOb.yPos = eval(gV.yPosEval);aOb.xPos = eval(gV.xPosEval);} else {aOb.yPos = yPos;aOb.xPos = xPos;}pcR.tDiv.style.top = (aOb.yPos + pcR.scrolledY) + "px";pcR.tDiv.style.left = (aOb.xPos + pcR.scrolledX) + "px";aOb.objMovd = true;}}function revealPopup() {if (aOb.objMovd == true && mP.revStyle == 0) {pcR.tDiv.style.visibility = "visible";aOb.popActv = true;} else {if (aOb.objMovd == true && aOb.clipStep < mP.clipSteps) {var divHeight = pcR.tDiv.offsetHeight;var divWidth = pcR.tDiv.offsetWidth;aOb.clipStep++;if (aOb.clipStep < mP.clipSteps) {var clipYTarget = Math.ceil(divHeight / 2);var clipXTarget = Math.ceil(divWidth / 2);aOb.clipX = easeOutStepFloor(0, clipXTarget, mP.clipSteps, aOb.clipStep);aOb.clipY = easeOutStepFloor(0, clipYTarget, mP.clipSteps, aOb.clipStep);pcR.tDiv.style.clip = eval(mP.revEvals);} else {pcR.tDiv.style.clip = "rect(auto auto auto auto)";}pcR.tDiv.style.visibility = "visible";aOb.popActv = true;}}if (aOb.popActv == true && aOb.warpStep < mP.warpSteps && aOb.clipStep == mP.clipSteps && pcR.hvrdFirst != true) {aOb.warpStep++;aOb.widthSet = easeOutStepFloor(aOb.tPrevHeight, aOb.tHeight, mP.warpSteps, aOb.warpStep);pcR.dDiv.style.height = aOb.widthSet + "px";}}function pointCollisionDetect(x, y, top, right, bottom, left, boundary) {top -= boundary;bottom += boundary;left -= boundary;right += boundary;if ((x > left && x < right) && (y > top && y < bottom)) {return true;}return false;}function collisionFix() {gV.xPosEval = "e.clientX - divWidth - mP.xOfst";gV.yPosEval = "e.clientY - divHeight - mP.yOfst";}function scrollUpdate() {if (self.pageYOffset) {pcR.scrolledX = self.pageXOffset;pcR.scrolledY = self.pageYOffset;} else {if (document.documentElement && document.documentElement.scrollTop) {pcR.scrolledX = document.documentElement.scrollLeft;pcR.scrolledY = document.documentElement.scrollTop;} else {if (document.body) {pcR.scrolledX = document.body.scrollLeft;pcR.scrolledY = document.body.scrollTop;}}}}function sizeUpdate() {if (self.innerWidth) {pcR.width = self.innerWidth;pcR.height = self.innerHeight;} else {if (document.documentElement && document.documentElement.clientWidth) {pcR.width = document.documentElement.clientWidth;pcR.height = document.documentElement.clientHeight;} else {if (document.body) {pcR.width = document.body.clientWidth;pcR.height = document.body.clientHeight;}}}}function getElementsByClass(targetTag, tagClass) {var elementList = document.getElementsByTagName(targetTag);//alert("targettag: " + targetTag + " CLASS; " + tagClass);var classTag = new Array();for (var i = 0; i < elementList.length; i++) {if (elementList.className == tagClass) {//alert(elementList.className + " " + elementList.tagName);classTag = elementList;}}return classTag;}function addPopupDiv() {var ttDiv = new Array();var prefix = "";if (mP.useDefStyle == true) {prefix = "M_";}for (var i = 0; i < mP.divIds.length; i++) {if (document.getElementById(mP.divIds) != null) {document.getElementById(mP.divIds).parentNode.removeChild(document.getElementById(mP.divIds));}ttDiv = document.createElement("div");ttDiv.id = prefix + mP.divIds;ttDiv.activeStyle = getActiveStyle;}var c = new Array("margin", "padding", "border", "top", "left");for (i = 0; i < c.length; i++) {eval("ttDiv.style." + c + " = '0px'");eval("ttDiv.style." + c + " = '0px'");eval("ttDiv.style." + c + " = '0px'");}ttDiv.style.position = "relative";ttDiv.style.width = "100%";ttDiv.style.visibility = "hidden";ttDiv.style.position = "absolute";ttDiv.style.visibility = "hidden";ttDiv.style.position = "absolute";ttDiv.appendChild(ttDiv);ttDiv.appendChild(ttDiv);ttDiv.appendChild(ttDiv);document.body.appendChild(ttDiv);if (mP.warpSteps > 0) {document.body.appendChild(ttDiv);ttDiv.style.overflow = "hidden";ttDiv.style.padding = "10px";ttDiv.style.height = "100px";if (ttDiv.offsetHeight == 100) {mP.warpSteps = 0;}document.body.removeChild(ttDiv);}for (var i = 0; i < mP.divIds.length - 1; i++) {var bgIm = ttDiv.activeStyle("background-image", "backgroundImage");if (bgIm.indexOf("url") > -1 && mP.preload == true) {preLoadImage(stripURL(bgIm));}}if (window.getComputedStyle && window.getComputedStyle(ttDiv, null).getPropertyValue("background-image").indexOf("url") == -1) {ttDiv.removeChild(ttDiv);} else {if (ttDiv.currentStyle && (ttDiv.currentStyle.backgroundImage.indexOf("url") == -1 && ttDiv.currentStyle.filter.indexOf("AlphaImageLoader") == -1)) {ttDiv.removeChild(ttDiv);}}ttDiv.onmouseover = collisionFix;if (mP.useDefStyle == true) {ttDiv.style.width = mP.defWidth;ttDiv.style.zIndex = mP.defZindex;for (var i = 0; i < mP.defCSS.length; i += 2) {eval("ttDiv.style." + mP.defCSS + "='" + mP.defCSS + "'");}}pcR.cDiv = ttDiv;pcR.tDiv = ttDiv;pcR.dDiv = ttDiv;}function easeOutStepFloor(minValue, maxValue, totalSteps, actualStep) {var delta = maxValue - minValue;var radEnd = Math.PI / 2;var step = minValue + (Math.sin(((radEnd / totalSteps) * actualStep)) * delta);return Math.floor(step);}function getActiveStyle(style, stylecc) {if (window.getComputedStyle) {return window.getComputedStyle(this, null).getPropertyValue(style);}if (this.currentStyle) {return eval("this.currentStyle." + stylecc);}}function stripURL(s) {s = s.substring(s.indexOf("url(") + 4, s.lastIndexOf(")"));if (s.indexOf("\"") > -1) {s = s.substring(s.indexOf("\"") + 1, s.lastIndexOf("\""));}return s;}function addTrigger(elm, eventname, func) {if (!addCheckTrigger(elm, eventname, func)) {elm.attachEvent("on" + eventname, func);}}function addCheckTrigger(elm, eventname, func) {if (elm.addEventListener) {elm.addEventListener(eventname, func, false);return true;} else {return false;}}function preLoadImage(imageurl) {var img = new Image();img.src = imageurl;return img;}function minimum(x, y) {if (x < y) {return x;} else {return y;}}function maximum(x, y) {if (x > y) {return x;} else {return y;}}//My Tips End
页:
[1]