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>
然后来看看效果:(连接添加不上)只能暂时看哈图片, 具体效果可参见我博客左方“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 提示信息显示后自动消失的具体实现
- qTip2 精致的基于jQuery提示信息插件
- 基于JQuery的浮动DIV显示提示信息并自动隐藏
- JQuery浮动DIV提示信息并自动隐藏的代码
- 基于jQuery的弹出警告对话框美化插件(警告,确认和提示)
- 基于jquery的气泡提示效果
- jQuery 表单验证插件formValidation实现个性化错误提示
- jquery删除提示框弹出是否删除对话框
- Jquery实现搜索框提示功能示例代码
- jQuery封装的屏幕居中提示信息代码
相关文章
jQuery Validate格式验证功能实例代码(包括重名验证)
本文通过实例代码给大家介绍了jQuery Validate格式验证功能,代码中包括重名验证的方法,需要的的朋友参考下吧2017-07-07jquery上传插件fineuploader上传文件使用方法(jquery图片上传插件)
这篇文章主要介绍了jquery插件fineuploader上传文件很用方法2013-12-12jQuery实现提交按钮点击后变成正在处理字样并禁止点击的方法
这篇文章主要介绍了jQuery实现提交按钮点击后变成正在处理字样并禁止点击的方法,涉及jQuery中val与attr方法的使用技巧,需要的朋友可以参考下2015-03-03
最新评论