欢迎来到代码驿站!

jquery

当前位置:首页 > 网页前端 > jquery

jquery 简短几句代码实现给元素动态添加及获取提示信息

时间:2021-06-07 08:54:56|栏目:jquery|点击:
还是要首先引用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="/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="'+_Imgsrc+'" alt="" width="158" height="117" style="margin-bottom:3px;" /><br />'+'<font color="blue">操作方法:</font>'+_Ways+'');//给提示层里面添加内容并传入参数
}).mouseout(function(){
$("#_gameinfo").hide();//鼠标离开元素提示层隐藏
})
})
</script>

上一篇:jQuery实现checkbox全选功能完整实例

栏    目:jquery

下一篇:jquery解析JSON数据示例代码

本文标题:jquery 简短几句代码实现给元素动态添加及获取提示信息

本文地址:http://www.codeinn.net/misctech/137156.html

推荐教程

广告投放 | 联系我们 | 版权申明

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:914707363 | 邮箱:codeinn#126.com(#换成@)

Copyright © 2020 代码驿站 版权所有