鼠标悬浮效果,支持标签的属性 本帖最后由 chenjiebin 于 2009-08-11 15:42:48 编辑 解决方案 » 免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货 <script type="text/javascript" charset="utf-8" src="http://files.cnblogs.com/shuicaituya/mootools.js"></script><a id='tip1' href="http://mootools.net" title="mootools homepage" class="thisisatooltip">我的悬停很炫</a><script> var myTips = new Tips('.thisisatooltip'); $('tip1').store('tip:title', '<h2 style="color:red">标题</h2>'); $('tip1').store('tip:text', '<div>这是我的正文</div>');</script>可以模拟,先给你个能用的例子,我懒的写,你自己看吧 <html><head> <meta content="MSHTML 6.00.2800.1586" name="GENERATOR"> <script> var Class = { create: function() { return function() { this.initialize.apply(this, arguments); } } } var $ = function(id) { return document.getElementById(id); }; var mouseTip = Class.create(); ///* mouseTip.prototype = { initialize: function() { var mao = this; mao.randomId = ((new Date().valueOf()) * Math.random() + '').replace(/./g, ''); }, randomId: null, object: null, //指定div跟随的object content: null, //指定div中的内容 width: '100px', height: '30px', getElementpos: function() { var mao = this; var o = mao.object if (o) { var t = o.offsetTop; var l = o.offsetLeft; var w = o.offsetWidth; var h = o.offsetHeight; while (o = o.offsetParent) { t += o.offsetTop; l += o.offsetLeft; } t += h; return { top: t, left: l, width: w, height: h }; } return null; }, show: function() { var mao = this; var o = mao.object; var t = mao.getElementpos().top, l = mao.getElementpos().left, w = mao.getElementpos().width, h = mao.getElementpos().height; var parent = document.createElement('div'); //主层 var ifr = document.createElement('iframe'); //用来覆盖窗体元素的iframe var div = document.createElement('div'); //用来装载提示内容的层 div.id = 'div' + mao.randomId; with (div.style) { position = 'absolute'; width = mao.width; height = mao.height; top = '0px'; left = '0px'; zIndex = '10000'; padding = '5px'; overflowX = "hidden"; overflowY = "auto"; }; div.innerHTML = mao.content; ifr.id = 'ifr' + mao.randomId; ifr.scrolling = 'no'; with (ifr.style) { position = "absolute"; width = mao.width; height = mao.height; top = "0px"; left = "0px"; border = "none"; zIndex = "-1"; } parent.id = 'parent' + mao.randomId; with (parent.style) { position = "absolute"; left = l; top = t; width = mao.width; height = mao.height; padding = "0px"; border = "none"; zIndex = "1"; } parent.appendChild(ifr); parent.appendChild(div); document.body.appendChild(parent); }, hide: function() { var mao = this; var o = $('parent' + mao.randomId); if (o) { document.body.removeChild(o); } } } //*/ var mao = new mouseTip(); mao.content = "<span style='color:red;'>链接</span>"; show = function(object) { mao.object = object; mao.show(); }; hide = function(object) { mao.object = object; mao.hide(); }; </script></head><body> <input id="btnMouseOver" onmouseout="hide(this);" onmouseover="show(this);" type="button" value="把鼠标移过来" /> <a onmouseout="hide(this);" onmouseover="show(this);">把鼠标移过来</a></body></html>想起来有藏了这么个东西,随便看看…… 难道没有其他的方法了吗?我记的我看过个代码,标签里没有onmouseover,有个自定义属性titleContent,该属性值包含标签,也有title属性,title属性为空。鼠标悬浮时一样能显示出titleContent的内容,并能解析标签。 javascript 读取csproj(其实就是xml文件)文件产生乱码 向表格写东西的问题! [集方法]今天做了一个多类切换导航效果 急等关于一个程序里的难懂句式(在线) 树形menu简单问题 100分求助frame边框设置的菜问题 frame动态改变noresize的方法?(100分) 有关汉字多少的问题?HELP? 表单提交问题,在线等待!!! 困惑!怎样让<input>,<select>在同一个地方交替出现?? 用javascript如何获得某个表格中的图片ID 关于JS动态传递参数的问题~
<a id='tip1' href="http://mootools.net" title="mootools homepage" class="thisisatooltip">我的悬停很炫</a>
<script>
var myTips = new Tips('.thisisatooltip');
$('tip1').store('tip:title', '<h2 style="color:red">标题</h2>');
$('tip1').store('tip:text', '<div>这是我的正文</div>');
</script>可以模拟,先给你个能用的例子,我懒的写,你自己看吧
<html>
<head>
<meta content="MSHTML 6.00.2800.1586" name="GENERATOR"> <script>
var Class = {
create: function() {
return function() {
this.initialize.apply(this, arguments);
}
}
} var $ = function(id) {
return document.getElementById(id);
}; var mouseTip = Class.create(); ///*
mouseTip.prototype = {
initialize: function() {
var mao = this;
mao.randomId = ((new Date().valueOf()) * Math.random() + '').replace(/./g, '');
}, randomId: null, object: null, //指定div跟随的object content: null, //指定div中的内容 width: '100px', height: '30px', getElementpos: function() {
var mao = this; var o = mao.object
if (o) {
var t = o.offsetTop;
var l = o.offsetLeft;
var w = o.offsetWidth;
var h = o.offsetHeight;
while (o = o.offsetParent) {
t += o.offsetTop;
l += o.offsetLeft;
}
t += h;
return { top: t, left: l, width: w, height: h };
}
return null;
}, show: function() {
var mao = this;
var o = mao.object;
var t = mao.getElementpos().top, l = mao.getElementpos().left, w = mao.getElementpos().width, h = mao.getElementpos().height; var parent = document.createElement('div'); //主层
var ifr = document.createElement('iframe'); //用来覆盖窗体元素的iframe
var div = document.createElement('div'); //用来装载提示内容的层 div.id = 'div' + mao.randomId;
with (div.style) {
position = 'absolute';
width = mao.width;
height = mao.height;
top = '0px';
left = '0px';
zIndex = '10000';
padding = '5px';
overflowX = "hidden";
overflowY = "auto";
};
div.innerHTML = mao.content; ifr.id = 'ifr' + mao.randomId;
ifr.scrolling = 'no';
with (ifr.style) {
position = "absolute";
width = mao.width;
height = mao.height;
top = "0px";
left = "0px";
border = "none";
zIndex = "-1";
} parent.id = 'parent' + mao.randomId;
with (parent.style) {
position = "absolute";
left = l;
top = t;
width = mao.width;
height = mao.height;
padding = "0px";
border = "none";
zIndex = "1";
}
parent.appendChild(ifr);
parent.appendChild(div); document.body.appendChild(parent);
}, hide: function() {
var mao = this;
var o = $('parent' + mao.randomId);
if (o) {
document.body.removeChild(o);
}
}
}
//*/ var mao = new mouseTip();
mao.content = "<span style='color:red;'>链接</span>";
show = function(object) {
mao.object = object;
mao.show();
};
hide = function(object) {
mao.object = object;
mao.hide();
};
</script></head>
<body>
<input id="btnMouseOver" onmouseout="hide(this);" onmouseover="show(this);" type="button"
value="把鼠标移过来" />
<a onmouseout="hide(this);" onmouseover="show(this);">把鼠标移过来</a>
</body>
</html>想起来有藏了这么个东西,随便看看……
我记的我看过个代码,标签里没有onmouseover,
有个自定义属性titleContent,该属性值包含标签,
也有title属性,title属性为空。
鼠标悬浮时一样能显示出titleContent的内容,并能解析标签。