本人新手,网上找来的没有胡乱修改,请大家帮忙看看,这效果大家应该都用得到吧,但是不知道怎么改成重复多次使用的,如:提示内容1,提示内容2,提示内容3,等等。。还有就是,延迟1秒显示提示层。
<!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>ajaxtest2</title>
<style type="text/css">
<!--
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
#tagShowBox {
background-color: #EFFBFE;
font-size: 12px;
line-height: 150%;
font-family: Arial, Helvetica, sans-serif;
border: 1px solid #8AD7FB;
display: none;
}
-->
</style>
<script language="javascript">
<!--
var tagBoxWidth="100px";
var tagBoxHeight="50px";
var wittingHiddenTimer = 0;
var cWidth = parseInt(document.documentElement.clientWidth);
window.onload=function(){
createTagShowBox();
}
function $()
{
return document.getElementById(arguments[0]);
}
function showTagsearch(){
try{clearTimeout(wittingHiddenTimer);} catch(e){}
moveTagBox();
$("tagShowBox").style.display='block';
}
function moveTagBox(){
var tagBoxLeft=getMousePos().x;
if(cWidth-tagBoxLeft<(parseInt($('tagShowBox').style.width)+2)){
agBoxLeft=cWidth-(parseInt($('tagShowBox').style.width)+20)+"px";
}else{
agBoxLeft=tagBoxLeft+"px";
}
$('tagShowBox').style.left=agBoxLeft;
var tagBoxTop=getMousePos().y;
if(parseInt(document.documentElement.clientHeight)-tagBoxTop<parseInt($('tagShowBox').style.height)){
tagBoxTop=(tagBoxTop-parseInt($('tagShowBox').style.height)-15)+"px";
}else{
tagBoxTop=(tagBoxTop+15)+"px";
}
$('tagShowBox').style.top=tagBoxTop;
}
document.onmouseover=function(){
var ev = asfman.Event().srcDom;
if(ev.name!="mytest"){
try{clearTimeout(wittingHiddenTimer);} catch(e){}
wittingHiddenTimer=setTimeout("hiddenTagShowBox()",500);
}else{
try{clearTimeout(wittingHiddenTimer);} catch(e){}
}
}
function hiddenTagShowBox(){
$("tagShowBox").style.display="none";
try{clearTimeout(wittingHiddenTimer);} catch(e){}
}
function createTagShowBox(){
var tagShowBox=document.createElement("div");
tagShowBox.id="tagShowBox";
tagShowBox.setAttribute("class","tagShowBox");
tagShowBox.setAttribute("name","mytest");
tagShowBox.style.width=tagBoxWidth;
tagShowBox.style.height=tagBoxHeight;
tagShowBox.style.position="absolute";//STYLE的内容可以直接写在CSS里
tagShowBox.innerHTML="<span id=\"Teacher\"></span>";
document.getElementsByTagName("body")[0].appendChild(tagShowBox);
}
function getMousePos(){
var ev = asfman.Event();
return {
x:ev.cltX + document.documentElement.scrollLeft - 2,
y:ev.cltY + document.documentElement.scrollTop - 2
};
}
var asfman = {};
var isIE = navigator.appName == "Microsoft Internet Explorer";
var isFF = navigator.appName == "Netscape";
asfman.Event = function()
{
var ev;
if(isIE)
{
ev = window.event;
}else if(isFF){
var f = this.Event.caller;
while(f!=null)
{
var e = f.arguments[0];
if(e&&(e.constructor==KeyboardEvent||e.constructor==MouseEvent))
{
ev = e;
break;
}
f = f.caller;
}
}
if(ev)
{
ev.srcDom = ev.srcElement || ev.target;
ev.cltX = ev.clientX || ev.pageX;
ev.cltY = ev.clientY || ev.pageY;
return ev;
}
return null;
}
//-->
</script>
</head>
<body>
<p align="left"><a href="#" name="mytest" onmouseover="showTagsearch()">左侧</a></p>
<p align="center"><a href="#" name="mytest" onmouseover="showTagsearch()">中间</a></p>
<p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
<div style="float:right;background:red"><a href="#" name="mytest" onmouseover="showTagsearch()">右侧</a></div>
</body>
</html>
<!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>ajaxtest2</title>
<style type="text/css">
<!--
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
#tagShowBox {
background-color: #EFFBFE;
font-size: 12px;
line-height: 150%;
font-family: Arial, Helvetica, sans-serif;
border: 1px solid #8AD7FB;
display: none;
}
-->
</style>
<script language="javascript">
<!--
var tagBoxWidth="100px";
var tagBoxHeight="50px";
var wittingHiddenTimer = 0;
var cWidth = parseInt(document.documentElement.clientWidth);
window.onload=function(){
createTagShowBox();
}
function $()
{
return document.getElementById(arguments[0]);
}
function showTagsearch(){
try{clearTimeout(wittingHiddenTimer);} catch(e){}
moveTagBox();
$("tagShowBox").style.display='block';
}
function moveTagBox(){
var tagBoxLeft=getMousePos().x;
if(cWidth-tagBoxLeft<(parseInt($('tagShowBox').style.width)+2)){
agBoxLeft=cWidth-(parseInt($('tagShowBox').style.width)+20)+"px";
}else{
agBoxLeft=tagBoxLeft+"px";
}
$('tagShowBox').style.left=agBoxLeft;
var tagBoxTop=getMousePos().y;
if(parseInt(document.documentElement.clientHeight)-tagBoxTop<parseInt($('tagShowBox').style.height)){
tagBoxTop=(tagBoxTop-parseInt($('tagShowBox').style.height)-15)+"px";
}else{
tagBoxTop=(tagBoxTop+15)+"px";
}
$('tagShowBox').style.top=tagBoxTop;
}
document.onmouseover=function(){
var ev = asfman.Event().srcDom;
if(ev.name!="mytest"){
try{clearTimeout(wittingHiddenTimer);} catch(e){}
wittingHiddenTimer=setTimeout("hiddenTagShowBox()",500);
}else{
try{clearTimeout(wittingHiddenTimer);} catch(e){}
}
}
function hiddenTagShowBox(){
$("tagShowBox").style.display="none";
try{clearTimeout(wittingHiddenTimer);} catch(e){}
}
function createTagShowBox(){
var tagShowBox=document.createElement("div");
tagShowBox.id="tagShowBox";
tagShowBox.setAttribute("class","tagShowBox");
tagShowBox.setAttribute("name","mytest");
tagShowBox.style.width=tagBoxWidth;
tagShowBox.style.height=tagBoxHeight;
tagShowBox.style.position="absolute";//STYLE的内容可以直接写在CSS里
tagShowBox.innerHTML="<span id=\"Teacher\"></span>";
document.getElementsByTagName("body")[0].appendChild(tagShowBox);
}
function getMousePos(){
var ev = asfman.Event();
return {
x:ev.cltX + document.documentElement.scrollLeft - 2,
y:ev.cltY + document.documentElement.scrollTop - 2
};
}
var asfman = {};
var isIE = navigator.appName == "Microsoft Internet Explorer";
var isFF = navigator.appName == "Netscape";
asfman.Event = function()
{
var ev;
if(isIE)
{
ev = window.event;
}else if(isFF){
var f = this.Event.caller;
while(f!=null)
{
var e = f.arguments[0];
if(e&&(e.constructor==KeyboardEvent||e.constructor==MouseEvent))
{
ev = e;
break;
}
f = f.caller;
}
}
if(ev)
{
ev.srcDom = ev.srcElement || ev.target;
ev.cltX = ev.clientX || ev.pageX;
ev.cltY = ev.clientY || ev.pageY;
return ev;
}
return null;
}
//-->
</script>
</head>
<body>
<p align="left"><a href="#" name="mytest" onmouseover="showTagsearch()">左侧</a></p>
<p align="center"><a href="#" name="mytest" onmouseover="showTagsearch()">中间</a></p>
<p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
<div style="float:right;background:red"><a href="#" name="mytest" onmouseover="showTagsearch()">右侧</a></div>
</body>
</html>
你看这段代码,提示层的内容写到这里tagShowBox.innerHTML="<span id=\"Teacher\">提示层的内容,</span>"; ,那么页面上的每个提示,显示的内容就都一样了,我想要的是,如链接1,提示层,链接1的提示内容
链接2,提示层,链接2的提示内容
链接3,提示层,链接3的提示内容
等等。就像下面这段代码,但是这段代码,没有延迟,没有自适应边界。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Coda Bubble Example</title>
<style type="text/css">
<!--
* {margin: 0;padding: 0;}
body {padding: 10px;}
h1 {margin: 14px 0;font-family: 'Trebuchet MS', Helvetica;}
p {margin: 14px 0;font-family: 'Trebuchet MS', Helvetica;}
.bubbleInfo {float:left;position: relative;width: 100px;}
.trigger {position: absolute;}
/* Bubble pop-up */
.popup {
position: absolute;
display: none;
z-index: 50;
border-collapse: collapse;
}
-->
</style>
<script type="text/javascript" src="http://www.codefans.net/ajaxjs/jquery1.3.2.js"></script>
<script type="text/javascript">
<!--
$(function () {
$('.bubbleInfo').each(function () {
var distance = 10;
var time = 250;
var hideDelay = 200;
var hideDelayTimer = null; var beingShown = false;
var shown = false;
var trigger = $('.trigger', this);
var info = $('.popup', this).css('opacity', 0);
$([trigger.get(0), info.get(0)]).mouseover(function () {
if (hideDelayTimer) clearTimeout(hideDelayTimer);
if (beingShown || shown) {
// don't trigger the animation again
return;
} else {
// 把所有功能放在一个函数里面
var fn = function(){
// reset position of info box
beingShown = true; info.css({
top: 25,
left: 15,
display: 'block'
}).animate({
top: '-=' + distance + 'px',
opacity: 1
}, time, 'swing', function() {
beingShown = false;
shown = true;
});
} // 延迟一秒执行fn
setTimeout(fn,1000);
}
return false;
}).mouseout(function () {
if (hideDelayTimer) clearTimeout(hideDelayTimer);
hideDelayTimer = setTimeout(function () {
hideDelayTimer = null;
info.animate({
top: '-=' + distance + 'px',
opacity: 0
}, time, 'swing', function () {
shown = false;
info.css('display', 'none');
});
}, hideDelay);
return false;
});
});
});
//-->
</script>
</head>
<body>
<ul>
<li class="bubbleInfo"><a class="trigger" href="http://www.baidu.com">111</a>
<span class="popup">
<a title="Read the release notes" href="./releasenotes.html">release notes</a><br><img src="http://www.baidu.com/img/baidu_sylogo1.gif"/>
</span>
</li>
<li class="bubbleInfo"><a class="trigger" href="http://www.baidu.com">222</a>
<span class="popup">
<a title="Read the release notes" href="./releasenotes.html">release notes11222</a>
</span>
</li>
<li class="bubbleInfo"><a class="trigger" href="http://www.baidu.com">333</a>
<span class="popup">
<a title="Read the release notes" href="./releasenotes.html">release note3333</a>
</span>
</li>
</ul>
</body>
</html>
版本1:提示内容从触发对象的 data属性中获取
<!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>ajaxtest2</title>
<style type="text/css">
<!--
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
#tagShowBox {
background-color: #EFFBFE;
font-size: 12px;
line-height: 150%;
font-family: Arial, Helvetica, sans-serif;
border: 1px solid #8AD7FB;
display: none;
}
-->
</style>
<script language="javascript">
<!--
var tagBoxWidth="100px";
var tagBoxHeight="50px";
var wittingHiddenTimer = 0;
var cWidth = parseInt(document.documentElement.clientWidth);
window.onload=function(){
createTagShowBox();
}
function $()
{
return document.getElementById(arguments[0]);
}
/*
参数:
o:我这里传的是对像,然后通过o.getAttribute("data")来获取应该显示的文本,你也可以修改为直接传入文本,然后下面做修改
*/
function showTagsearch(o){
try{clearTimeout(wittingHiddenTimer);} catch(e){}
moveTagBox();
setTimeout('$("tagShowBox").style.display=\'block\'',1000);//延时1秒显示提示层
$("Teacher").innerHTML=o.getAttribute("data");//如果传入的参数为文本,则o.getAttribute("data")改为o即可。且将触发对象的 data="提示内容" 删除即可
}
function moveTagBox(){
var tagBoxLeft=getMousePos().x;
if(cWidth-tagBoxLeft<(parseInt($('tagShowBox').style.width)+2)){
agBoxLeft=cWidth-(parseInt($('tagShowBox').style.width)+20)+"px";
}else{
agBoxLeft=tagBoxLeft+"px";
}
$('tagShowBox').style.left=agBoxLeft;
var tagBoxTop=getMousePos().y;
if(parseInt(document.documentElement.clientHeight)-tagBoxTop<parseInt($('tagShowBox').style.height)){
tagBoxTop=(tagBoxTop-parseInt($('tagShowBox').style.height)-15)+"px";
}else{
tagBoxTop=(tagBoxTop+15)+"px";
}
$('tagShowBox').style.top=tagBoxTop;
}
document.onmouseover=function(){
var ev = asfman.Event().srcDom;
if(ev.name!="mytest"){
try{clearTimeout(wittingHiddenTimer);} catch(e){}
wittingHiddenTimer=setTimeout("hiddenTagShowBox()",500);
}else{
try{clearTimeout(wittingHiddenTimer);} catch(e){}
}
}
function hiddenTagShowBox(){
$("tagShowBox").style.display="none";
try{clearTimeout(wittingHiddenTimer);} catch(e){}
}
function createTagShowBox(){
var tagShowBox=document.createElement("div");
tagShowBox.id="tagShowBox";
tagShowBox.setAttribute("class","tagShowBox");
tagShowBox.setAttribute("name","mytest");
tagShowBox.style.width=tagBoxWidth;
tagShowBox.style.height=tagBoxHeight;
tagShowBox.style.position="absolute";//STYLE的内容可以直接写在CSS里
tagShowBox.innerHTML="<span id=\"Teacher\"></span>";
document.getElementsByTagName("body")[0].appendChild(tagShowBox);
}
function getMousePos(){
var ev = asfman.Event();
return {
x:ev.cltX + document.documentElement.scrollLeft - 2,
y:ev.cltY + document.documentElement.scrollTop - 2
};
}
var asfman = {};
var isIE = navigator.appName == "Microsoft Internet Explorer";
var isFF = navigator.appName == "Netscape";
asfman.Event = function()
{
var ev;
if(isIE)
{
ev = window.event;
}else if(isFF){
var f = this.Event.caller;
while(f!=null)
{
var e = f.arguments[0];
if(e&&(e.constructor==KeyboardEvent||e.constructor==MouseEvent))
{
ev = e;
break;
}
f = f.caller;
}
}
if(ev)
{
ev.srcDom = ev.srcElement || ev.target;
ev.cltX = ev.clientX || ev.pageX;
ev.cltY = ev.clientY || ev.pageY;
return ev;
}
return null;
}
//-->
</script>
</head>
<body>
<p align="left"><a href="#" name="mytest" data="左侧提示的内容" onmouseover="showTagsearch(this)">左侧</a></p>
<p align="center"><a href="#" name="mytest" data="中间提示的内容" onmouseover="showTagsearch(this)">中间</a></p>
<p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
<div style="float:right;background:red"><a href="#" name="mytest" data="右侧提示的内容" onmouseover="showTagsearch(this)">右侧</a></div>
</body>
</html>
<!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>ajaxtest2</title>
<style type="text/css">
<!--
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
#tagShowBox {
background-color: #EFFBFE;
font-size: 12px;
line-height: 150%;
font-family: Arial, Helvetica, sans-serif;
border: 1px solid #8AD7FB;
display: none;
}
-->
</style>
<script language="javascript">
<!--
var tagBoxWidth="100px";
var tagBoxHeight="50px";
var wittingHiddenTimer = 0;
var cWidth = parseInt(document.documentElement.clientWidth);
window.onload=function(){
createTagShowBox();
}
function $()
{
return document.getElementById(arguments[0]);
}
/*
参数:
txt:要显示的文本内容
*/
function showTagsearch(txt){
try{clearTimeout(wittingHiddenTimer);} catch(e){}
moveTagBox();
setTimeout('$("tagShowBox").style.display=\'block\'',1000);//延时1秒显示提示层
$("Teacher").innerHTML=txt;
}
function moveTagBox(){
var tagBoxLeft=getMousePos().x;
if(cWidth-tagBoxLeft<(parseInt($('tagShowBox').style.width)+2)){
agBoxLeft=cWidth-(parseInt($('tagShowBox').style.width)+20)+"px";
}else{
agBoxLeft=tagBoxLeft+"px";
}
$('tagShowBox').style.left=agBoxLeft;
var tagBoxTop=getMousePos().y;
if(parseInt(document.documentElement.clientHeight)-tagBoxTop<parseInt($('tagShowBox').style.height)){
tagBoxTop=(tagBoxTop-parseInt($('tagShowBox').style.height)-15)+"px";
}else{
tagBoxTop=(tagBoxTop+15)+"px";
}
$('tagShowBox').style.top=tagBoxTop;
}
document.onmouseover=function(){
var ev = asfman.Event().srcDom;
if(ev.name!="mytest"){
try{clearTimeout(wittingHiddenTimer);} catch(e){}
wittingHiddenTimer=setTimeout("hiddenTagShowBox()",500);
}else{
try{clearTimeout(wittingHiddenTimer);} catch(e){}
}
}
function hiddenTagShowBox(){
$("tagShowBox").style.display="none";
try{clearTimeout(wittingHiddenTimer);} catch(e){}
}
function createTagShowBox(){
var tagShowBox=document.createElement("div");
tagShowBox.id="tagShowBox";
tagShowBox.setAttribute("class","tagShowBox");
tagShowBox.setAttribute("name","mytest");
tagShowBox.style.width=tagBoxWidth;
tagShowBox.style.height=tagBoxHeight;
tagShowBox.style.position="absolute";//STYLE的内容可以直接写在CSS里
tagShowBox.innerHTML="<span id=\"Teacher\"></span>";
document.getElementsByTagName("body")[0].appendChild(tagShowBox);
}
function getMousePos(){
var ev = asfman.Event();
return {
x:ev.cltX + document.documentElement.scrollLeft - 2,
y:ev.cltY + document.documentElement.scrollTop - 2
};
}
var asfman = {};
var isIE = navigator.appName == "Microsoft Internet Explorer";
var isFF = navigator.appName == "Netscape";
asfman.Event = function()
{
var ev;
if(isIE)
{
ev = window.event;
}else if(isFF){
var f = this.Event.caller;
while(f!=null)
{
var e = f.arguments[0];
if(e&&(e.constructor==KeyboardEvent||e.constructor==MouseEvent))
{
ev = e;
break;
}
f = f.caller;
}
}
if(ev)
{
ev.srcDom = ev.srcElement || ev.target;
ev.cltX = ev.clientX || ev.pageX;
ev.cltY = ev.clientY || ev.pageY;
return ev;
}
return null;
}
//-->
</script>
</head>
<body>
<p align="left"><a href="#" name="mytest" onmouseover="showTagsearch('左侧提示的内容')">左侧</a></p>
<p align="center"><a href="#" name="mytest" onmouseover="showTagsearch('中间提示的内容')">中间</a></p>
<p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
<div style="float:right;background:red"><a href="#" name="mytest" onmouseover="showTagsearch('右侧提示的内容')">右侧</a></div>
</body>
</html>LZ的js基础有待加强,都是很简单,很基础的东东
<li class="bubbleInfo"><a class="trigger" href="http://www.baidu.com">111</a>
<span class="popup">
<a title="Read the release notes" href="./releasenotes.html">release notes</a><br><img src="http://www.baidu.com/img/baidu_sylogo1.gif"/>
</span>
</li>