<br> function showToolTip(e,text){<br> if(document.all)e = event;</p> <pre><code> var obj = document.getElementById('bubble_tooltip'); var obj2 = document.getElementById('bubble_tooltip_content'); obj2.innerHTML = text; obj.style.display = 'block'; var st = Math.max(document.body.scrollTop,document.documentElement.scrollTop); if(navigator.userAgent.toLowerCase().indexOf('safari')>=0)st=0; var leftPos = e.clientX - 100; if(leftPos<0)leftPos = 0; obj.style.left = leftPos + 'px'; obj.style.top = e.clientY - obj.offsetHeight -1 + st + 'px'; } function hideToolTip() { document.getElementById('bubble_tooltip').style.display = 'none'; } </script> </code></pre> <p></head><br> <body></p> <div id="bubble_tooltip"> <div class="bubble_top"><span></span></div> <div class="bubble_middle"><span id="bubble_tooltip_content">Content is comming here as you probably can see.Content is comming here as you probably can see.</span></div> <div class="bubble_bottom"></div> </div> <div class="main1"> <div class="shang"><a href="#" title="" onmouseover="showToolTip(event,'经验:当你装修当你装修当你装修当你装修当你装修当你装修当你装修当你装修当你装修当你装修');return false" onmouseout="hideToolTip()" ><img src="/image/jy.png" alt=""/></a></div> <div class="main"> <div class="left1"><a href="#" title="" onmouseover="showToolTip(event,'时间:当你当你装修当你装修当你装修当你装修当你装修当你装修当你装修当你装修当你装修当你装修当你装修当你装修当你装修当你装修当你装修当你装修当你装修当你装修当你装修当你装修当你装修当你装修当你装修当你装修当你装修当你装修当你装修当你装修当你装修当你装修');return false" onmouseout="hideToolTip()" ><img src="/image/sj.png" alt=""/></a></div> <div class="right1"><a href="#" title="" onmouseover="showToolTip(event,'预算:当你');return false" onmouseout="hideToolTip()" ><img src="/image/ys.png" alt=""/></a></div> </div> <pre><code><div class="float1"><a href="#" title="" ><img src="/image/wh.png" alt=""/></a></div> </code></pre> <p></div><br> </body><br> 请高手帮我改改!!不胜感激!!</p>
你把改变tip显示位置的js改一下:
[code="java"]
function showToolTip(e,text){
if(document.all)e = event;
var obj = document.getElementById('bubble_tooltip');
var obj2 = document.getElementById('bubble_tooltip_content');
obj2.innerHTML = text;
obj.style.display = 'block';
/**
var st = Math.max(document.body.scrollTop,document.documentElement.scrollTop);
if(navigator.userAgent.toLowerCase().indexOf('safari')>=0)st=0;
var leftPos = e.clientX - 100;
if(leftPos<0)leftPos = 0;
obj.style.left = leftPos + 'px';//改变了tip的位置
obj.style.top = e.clientY - obj.offsetHeight -1 + st + 'px';//改变了tip的位置
**/
}
[/code]
这个是你需要的吗?
你现在的效果不也是都在页面顶部不动嘛,你期望的固定不动是指什么?
[quote]
嗯,我改变啦一个固定的数值,这样以来我的三个提示框都在一个地方显示了,可是我想让这三个提示框在圆环的三个固定地方显示阿,我该怎么改阿?
[/quote]
我看不到你说的圆环,要不你把整个例子打包发上来。
我觉得如果你需要tip显示在某个固定的地方,可以通过样式设置来完成,比如设置绝对定位,或者相对你说的圆环进行相对定位。
[quote]
我发张图给你阿,我要让经验的提示框往下展开,另外两个分别往两边展开,还要弄一点缓动效果
[/quote]
这种动画效果,我觉得还是使用工具实现比较容易。你可以参考一下jquery,看看里面的方面能否实现你要的效果。
[url]http://api.jquery.com/animate/[/url]
[quote]
要使用jquery要注意些什么呢,那个js要怎么调用阿,我看了一下好像都是调用一大片js阿?
[/quote]
你没用过吗?很简单,你只需要页面引入改js,然后调用你需要的函数就好了,我上面放给你的链接中就有调用的例子。
如果你以前没写过js,那要写这些动画效果是比较困难的,我还是建议你学习一下jquery,这样提供工作效率,如果真要深入学习,等完成工作以后再慢慢学。
你可以在目标对象上增加hover事件来实现,jquery有hover函数来实现这个,再通过FadeTo函数来实现淡出的动画效果,具体函数的使用,你可以看看jquery的api
你要把完整的样式,图片都提交上来呀,不然,我哪里看的到效果,怎么改呢!!!
[code="java"]
JQuery Tip Show
<br> $(function() {<br> $('a.tip-show').hover(function() {<br> $('#bubble_tooltip_content').text($(this).attr('tip'));<br> $('#bubble_tooltip').fadeIn(1000);<br> } , function() {<br> $('#bubble_tooltip').fadeOut();<br> });<br> });<br>
Content is comming here as you probably can see.Content is comming here as you probably can see.
[quote]怎么不理我拉阿? [/quote]
我让你把全部代码给我,我就能看到效果好测试,你又不发。
再说,我也不是时时刻刻都有时间回答问题啊。