学步园

（虽然是很基本的东西，但为什么很基本的方法就可以实现的东西有些人偏偏还要去追求复杂高深难懂的呢？这里只是交流而已。）

。。。。还是要首先引用JQ框架。

然后来看看效果：(连接添加不上)只能暂时看哈图片， 具体效果可参见我博客左方“My Box”中的“玩游戏”：

下面代码中有具体注释。

再来看看代码：

<div id="_gameinfo" style="width:158px; border:1px #FFC solid; background-color:#FFF; position:fixed; z-index:101; display:none;padding:1px;"> 
 </div>
 <div id="thegameBox" style="text-align:center;">
<a href="javascript:;" alt="WASD键控制小女孩移动，方向键控制小男孩的移动，不同颜色的陷阱只能容纳不同颜色的人通过哦！" name="binghuoren">深林冰火人</a> 
<a href="javascript:;" alt="鼠标点击抓东西。" name="zhishangqiu">智商球3</a> 
<a href="javascript:;" alt="鼠标操作，移动鼠标控制机械手移动，点击左键释放磁吸力抓住货物。" name="yunshuchuan">船长的运输船</a> 
</div>
 <script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$("#thegameBox a").mousemove(function(ev){
	var _Imgsrc="http://images.cnblogs.com/cnblogs_com/jq520/318502/o_"+$(this).attr("name")+".jpg";//这里需要将元素name设置和你的图片名字一样
			var _Ways=$(this).attr("alt");//获取当前鼠标指着的元素的alt
			$("#_gameinfo").show();//显示提示层
				if(!ev){ev=window.event;};//检测是否为IE
				document.getElementById("_gameinfo").style.left=(ev.clientX+10)+"px";//设置提示信息left为鼠标的X轴距离+10px
				document.getElementById("_gameinfo").style.top=(ev.clientY+10)+"px";//设置提示信息top为鼠标的X轴距离+10px
				$("#_gameinfo").html('<img src="'+_Imgsrc+'" alt="" width="158" height="117" style="margin-bottom:3px;" /><br />'+'<font color="blue">操作方法：</font>'+_Ways+'');//给提示层里面添加内容并传入参数
			}).mouseout(function(){
				$("#_gameinfo").hide();//鼠标离开元素提示层隐藏
			})
	})
</script>

以上的JS代码也可以用JQ里面的插件机制封装成插件，直接调用方法就可以使用了：

(function($) {
	$.fn.yourName=function(){//定义你想要的方法名
			$(this).mousemove(function(ev){
			$("body").append('<div id="info" style="width:162px; border:1px #E3EFFE solid; background-color:#E3EFFE; display:none; position:fixed; z-index:101; padding:2px 1px 5px;"> </div>'); //把原来在代码里面加入的info提示层换到这里动态添加提示层，这里面也可以修改提示层样式。
			var _imgsrc="http://images.cnblogs.com/cnblogs_com/jq520/318502/o_"+$(this).attr("name")+".jpg";
			var _ways=$(this).attr("alt");
			$('#info').show();
				if(!ev){ev=window.event;};
				document.getElementById("info").style.left=(ev.clientX+5)+"px";
				document.getElementById("info").style.top=(ev.clientY+25)+"px";
				$('#info').html('<div style="position:absolute; width:22px; height:14px; top:-13px; left:5px; background:url(http://images.cnblogs.com/cnblogs_com/jq520/318502/o_arrow.png) no-repeat;"> </div><img src="'+_imgsrc+'" alt="" width="158" height="117" style="margin-bottom:3px; border:2px #FFF solid;" /><br />'+'<font color="blue">操作方法：</font>'+_ways+'');
			}).mouseout(function(){
				$('#info').hide();
			});
	};
})(jQuery);
	$(document).ready(function(){
		$("a").yourName();//直接调用方法
	})

文章出处：红油小生

 http://www.colorff.com