请问当鼠标放到某个图片上时,跟随鼠标弹出个框框的效果是怎么实现的?(100分)

  • 主题发起人 主题发起人 kunkun571
  • 开始时间 开始时间
K

kunkun571

Unregistered / Unconfirmed
GUEST, unregistred user!
如题
这个效果在很多魔兽世界网站上可以看到
http://games.enet.com.cn/zhuanti/wow/battlegrounds/rewards-alterac.shtml
比如上面这个链接,当把鼠标放在物品的图标上时,就能出现窗口。
 
可以给hint赋值,
在MouseMove事件中自己写程序
 
hint里填入你的网填
再把showhint设为true;就OK
 
又学了一招
 
是的,在MouseMove事件中弹出窗口,或绘图画框.
 
请问这个是JSP/Servlet板块吧?怎么楼上几位的回答貌似是delphi的呢?确切的说应该是用javascript实现的网页效果吧
 
var oPopup = window.createPopup();
//创建一个弹出页
var oPopupBody = oPopup.document.body;
//弹出页的<body>
oPopupBody.innerHTML = 'Test PopupHtml';
//弹出页的内容,可以包含Html代码
oPopup.show(event.x + 5, event.y + 5, 240, 143,do
cument.body);
//显示弹出页(X坐标,Y坐标,Width,Height,所属页)
 
to ANiDelphi:
谢谢,你的方法我研究了,以下是我根据你说的改的一个代码
<!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot;
&quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;>
<html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;>
<script language=&quot;javascript&quot;
type=&quot;text/javascript&quot;>
var popup =createPopup();
function yidong()
{
var winstr=&quot;<div bgcolor=/&quot;#bbbbbb/&quot;><form method=/&quot;post/&quot;
name=/&quot;test/&quot;><table align=/&quot;center/&quot;
border=/&quot;0/&quot;
bgcolor=/&quot;bbbbbb/&quot;><tr><td class=/&quot;labels/&quot;><label>用户名:</label></td><td ><input name=/&quot;u1/&quot;
type=/&quot;text/&quot;
></td></tr><tr><td class=/&quot;labels/&quot;><label>密码:</label></td><td><input name=/&quot;u2/&quot;
type=/&quot;password/&quot;
></td></tr><tr><td colspan=/&quot;2/&quot;
align=/&quot;center/&quot;><input name=/&quot;b1/&quot;
type=/&quot;submit/&quot;
value=/&quot;提交/&quot;></td></tr></table></form></div>&quot;
var opopup = popup.document.body;
opopup.style.background=&quot;lightyellow&quot;;
opopup.style.border=&quot;solid blue 1px&quot;;
opopup.innerHTML=winstr;
popup.show(event.clientX,event.clientY,200,100 ,(document.body));
//参数分别是left,top,width,height
}
function likai()
{
var opopup = popup.document.body;
parent.popup.hide();
}
</script>
<head>
<meta http-equiv=&quot;Content-Type&quot;
content=&quot;text/html;
charset=gb2312&quot;
/>
<title>无标题文档</title>
</head>
<body> <img src=&quot;http://images.yobo.com/upload/sinimg/83f76ae679416295938c9c73432e524dded47020.jpg&quot;
width=&quot;214&quot;
height=&quot;500&quot;
onmousemove=&quot;yidong()&quot;
onmouseout=&quot;likai()&quot;
/>
<br />
</body>
</html>
这个方法目前有个问题
当鼠标在图片上的时候,网页似乎失去焦点了
另外就是event.x不行,我用了event.clintX
 
呵呵,N久没做网页了,这是在以前的文件里找的。
看了下魔兽的网站,可能是用了浮动的<div>等,你自己看看魔兽的javascript吧
地址:http://games.enet.com.cn/zhuanti/wow/js/tooltip.js
全文如下:
/***********************************************
* Cool DHTML tooltip script- Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
var offsetxpoint=16 //Customize x offset of tooltip
var offsetypoint=-16 //Customize y offset of tooltip
var ie=document.all
var ns6=document.getElementById && !document.all
var enabletip=false
if (ie||ns6)
var contentobj=document.all?do
cument.all[&quot;contents&quot;] :do
cument.getElementById?do
cument.getElementById(&quot;contents&quot;) : &quot;&quot;
var tipTextObj=document.all?do
cument.all[&quot;tooltipText&quot;] :do
cument.getElementById?do
cument.getElementById(&quot;tooltipText&quot;) : &quot;&quot;
var dynamicTipObj=document.all?do
cument.all[&quot;dynamicTooltip&quot;] :do
cument.getElementById?do
cument.getElementById(&quot;dynamicTooltip&quot;) : &quot;&quot;
function ietruebody(){
return (document.compatMode &&do
cument.compatMode!=&quot;BackCompat&quot;)?do
cument.documentElement :do
cument.body
}
function ddrivetip(thetext, thecolor, thewidth)
{
if (ns6||ie)
{
if (thetext.indexOf(&quot;~&quot;) >= 0) tipTextObj.innerHTML = dynamicTipObj.innerHTML;
else
{
tipTextObj.innerHTML = thetext;
tipTextObj.style.color=thecolor;
}
if (typeof thewidth==&quot;undefined&quot;)
{
contentobj.style.width=tipTextObj.clientWidth+&quot;px&quot;;
contentobj.style.height=tipTextObj.clientHeight+&quot;px&quot;;
}
else
{
contentobj.style.width=thewidth+&quot;px&quot;;
}
enabletip=true;
return false
}
}
function positiontip(callingEvent)
{
if (enabletip)
{
if (!callingEvent) callingEvent = window.event;
var currentX = callingEvent.clientX + 14;
var currentY = callingEvent.clientY + 14 +do
cument.body.scrollTop;
contentobj.style.left = currentX+&quot;px&quot;;
contentobj.style.top = currentY+&quot;px&quot;;
contentobj.style.visibility = &quot;visible&quot;;
tipTextObj.style.visibility = &quot;visible&quot;;
//document.getElementById(&quot;mousePositionIndicator&quot;).innerHTML = currentX + &quot;x, &quot;
+ currentY + &quot;y&quot;;
}
}
function posit_iontip(e)
{
if (enabletip)
{
var curX=(ns6)?e.pageX : event.x+ietruebody().scrollLeft;
var curY=(ns6)?e.pageY : event.y+ietruebody().scrollTop;
//Find out how close the mouse is to the corner of the window
var rightedge=ie&&!window.opera? ietruebody().clientWidth-event.clientX-offsetxpoint : window.innerWidth-e.clientX-offsetxpoint-20
var bottomedge=ie&&!window.opera? ietruebody().clientHeight-event.clientY-offsetypoint : window.innerHeight-e.clientY-offsetypoint-20
var leftedge=(offsetxpoint<0)? offsetxpoint*(-1) : -1000
//if the horizontal distance isn't enough to accomodate the width of the context menu
if (rightedge<contentobj.offsetWidth)
{
//move the horizontal position of the menu to the left by it's width
contentobj.style.left=ie? ietruebody().scrollLeft+event.clientX-contentobj.offsetWidth+&quot;px&quot;
: window.pageXOffset+e.clientX-contentobj.offsetWidth+&quot;px&quot;
}
else
if (curX<leftedge)
{
contentobj.style.left=&quot;5px&quot;
}
else
{
//position the horizontal position of the menu where the mouse is positioned
contentobj.style.left=curX+offsetxpoint+&quot;px&quot;
}
//same concept with the vertical position
if (bottomedge<contentobj.offsetHeight)
{
contentobj.style.top=ie? ietruebody().scrollTop+event.clientY-contentobj.offsetHeight-offsetypoint+&quot;px&quot;
: window.pageYOffset+e.clientY-contentobj.offsetHeight-offsetypoint+&quot;px&quot;
contentobj.style.visibility=&quot;visible&quot;
tipTextObj.style.visibility=&quot;visible&quot;
}
else
{
contentobj.style.top=curY+offsetypoint+&quot;px&quot;
contentobj.style.visibility=&quot;visible&quot;
tipTextObj.style.visibility=&quot;visible&quot;
}
}
//for debugging purposes
//if (!e) e = window.event;
//document.getElementById(&quot;mousePositionIndicator&quot;).innerHTML = callingEvent.clientX + &quot;x, &quot;
+ callingEvent.clientY + &quot;y&quot;;
}
function hideddrivetip(){
if (ns6||ie){
enabletip=false
contentobj.style.visibility=&quot;hidden&quot;
contentobj.style.left=&quot;-1000px&quot;
contentobj.style.backgroundColor=''
contentobj.style.width=''
}
}
document.onmousemove=positiontip
 
看了一下你贴的js文件,又在这个网页里看了一些其他的js文件,果然是茅塞顿开。大致情况是通过tooltip.js文件实现了鼠标的onmousemove事件,当事件触发时候显示一个innerHTML,这个innerHTML又通过其他几个js文件(rewards-alteracvalley.js,rewardstable.js)来进行生成。不过对于他们之间的运转调用还是很晕,还得再好好看看。
在这献上一个在网上找的效果页,做了一点修改,原理应该一样的,大家可以看看效果,希望和大家共同讨论:)
<html>
<head>
<script language=&quot;javascript&quot;>
var tipTimer;
function locateObject(n, d) { //v3.0
var p,i,x;
if(!d) d=document;
if((p=n.indexOf(&quot;?&quot;))>0&&parent.frames.length) {//类似于截取了一段‘?’之前的字符串
d=parent.frames[n.substring(p+1)].document;
n=n.substring(0,p);
}
if(!(x=d[n])&&d.all) x=d.all[n];
for (i=0;!x&&i<d.forms.length;i++) x=d.forms[n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=locateObject(n,d.layers.document);
return x;
}
function hideTooltip(object)
{
if (document.all)
{
locateObject(object).style.visibility=&quot;hidden&quot;
locateObject(object).style.left = 1;
locateObject(object).style.top = 1;
return false
}
else
if (document.layers)
{
locateObject(object).visibility=&quot;hide&quot;
locateObject(object).left = 1;
locateObject(object).top = 1;
return false
}
else
return true
}
function showTooltip(object,e, tipContent, backcolor, bordercolor, textcolor, displaytime)
{
window.clearTimeout(tipTimer)
if (document.all)
{
//locateObject(object).style.top=document.body.scrollTop+event.clientY+20
locateObject(object).style.top=event.clientY+20
locateObject(object).innerHTML='<table style=&quot;font-family: Verdana,Tahoma, Arial, Helvetica, sans-serif;
font-size: 11px;
border: '+bordercolor+';
border-style: solid;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
background-color: '+backcolor+'&quot;
width=&quot;10&quot;
border=&quot;0&quot;
cellspacing=&quot;1&quot;
cellpadding=&quot;1&quot;><tr><td nowrap><font style=&quot;font-family: Verdana,Tahoma, Arial, Helvetica, sans-serif;
font-size: 11px;
color: '+textcolor+'&quot;>'+unescape(tipContent)+'</font></td></tr></table> '
if ((e.x + locateObject(object).clientWidth) > (document.body.clientWidth +do
cument.body.scrollLeft))
{
locateObject(object).style.left = (document.body.clientWidth +do
cument.body.scrollLeft) - locateObject(object).clientWidth-10;
}
else
{
locateObject(object).style.left=document.body.scrollLeft+event.clientX
}
locateObject(object).style.visibility=&quot;visible&quot;
tipTimer=window.setTimeout(&quot;hideTooltip('&quot;+object+&quot;')&quot;, displaytime);
return true;
}
else
if (document.layers)
{
locateObject(object).document.write('<table width=&quot;10&quot;
border=&quot;0&quot;
cellspacing=&quot;1&quot;
cellpadding=&quot;1&quot;><tr bgcolor=&quot;'+bordercolor+'&quot;><td><table width=&quot;10&quot;
border=&quot;0&quot;
cellspacing=&quot;0&quot;
cellpadding=&quot;2&quot;><tr bgcolor=&quot;'+backcolor+'&quot;><td nowrap><font style=&quot;font-family: Verdana,Tahoma, Arial, Helvetica, sans-serif;
font-size: 11px;
color: '+textcolor+'&quot;>'+unescape(tipContent)+'</font></td></tr></table></td></tr></table>')
locateObject(object).document.close()
locateObject(object).top=e.y+20
if ((e.x + locateObject(object).clip.width) > (window.pageXOffset + window.innerWidth))
{
locateObject(object).left = window.innerWidth - locateObject(object).clip.width-10;
}
else
{
locateObject(object).left=e.x;
}
locateObject(object).visibility=&quot;show&quot;
tipTimer=window.setTimeout(&quot;hideTooltip('&quot;+object+&quot;')&quot;, displaytime);
return true;
}
else
{
//http://games.enet.com.cn/zhuanti/wow/images/battleground/alteracvalley/superiorhealingdraught.gif
return true;
}
}
</script>
</head>
<body>
<div id=&quot;dHTMLToolTip&quot;
style=&quot;position: absolute;
visibility: hidden;
width:10;
height: 10;
z-index: 1000;
left: 0;
top: 0&quot;></div>
<p><span onMouseMove=&quot;showTooltip('dHTMLToolTip',event, '文字提示信息部分<br>大家号啊。。<img src=http://www.sucn.com/pic/styles/main/images/logo.gif>', '#fffff2','#000000','#000000','20000')&quot;
onMouseOut=&quot;hideTooltip('dHTMLToolTip')&quot;>dfsafsdafsdafasf</span>
</p>
<p><img src=&quot;http://images.yobo.com/upload/sinimg/83f76ae679416295938c9c73432e524dded47020.jpg&quot;
width=&quot;162&quot;
height=&quot;356&quot;
onMouseMove=&quot;showTooltip('dHTMLToolTip',event, '文字提示信息部分<br>大家号啊。。<img src=http://www.sucn.com/pic/styles/main/images/logo.gif>', '#fffff2','#004562','#000000','20000')&quot;
onMouseOut=&quot;hideTooltip('dHTMLToolTip')&quot;></p>
</body>
<html>
 
Hint属性
可以给hint赋值,
在MouseMove事件中自己写程序
 
此问题结贴。
 
后退
顶部