www.CSDN.net上，真的没有人能解答这个问题？

weimian 2008-03-16 07:37:19

http://topic.csdn.net/u/20080301/22/c151e2f8-afb6-4a36-8c80-8522dee7c323.html
以上网址中，当鼠标放到左侧人像上时，弹出一个带箭头的方框，方框内的内容可选中且随数据库而变化；当鼠标离开时，方框又消失。这是怎样实现的？

...全文

173 6 打赏收藏转发到动态举报

写回复

用AI写文章

6 条回复

切换为时间正序

请发表友善的回复…

发表回复

etionsun 2008-03-17

打赏
举报

楼上的四个字母总结的的确经典

he_8134 2008-03-17

打赏
举报

[Quote=引用 2 楼 weimian 的回复:]
1楼的，如果靠这种回答问题的方式，来混分数的话，还是适可而止吧！
[/Quote]

真正懂js的。。。直接看源代码就得了。。。

况且这道题的答案就4个字母：ajax

ajax最典型的应用。。。。

Atai-Lu 2008-03-16

打赏
举报

恩，如果要随数据库的数据变化的话，还需要结合ajax使用

Atai-Lu 2008-03-16

打赏
举报

基本原理如下，你可以拿来参考参考：



<!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>JavaScriptLab-11</title>

<style type="text/css">

<!--

body{margin-left:0px;margin-top:10px;margin-right:0px;margin-bottom:10px;}

#div{margin-left:auto;margin-right:auto;width:76%;}

#pbody{border:#88cee9 1px solid;padding:15px;}

-->

</style>

<script type="text/javascript" src="pEvent.js"></script>

</head>

<body>

<div id="div">

	<div id="pbody">

	<script type="text/javascript">

	//

	$.addEventHandler(window,"load",function(){

		var oDiv=document.getElementById("msglink");

		$.addEventHandler(oDiv,"mouseover",showMsg);

		$.addEventHandler(oDiv,"mouseout",hideMsg);

		var msg=document.getElementById("msg");

		$.addEventHandler(msg,"mouseout",hideMsg);

	});

	function showMsg(){

		var oEvent=$.getEvent();

		var oDiv=document.getElementById("msg");

		oDiv.style.visibility = "visible";

		oDiv.style.left=oEvent.clientX + 5;

		oDiv.style.top=oEvent.clientY + 5;

	}

	function hideMsg(){

		var oEvent=$.getEvent();

		var oDiv=document.getElementById("msg");

		if(oEvent.relatedTarget.id!="msg")

			oDiv.style.visibility="hidden";

	}

	</script>

	<div id="content">

		<a id="msglink">查看详细</a>

	</div>

		<div id="msg" style="position:absolute;visibility:hidden;background:#88cee9;">

			鼠标提示呀哈哈~~~~~~~

			<br/><br/><br/><br/><br/><br/><br/><br/><br/>

		</div>

	</div>

</div>

</body>

</html>

pEvent.js文件(这里用到这个文件只是为了调用事件监听函数与创建event对象，有一些代码不是必要的)：



/*检测浏览器/操作系统类型

-----------------------------start-------------------------------------*/

var sUserAgent = navigator.userAgent;

//检测是否Opera浏览器

var isOpera = sUserAgent.indexOf("Opera")>-1;

//检测IE

var isIE = sUserAgent.indexOf("compatible") > -1

			&&sUserAgent.indexOf("MSIE") > -1

			&&!isOpera;

/*检测浏览器/操作系统类型

----------------------------- end -------------------------------------*/

//纠正IE与DOM兼容浏览器的一些区别

var $ = new Object;

//首先定义addEventHandler()方法,用来代替IE与其它浏览器中的事件处理函数

//参数一:要分配事件处理的对象;参数二:处理的事件名称;参数三:要分配的函数

$.addEventHandler=function(oTarget,sEventType,fnHandler){

	if(oTarget.addEventListener){//DOM兼容浏览器

		oTarget.addEventListener(sEventType,fnHandler,false);

	}else if(oTarget.attachEvent){//IE

		oTarget.attachEvent("on" + sEventType,fnHandler);

	}else{//其它

		oTarget["on" + sEventType] = fnHandler;

	}

};

//删除的方法

$.delEventHandler=function(oTarget,sEventType,fnHandler){

	if(oTarget.removeEventListener){//DOM兼容浏览器

		oTarget.removeEventListener(sEventType,fnHandler,false);

	}else if(oTarget.detachEvent){//IE

		oTarget.detachEvent("on" + sEventType,fnHandler);

	}else{//其它

		oTarget["on" + sEventType] = null;

	}

};

//格式化event对象

$.formatEvent = function(oEvent){

	if(isIE&&isWin){

		//当事件keypress发生时,为IE创建charCode属性

		oEvent.charCode=(oEvent.type=="keypress")?oEvent.keyCode:0;

		//由于IE仅支持冒泡阶段,因此将eventPhase的值设置为2

		oEvent.eventPhase=2;

		oEvent.isChar = (oEvent.charCode>0);//按键是否有字符与之相关

		//为IE创建pageX、pageY属性

		oEvent.pageX=oEvent.clientX+document.body.scrollLeft;

		oEvent.pageY=oEvent.clientY+document.body.scrollTop;

		oEvent.preventDefault=function(){this.returnvalue=false;};

		if(oEvent.type=="mouseout")

			oEvent.relatedTarget=oEvent.toElement;

		else if(oEvent.type=="mouseover")

			oEvent.relatedTarget=oEvent.fromElement;

		oEvent.stopPropagation=function(){this.cancelBubble=true;};

		oEvent.target=oEvent.srcElement;

		oEvent.time=(new Date()).getTime();

	}

	return oEvent;

};

//获取event的方法

$.getEvent=function(oe){

	if(window.event)

		return this.formatEvent(window.event);

	else

		return $.getEvent.caller.arguments[0];

};