折腾好多天了：想做类似 http://bt3.btchina.net 中的title效果？？？

i169net1 2006-05-26 01:06:19
http://bt3.btchina.net 的title效果---------------------------------------------------

将鼠标停留在表格中的“名称”一列中时，出现一个类似Title的div块，用的是：
http://www.softcomplex.com/products/tigra_hints/download.html

他们自己改过的，很多地方不一样。
我也改了一下，改后的JS下载地址：http://www.zj36.com/div_title.zip

改动后可以将鼠标移动到div提示中...
只是我还想做到：
1、如果鼠标在div提示内的话，div始终显示不消失，除非移出div区域；
2、如何动态的获得提示内容（比如从某XML文件中获取），现在的提示内容都是静态写在hints_cfg文件中，用相应的ID来引用：
onMouseOver="myHint.show(9)" onMouseOut="myHint.hide()" -----> 其中9是ID
hints_cfg.js中HINTS_ITEMS = {...}就是预先定义好的内容。怎么在另外一个函数中，动态的向里面插入值？我想用asp.net向里面写值...
用集合？
我发现bt3的写法是：var HINTS_ITEMS = []; HINTS_ITEMS.push()...
我试着做了test.html但不成功。我对js不太了解，还是不知道具体怎么实现。


所有的问题都已记录了下来：
http://www.zj36.com/div_title.zip
请下载后，帮忙看看，谢谢！

...全文
974 22 打赏 收藏 转发到动态 举报
写回复
用AI写文章
22 条回复
切换为时间正序
请发表友善的回复…
发表回复
i169net1 2006-06-05
  • 打赏
  • 举报
 回复
谢谢，那我还是先结了吧...

最近我也在做其他事，可能这个要先放放了~
i169net1 2006-06-01
  • 打赏
  • 举报
 回复
再顶顶.........
BlueDestiny 2006-06-01
  • 打赏
  • 举报
 回复
不好意思，最近太忙了，你得先自己试着改改，把onmouseout事件去掉，根据move事件判断坐标即可了。有什么问题pm我吧
Fooo 2006-05-29
  • 打赏
  • 举报
 回复

学习
colourbear 2006-05-28
  • 打赏
  • 举报
 回复
关注
i169net1 2006-05-28
  • 打赏
  • 举报
 回复
嘿嘿...

i169net1 2006-05-27
  • 打赏
  • 举报
 回复
再顶顶~

上上楼的问题.........
sanshisong 2006-05-27
  • 打赏
  • 举报
 回复
楼主幸福呀
i169net1 2006-05-27
  • 打赏
  • 举报
 回复
谢谢...

辛苦了，我最近也是头晕的厉害，天天下班抱儿子~
呵呵...
BlueDestiny 2006-05-27
  • 打赏
  • 举报
 回复
有空我再帮你看看，最近睡得太少，头有点晕。问题不大的:D
笨笨兔兔兔兔兔 2006-05-26
  • 打赏
  • 举报
 回复
meizz 回答的问题,我的js水平可远不如他....呵呵,叫我来也木多大用的,问题应该解决了吧,最近在改我们网站的构架,实在很忙,见谅了
zj36com 2006-05-26
  • 打赏
  • 举报
 回复
谢谢：BlueDestiny(May Be I am Really never online.)

您的方法确实很方便，DIV能跟随鼠标移动，并自动变换宽度...
但无法将鼠标移动到Tip内，如果我的Tip内有个超链接，而我想点击它...
比如：
<img src="http://zi.csdn.net/300_60.gif" tips="猫扑招人<br>第二行<br><a href='http://www.163.com'>具体信息请点击这里</a>">
于是我有修改了部分：
.....略......
var hide_delay=null;
function fnHandleOver() {
var El = event.srcElement;
var Tips = El.getAttribute("tips");
if (!Tips) {fnHandleOut(); return; }
if (hide_delay) {
clearTimeout(hide_delay);
hidenow();
}
with (_tips.style) {
display = "";
left = event.clientX + 10;
top = event.clientY + 10;
}
_tips.innerHTML = Tips;
}
function fnHandleOut() {
hide_delay=setTimeout('hidenow()',6000);
}
function hidenow() {
_tips.style.display = "none";
}
.....略......


但如此修改后，再移动鼠标Tip跟随移动时，总感觉会闪烁？

另外，还有一个致命缺点：
因为我是准备用在表格中的，如：
<tr tips="哺乳动物<br><a href='XXX'>查看相关信息</a>"><td>大象</td></tr>
<tr tips="两栖动物<br><a href='XXX'>查看相关信息</a>"><td>青蛙</td></tr>
如果Tip块一直跟随着鼠标，将无法点击到超链接，因为再往上、下移就又碰到另外一行了，原先的Tip会马上消失，出来新的Tip...........

鼠标第一次移入热区(<tr>)，就确定Tip块的位置，再在同一热区内移动，不改变其位置。
这样该怎么做呢？

BlueDestiny 2006-05-26
  • 打赏
  • 举报
 回复
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document - http://www.never-online.net </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="never-online, blueDestiny">
<META NAME="Keywords" CONTENT="never-online, blueDestiny">
<META NAME="Description" CONTENT="http://www.never-online.net">
<style>
body, pre
{
font-size: 0.9em;
font-family: verdana;
}
.copyright
{
text-align: center;
font-size: 1em;
}
.tips
{
border: 1px solid #666666;
padding: 5px 10px 5px 10px;
position: absolute;
background-color: #ffffff;
filter:alpha(Opacity=80);
}
</style>
</HEAD>
<BODY>
<img src="http://zi.csdn.net/300_60.gif" tips="猫扑招人">
<SCRIPT LANGUAGE="JavaScript">
<!--
document.onmouseover = document.onmousemove = fnHandleOver;
document.onmouseout = fnHandleOut;

var _tips = document.createElement("DIV");
_tips.className = "tips";
document.body.appendChild(_tips);

function fnHandleOver() {
var El = event.srcElement;
var Tips = El.getAttribute("tips");
if (!Tips) { _tips.style.display = "none"; return; }
with (_tips.style) {
display = "";
left = event.clientX + 10;
top = event.clientY + 10;
}
_tips.innerHTML = Tips;
}
function fnHandleOut() {
_tips.style.display = "none";
}
//-->
</SCRIPT>
<h4 class="copyright"> Power By blueDestiny, never-online, <a href="http://www.never-online.net" tips="welcome to never-online's Website">http://www.never-online.net</a> </h4>
</BODY>
</HTML>
BlueDestiny 2006-05-26
  • 打赏
  • 举报
 回复
用不着这么麻烦，要实现tip，容易得很的嘛
三个事件触发句柄
等会给你写个示例
i169net1 2006-05-26
  • 打赏
  • 举报
 回复
怎么样根据鼠标位置和屏幕、窗口的尺寸，动态设定这个div的...
width: height: top: left:
我改了改，但还是不很理想，窗口缩小后，鼠标靠近边缘时div变成一个长条状？

-------------------------------------------------------------------------------------------
先取消里面的width、height属性定义：
<div id=pop style="
position: absolute;
z-index: 99;
display: none;
background-color: #FF0000"
>

再修改了JS脚本：
<script language=javascript>
document.onmousemove = f_onMouseMove;

var hide_delay=null;
var left=5;
var top=5;
function cc(tt)
{
if (hide_delay) {
clearTimeout(hide_delay);
hide();
}
var n_win_l = f_scrollLeft();
var n_win_t = f_scrollTop();
var n_x = window.n_mouseX + n_win_l + left;
var n_y = window.n_mouseY + n_win_t + top;
var hint = tt.getAttribute("alt");
var e = document.getElementById("pop");
var t = tt.offsetTop; //TT控件的定位点高
var h = tt.clientHeight; //TT控件本身的高
var l = tt.offsetLeft; //TT控件的定位点宽
var ttyp = tt.type; //TT控件的类型
while (tt = tt.offsetParent){t += tt.offsetTop; l += tt.offsetLeft;}
//e.style.top = (ttyp=="image")? t + h : t + h + 6; //层的 Y 坐标
//e.style.left = l + 1; //层的 X 坐标
var n_w = getSize(e);
var n_h = getSize(e, true);
var n_win_w = f_clientWidth()
var n_win_h = f_clientHeight();

if (n_x + n_w > n_win_w + n_win_l) n_x = n_win_w + n_win_l - n_w;
if (n_x < n_win_l) n_x = n_win_l;
if (n_y + n_h > n_win_h + n_win_t) n_y = n_win_h + n_win_t - n_h;
if (n_y < n_win_t) n_y = n_win_t;
e.style.left = n_x;
e.style.top = n_y;
e.style.display = "block"; //层显示
e.innerHTML = hint; //author: meizz
}
function getSize (id, b_hight) {
if (b_hight) {
return id.offsetHeight;
}
else {
return id.offsetWidth;
}
}
function delay()
{
hide_delay=setTimeout('hide()',2000);
}
function hide()
{
document.all.pop.style.display='none';
}
function f_onMouseMove(e_event) {
if (!e_event && window.event) e_event = window.event;
if (e_event) {
window.n_mouseX = e_event.clientX;
window.n_mouseY = e_event.clientY;
}
return true;
}
function f_scrollLeft() {
if (typeof(window.pageXOffset) == 'number')
return window.pageXOffset;
if (document.body && document.body.scrollLeft)
return document.body.scrollLeft;
if (document.documentElement && document.documentElement.scrollLeft)
return document.documentElement.scrollLeft;
return 0;
}
function f_scrollTop() {
if (typeof(window.pageYOffset) == 'number')
return window.pageYOffset;
if (document.body && document.body.scrollTop)
return document.body.scrollTop;
if (document.documentElement && document.documentElement.scrollTop)
return document.documentElement.scrollTop;
return 0;
}
function f_clientWidth() {
if (typeof(window.innerWidth) == 'number')
return window.innerWidth;
if (document.documentElement && document.documentElement.clientWidth)
return document.documentElement.clientWidth;
if (document.body && document.body.clientWidth)
return document.body.clientWidth;
return null;
}
function f_clientHeight() {
if (typeof(window.innerHeight) == 'number')
return window.innerHeight;
if (document.documentElement && document.documentElement.clientHeight)
return document.documentElement.clientHeight;
if (document.body && document.body.clientHeight)
return document.body.clientHeight;
return null;
}

</script>
i169net1 2006-05-26
  • 打赏
  • 举报
 回复
改了一下，基本满足了我的要求，呵呵...

<html><head><title>层与按钮对齐</title></head><body>
<div align=left><table border=1 width=600 height=50>
<tr align=center>
<td>
<input type=button value=ok onmouseover="cc(this)" alt="XXX提示信息一<br>第二行<br><a href='#'>更详细资料请点击</a>"
onmouseout="delay()">
</td><td>
<input type=button value=ok onmouseover="cc(this)" alt="提示信息二"
onmouseout="document.all.pop.style.display='none'">
</td><td>
<input type=button value=ok onmouseover="cc(this)" alt="提示信息三"
onmouseout="document.all.pop.style.display='none'">
</td></tr>
</table><div>

<div id=pop style="
position: absolute;
width: 120;
height: 30;
z-index: 99;
display: none;
background-color: #FF0000"
>
图层文字</div>

<script language=javascript>
var hide_delay=null;
function cc(tt)
{
if (hide_delay) {
clearTimeout(hide_delay);
hide();
}
var hint = tt.getAttribute("alt");
var e = document.getElementById("pop");
var t = tt.offsetTop; //TT控件的定位点高
var h = tt.clientHeight; //TT控件本身的高
var l = tt.offsetLeft; //TT控件的定位点宽
var ttyp = tt.type; //TT控件的类型
while (tt = tt.offsetParent){t += tt.offsetTop; l += tt.offsetLeft;}
e.style.top = (ttyp=="image")? t + h : t + h + 6; //层的 Y 坐标
e.style.left = l + 1; //层的 X 坐标
e.style.display = "block"; //层显示
e.innerHTML = hint; //author: meizz
}
function delay()
{
hide_delay=setTimeout('hide()',2000);
}
function hide()
{
document.all.pop.style.display='none';
}
</script>
</body></html>
i169net1 2006-05-26
  • 打赏
  • 举报
 回复
非常感谢，用另外一个属性值（ alt="提示信息一" ）来定义DIV的内容，很有启发。
这样我只要用asp.net给WEB控件动态加 alt 属性，就可以了...

我试试先，有问题再请教您。
再次感谢！
meizz 2006-05-26
  • 打赏
  • 举报
 回复
看看这段代码是不是对你有所帮助呢？
<html><head><title>层与按钮对齐</title></head><body>
<div align=left><table border=1 width=600 height=50>
<tr align=center>
<td>
<input type=button value=ok onmouseover="cc(this)" alt="提示信息一"
onmouseout="document.all.pop.style.display='none'">
</td><td>
<input type=button value=ok onmouseover="cc(this)" alt="提示信息二"
onmouseout="document.all.pop.style.display='none'">
</td><td>
<input type=button value=ok onmouseover="cc(this)" alt="提示信息三"
onmouseout="document.all.pop.style.display='none'">
</td></tr>
</table><div>

<div id=pop style="
position: absolute;
width: 120;
height: 30;
z-index: 99;
display: none;
background-color: #FF0000"
>
图层文字</div>

<script language=javascript>
function cc(tt)
{
var hint = tt.getAttribute("alt");
var e = document.getElementById("pop");
var t = tt.offsetTop; //TT控件的定位点高
var h = tt.clientHeight; //TT控件本身的高
var l = tt.offsetLeft; //TT控件的定位点宽
var ttyp = tt.type; //TT控件的类型
while (tt = tt.offsetParent){t += tt.offsetTop; l += tt.offsetLeft;}
e.style.top = (ttyp=="image")? t + h : t + h + 6; //层的 Y 坐标
e.style.left = l + 1; //层的 X 坐标
e.style.display = "block"; //层显示
e.innerHTML = hint; //author: meizz
}
</script>
</body></html>
ImN1 2006-05-26
  • 打赏
  • 举报
 回复
你的代码恐怕只有你才能读

其实都是值，把它们拼成一个长的HTML就能innerHTML替换了

i169net1 2006-05-26
  • 打赏
  • 举报
 回复
TO:snmr_com(麒麟厍人)

谢谢您的回复。
预定的值是写在 HINTS_ITEMS = {...} 中的。

然后JS将 HINTS_ITEMS 作为一个参数传给了另外一个JS，用innerHTML恐怕不行吧...

麻烦您下载源码，看看：
http://www.zj36.com/div_title.zip

谢谢！
加载更多回复（2）
BackTrack_3下载
BackTrack 3 Final 光盘版 Name:: bt3-final.iso Size: 695 MB Download: http://ftp.cc.uoc.gr/mirrors/linux/backtrack/bt3-final.iso MD5: f79cbfbcd25147df32f5f6dfa287c2d9 SHA1:471f0e41931366517ea8bffe910fb09a815e42c7 BackTrack 3 Final USB版 Name:: bt3final_usb.iso Size: 784 MB Download: http://cesium.di.uminho.pt/pub/backtrack/bt3final_usb.iso MD5: 5d27c768e9c2fef61bbc208c78dadf22 SHA1:3aceedea0e8e70fff2e7f7a7f3039704014e980f BackTrack 3 Final 虚拟机镜像版 Name: BACKTRACK3_VMWare.rar Size: 689 MB Download: http://ftp.heanet.ie/mirrors/backtrack/BACKTRACK3_VMWare.rar MD5: 94212d3c24cf439644f158d90094ed6a SHA1:21c9a3f9658133efff259adbe290723583b4fd82 BackTrack 3 Beta2光盘版 Name:: bt3b141207.iso Size: 701 MB Download: ftp://91.121.6.119/bt3b141207.iso - torrent md5sum : 04ed8742fc8facd1ecc8c9f6f567c116 shasum :70c33e0aa75a978b8a87a207bf488ecec8d10a87 BackTrack 3 Beta2 DVD USB版 Name:: bt3b141207.rar Size: 947 MB Download: ftp://91.121.6.119/bt3b141207.rar - torrent md5sum: bd0d8f507502787184b187f5a39288df shasum:853b80a77e3881e8084c797ba55077ead15f84ae)
超强数据恢复WN322G+是一款市场占有率十分高的USB无线网卡，由TP-LINK公司制造，采用ZD1211芯片，手头儿这块儿网卡的版本为VER1.0，其在BT3和BT4-beta下均不能正常使用，从搜索引擎的搜索结果来看，大部分持有此网卡的网友也遇到了类似问题，但也有部分网友说支持Bt4-beta，可惜我的运气不好，先后尝试了不下5块儿，均不能使用。本文地址:http://www.anywlan.com/bbs/thread-24133-1-1.html
超强数据恢复WN322G+是一款市场占有率十分高的USB无线网卡，由TP-LINK公司制造，采用ZD1211芯片，手头儿这块儿网卡的版本为VER1.0，其在BT3和BT4-beta下均不能正常使用，从搜索引擎的搜索结果来看，大部分持有此网卡的网友也遇到了类似问题，但也有部分网友说支持Bt4-beta，可惜我的运气不好，先后尝试了不下5块儿，均不能使用。本文地址:http://www.anywlan.com/bbs/thread-24133-1-1.html
无线网卡支持BT3列表
查看自己的网卡是否支持BT3，excel格式的。
JavaScript

87,902

社区成员

224,615

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章