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

 更新时间:2011年09月01日 20:30:08   作者:  
虽然是很基本的东西,但为什么很基本的方法就可以实现的东西有些人偏偏还要去追求复杂高深难懂的呢?这里只是交流而已
还是要首先引用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中的jQuery()方法用法分析

    jQuery中的jQuery()方法用法分析

    这篇文章主要介绍了jQuery中的jQuery()方法用法,以实例形式较为详细的分析jQuery()方法的四种常见语法结构与用法技巧,具有一定的参考借鉴价值,需要的朋友可以参考下
    2014-12-12
  • Jquery插件easyUi实现表单验证示例

    Jquery插件easyUi实现表单验证示例

    这篇文章主要介绍了Jquery插件easyUi实现表单验证示例,需要的朋友可以参考下
    2015-12-12
  • 浅谈jquery上下滑动的注意事项

    浅谈jquery上下滑动的注意事项

    下面小编就为大家带来一篇jquery上下滑动的注意事项。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-10-10
  • 通过XMLHttpRequest和jQuery实现ajax的几种方式

    通过XMLHttpRequest和jQuery实现ajax的几种方式

    AJAX大家已经都知道了,是为了实现异步通讯,提高用户体验度,而将很多旧知识(XML,DOM,JavaScript,HTML,Jquery,Css……)重新融合的一个新的知识框架。而,XMLHttpRequest对象则是其中的重重之中,本篇文章主要给大家介绍通过XMLHttpRequest和jQuery实现ajax的几种方式
    2015-08-08
  • jQuery实现颜色打字机的完整代码

    jQuery实现颜色打字机的完整代码

    这篇文章主要介绍了jQuery实现颜色打字机的完整代码,代码简单易懂,非常不错,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-03-03
  • jquery之empty()与remove()区别说明

    jquery之empty()与remove()区别说明

    要用到移除指定元素的时候,发现empty()与remove([expr])都可以用来实现。可仔细观察效果的话就可以发现。
    2010-09-09
  • jQuery实现对网页节点的增删改查功能示例

    jQuery实现对网页节点的增删改查功能示例

    这篇文章主要介绍了jQuery实现对网页节点的增删改查功能,涉及jQuery针对网页DOM节点的获取、属性修改等相关操作技巧,需要的朋友可以参考下
    2017-09-09
  • BootStrap 可编辑表Table格

    BootStrap 可编辑表Table格

    这篇文章主要介绍了BootStrap 可编辑表格的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-11-11
  • JQuery遍历元素的后代和同胞实现方法

    JQuery遍历元素的后代和同胞实现方法

    下面小编就为大家带来一篇JQuery遍历元素的后代和同胞实现方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-09-09
  • jquery validate表单验证的基本用法入门

    jquery validate表单验证的基本用法入门

    这篇文章主要为大家介绍了jquery validate表单验证的基本用法入门,jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求,感兴趣的小伙伴们可以参考一下
    2016-01-01

最新评论