鼠标靠近文字提示多彩注释效果_按钮时间特效_好我要网--特色网络资源网站,hao51xx-好我要嘻嘻,好多我要滴!

鼠标靠近文字提示多彩注释效果

发布时间：2009/7/10 阅读次数：5496 字体大小: 【小】【中】【大】

本代码描述：
鼠标跟随的链接提示链接提示漂亮效果，提示带有立体阴影效果，还可以跟随鼠标移动，在使用时候，你可以将JavaScript部分另存为一个单独的JS文件，使用时引入，在用到的时候A标签加入示例中的函数即可，使用方法挺简单。

代码<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>鼠标跟随的链接提示</title> <style type="text/css"> *{font:normal 14px/150% 宋体} a:link, a:visited{color:#00f; text-decoration:none} a:hover, a:active{color:#f00; text-decoration:underline} </style> <script> function wsug(e, str){ var oThis = arguments.callee; if(!str) { oThis.sug.style.visibility = hidden; document.onmousemove = null; return; } if(!oThis.sug){ var div = document.createElement(div), css = top:0; left:0; position:absolute; z-index:100; visibility:hidden; div.style.cssText = css; div.setAttribute(style,css); var sug = document.createElement(div), css= font:normal 12px/16px "宋体"; white-space:nowrap; color:#666; padding:3px; position:absolute; left:0; top:0; z-index:10; background:#f9fdfd; border:1px solid #0aa; sug.style.cssText = css; sug.setAttribute(style,css); var dr = document.createElement(div), css = position:absolute; top:3px; left:3px; background:#33ff33; filter:alpha(opacity=50); opacity:0.5; z-index:9; dr.style.cssText = css; dr.setAttribute(style,css); var ifr = document.createElement(iframe), css=position:absolute; left:0; top:0; z-index:8; filter:alpha(opacity=0); opacity:0; ifr.style.cssText = css; ifr.setAttribute(style,css); div.appendChild(ifr); div.appendChild(dr); div.appendChild(sug); div.sug = sug; document.body.appendChild(div); oThis.sug = div; oThis.dr = dr; oThis.ifr = ifr; div = dr = ifr = sug = null; } var e = e || window.event, obj = oThis.sug, dr = oThis.dr, ifr = oThis.ifr; obj.sug.innerHTML = str; var w = obj.sug.offsetWidth, h = obj.sug.offsetHeight, dw = document.documentElement.clientWidth||document.body.clientWidth; dh = document.documentElement.clientHeight || document.body.clientHeight; var st = document.documentElement.scrollTop || document.body.scrollTop, sl = document.documentElement.scrollLeft || document.body.scrollLeft; var left = e.clientX +sl +17 + w < dw + sl && e.clientX + sl + 15 || e.clientX +sl-8 - w, top = e.clientY + st +17 + h < dh + st && e.clientY + st + 17 || e.clientY + st - 5 - h; obj.style.left = left+ 10 + px; obj.style.top = top + 10 + px; dr.style.width = w + px; dr.style.height = h + px; ifr.style.width = w + 3 + px; ifr.style.height = h + 3 + px; obj.style.visibility = visible; document.onmousemove = function(e){ var e = e || window.event, st = document.documentElement.scrollTop || document.body.scrollTop, sl = document.documentElement.scrollLeft || document.body.scrollLeft; var left = e.clientX +sl +17 + w < dw + sl && e.clientX + sl + 15 || e.clientX +sl-8 - w, top = e.clientY + st +17 + h < dh + st && e.clientY + st + 17 || e.clientY + st - 5 - h; obj.style.left = left + px; obj.style.top = top + px; } }</script> </head> <body> <a href="/" onmouseover="wsug(event, www.hao51xx.com)" onmouseout="wsug(event, 0)" target="_blank">站长好地方</a><br /> <a href="/jscss/" onmouseover="wsug(event, 精品网页特效)" onmouseout="wsug(event, 0)" target="_blank">网页特效</a><br /> </body> </html>

上一篇：按钮完成复制和剪切功能代码下一篇：简洁的日历+时间+网络闹钟代码

我要评论