鼠标移动显示漂亮ALT窗口
2009-07-30 17:14
218 查看
<!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>
<style type="text/css">
body{white-space:nowrap;}
*{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){ // http://www.hansir.cn
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:#333; 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;
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, '【天才】天才天才天才天才天才天才天才天才天才天才天才天才天才')" onmouseout="wsug(event, 0)" target="_blank">【天才】</a><br />
<a href="#" onmouseover="wsug(event, '【天才】天才天才天才天才天才天才天才天才天才天才天才天才天才')" onmouseout="wsug(event, 0)" target="_blank">【刘金】</a><br />
<a href="#" onmouseover="wsug(event, '【天才】天才天才天才天才天才天才天才天才天才天才天才天才天才')" onmouseout="wsug(event, 0)" target="_blank">【神】</a><br />
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
body{white-space:nowrap;}
*{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){ // http://www.hansir.cn
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:#333; 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;
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, '【天才】天才天才天才天才天才天才天才天才天才天才天才天才天才')" onmouseout="wsug(event, 0)" target="_blank">【天才】</a><br />
<a href="#" onmouseover="wsug(event, '【天才】天才天才天才天才天才天才天才天才天才天才天才天才天才')" onmouseout="wsug(event, 0)" target="_blank">【刘金】</a><br />
<a href="#" onmouseover="wsug(event, '【天才】天才天才天才天才天才天才天才天才天才天才天才天才天才')" onmouseout="wsug(event, 0)" target="_blank">【神】</a><br />
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 随鼠标移动的时钟非常漂亮遗憾的是只支持IE
- 自己写的基于JavaScript DOM 仿一些页面的鼠标移动显示相应区块内容
- 自己写的基于JavaScript DOM 仿一些页面的鼠标移动显示相应区块内容
- PHPCMS V9 导航条联动二级菜单（配合js css鼠标移动上去向下弹出显示二级菜单）
- eclipse调试时鼠标移动到变量上不显示值的问题
- C#中，当鼠标移动到控件上，动态显示提示内容 ToolTip
- 开机黑屏 仅仅显示鼠标 电脑黑屏 仅仅有鼠标 移动 [已成功解决]
- Flex中如何设置Slider控件，使只有鼠标移动到HSlider/VSlider时才显示游标
- html 在一个超链接上面,鼠标移动上去时,也显示一串文字,如何实现
- Eclipse debug时 鼠标移动到变量时 自动显示变量只
- Win8任务栏自动隐藏后无法显示当鼠标移动到对应的方向不显示
- eclipse debug模式下鼠标移动至变量上不显示值
- 鼠标移动到图片上，显示相关信息
- jsp js鼠标移动到指定区域显示选项卡离开时隐藏示例
- eclipse调试时鼠标移动到变量上不显示值的问题
- 当鼠标移动到div或者超链接只上时，显示相应的鼠标形状
- 五角星随鼠标移动显示的效果
- 随鼠标移动在状态栏显示地图坐标(转载)
- 百度地图开发 随着鼠标移动在状态栏显示鼠标中心的坐标
- JQuery鼠标移动上去显示预览图