设为首页 |收藏本站 |论坛搜索
登录 注册 找回密码

站长论坛

 找回密码
 注册

QQ登录

只需一步，快速开始

全国各地医院查询重量转换换算RGB颜色查询交通标志大全各类快递查询
简体繁体转换黄金价格实时走势万年历查询实时汇率转换列车时刻查询
在线翻译工具CSS中文手册HTML学习教程MySQL中文手册JavaScript中文手册
PHP安全基础手册PHP5面向对象编程教程正则表达式系统教程SQL Server精华Apache 2.2 中文手册
DOS命令全集指南windows脚本技术中文版股票行情查询历史上的今天邮编区号查询
长度转换换算货币汇率转换常用电话号码体育彩票查询手机位置查询
域名Whois信息查询谷歌PR值查询台州网站建设台州网站开发台州域名注册
天气预报查询长度转换换算器在线电子地图车牌号码查询中国百家姓查询
返回列表 ...发表新帖
查看: 9979|回复: 1
打印 上一主题 下一主题

跟随鼠标提示效果

[复制链接]
跳转到指定楼层
1#
发表于 2009-5-9 12:56:04 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
台州网址导航
效果预览：http://www.hansir.cn/tem/sample/mouse_sug.html


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';
}
}

code:

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';
}
}
跟随鼠标提示效果
分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏 转播转播 分享分享 分享淘帖
台州维博网络(www.tzweb.com)专门运用PHP+MYSQL/ASP.NET+MSSQL技术开发网站门户平台系统等。
回复

使用道具 举报

2#
 楼主| 发表于 2009-5-9 12:56:17 | 只看该作者
台州网址导航
<!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="http://www.hansir.cn" onmouseover="wsug(event, '【我的博客】http://www.hansir.cn<br />http://www.hansir.cn/blog')" onmouseout="wsug(event, 0)" target="_blank">http://www.hansir.cn</a><br />
        <a href="http://bbs.blueidea.com" onmouseover="wsug(event, '【经典论坛】http://bbs.blueidea.com')" onmouseout="wsug(event, 0)" target="_blank">http://bbs.blueidea.com</a><br />
        <a href="http://bbs.phpchina.com" onmouseover="wsug(event, '【PHP论坛】http://bbs.phpchina.com')" onmouseout="wsug(event, 0)" target="_blank">http://bbs.phpchina.com</a>
        <a href="http://www.hansir.cn" onmouseover="wsug(event, '【我的博客】http://www.hansir.cn<br />http://www.hansir.cn/blog')" onmouseout="wsug(event, 0)" target="_blank">http://www.hansir.cn</a><br />
        <a href="http://bbs.blueidea.com" onmouseover="wsug(event, '【经典论坛】http://bbs.blueidea.com')" onmouseout="wsug(event, 0)" target="_blank">http://bbs.blueidea.com</a><br />
        <a href="http://bbs.phpchina.com" onmouseover="wsug(event, '【PHP论坛】http://bbs.phpchina.com')" onmouseout="wsug(event, 0)" target="_blank">http://bbs.phpchina.com</a>
        <a href="http://www.hansir.cn" onmouseover="wsug(event, '【我的博客】http://www.hansir.cn<br />http://www.hansir.cn/blog')" onmouseout="wsug(event, 0)" target="_blank">http://www.hansir.cn</a><br />
        <a href="http://bbs.blueidea.com" onmouseover="wsug(event, '【经典论坛】http://bbs.blueidea.com')" onmouseout="wsug(event, 0)" target="_blank">http://bbs.blueidea.com</a><br />
        <a href="http://bbs.phpchina.com" onmouseover="wsug(event, '【PHP论坛】http://bbs.phpchina.com')" onmouseout="wsug(event, 0)" target="_blank">http://bbs.phpchina.com</a>
        <a href="http://www.hansir.cn" onmouseover="wsug(event, '【我的博客】http://www.hansir.cn<br />http://www.hansir.cn/blog')" onmouseout="wsug(event, 0)" target="_blank">http://www.hansir.cn</a><br />
        <a href="http://bbs.blueidea.com" onmouseover="wsug(event, '【经典论坛】http://bbs.blueidea.com')" onmouseout="wsug(event, 0)" target="_blank">http://bbs.blueidea.com</a><br />
        <a href="http://bbs.phpchina.com" onmouseover="wsug(event, '【PHP论坛】http://bbs.phpchina.com')" onmouseout="wsug(event, 0)" target="_blank">http://bbs.phpchina.com</a>
</html>
台州维博网络(www.tzweb.com)专门运用PHP+MYSQL/ASP.NET+MSSQL技术开发网站门户平台系统等。
回复 支持 反对

使用道具 举报

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 注册

本版积分规则

网站推广
关于我们
  • 台州朗动科技(Tzweb.com)拥有多年开发网站平台系统门户手机客户端等业务的成功经验。主要从事：政企网站,系统平台,微信公众号,各类小程序,手机APP客户端,浙里办微应用,浙政钉微应用、主机域名、虚拟空间、后期维护等服务，满足不同企业公司的需求，是台州地区领先的网络技术服务商!

Hi,扫描关注我

Copyright © 2005-2026 站长论坛 All rights reserved

Powered by 站长论坛 with TZWEB Update Techonolgy Support

快速回复 返回顶部 返回列表