还是要首先引用JQ框架。
然后来看看效果：(连接添加不上)只能暂时看哈图片， 具体效果可参见我博客左方“My Box”中的“玩游戏”：
下面代码中有具体注释。
复制代码 代码如下:
<div>
</div>
<div>
<a href="javascript:;" alt="WASD键控制小女孩移动，方向键控制小男孩的移动，不同颜色的陷阱只能容纳不同颜色的人通过哦！">深林冰火人</a>
<a href="javascript:;" alt="鼠标点击抓东西。">智商球3</a>
<a href="javascript:;" alt="鼠标操作，移动鼠标控制机械手移动，点击左键释放磁吸力抓住货物。">船长的运输船</a>
</div>
<script type="text/javascript" src="https://www.jb51.net/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#thegameBox a").mousemove(function(ev){
var _Imgsrc="/upload/201109/20110901202741350.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="'https://www.jb51.net/+_Imgsrc+'" alt="" /><br />'+'<font color="blue">操作方法：</font>'+_Ways+'');//给提示层里面添加内容并传入参数
}).mouseout(function(){
$("#_gameinfo").hide();//鼠标离开元素提示层隐藏
})
})
</script>
您可能感兴趣的文章: