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


Posted in Javascript onSeptember 01, 2011

还是要首先引用JQ框架。

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

下面代码中有具体注释。

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

再来看看代码:
<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>
Javascript 相关文章推荐
javascript一些实用技巧小结
Mar 18 Javascript
FireFox下XML对象转化成字符串的解决方法
Dec 09 Javascript
2种jQuery 实现刮刮卡效果
Feb 01 Javascript
js限制文本框只能输入中文的方法
Aug 11 Javascript
JS 实现倒计时数字时钟效果【附实例代码】
Mar 30 Javascript
利用浮层使select不可选的实现方法
Dec 03 Javascript
基于bootstrap的选择框插件icheck
Dec 23 Javascript
深入理解angular2启动项目步骤
Jul 15 Javascript
vue实现pdf导出解决生成canvas模糊等问题(推荐)
Oct 18 Javascript
jQuery实现的网站banner图片无缝轮播效果完整实例
Jan 28 jQuery
了解在JavaScript中将值转换为字符串的5种方法
Jun 06 Javascript
layui使用label标签的方法
Sep 14 Javascript
用javascript作一个通用向导说明
Aug 30 #Javascript
JS 无限级 Select效果实现代码(json格式)
Aug 30 #Javascript
javascript 原型继承介绍
Aug 30 #Javascript
dojo学习第二天 ajax异步请求之绑定列表
Aug 29 #Javascript
非常强大的 jQuery.AsyncBox 弹出对话框插件
Aug 29 #Javascript
新浪微博字数统计 textarea字数统计实现代码
Aug 28 #Javascript
Javascript面向对象编程(三) 非构造函数的继承
Aug 28 #Javascript
You might like
Linux下将excel数据导入到mssql数据库中的方法
2010/02/08 PHP
PHP使用NuSOAP调用Web服务的方法
2015/07/18 PHP
[原创]php使用curl判断网页404(不存在)的方法
2016/06/23 PHP
Yii2.0中的COOKIE和SESSION用法
2016/08/12 PHP
php、mysql查询当天,查询本周,查询本月的数据实例(字段是时间戳)
2017/02/04 PHP
PHP进制转换实例分析(2,8,16,36,64进制至10进制相互转换)
2017/02/04 PHP
php注册系统和使用Xajax即时验证用户名是否被占用
2017/08/31 PHP
PHP通过调用新浪API生成t.cn格式短网址链接的方法详解
2019/02/20 PHP
phpinfo的知识点总结
2019/10/10 PHP
javascript学习笔记(十九) 节点的操作实现代码
2012/06/20 Javascript
Js控制弹窗实现在任意分辨率下居中显示
2013/08/01 Javascript
js采用concat和sort将N个数组拼接起来的方法
2016/01/21 Javascript
BootstrapValidator不触发校验的实现代码
2016/09/28 Javascript
详解JavaScript模块化开发
2016/12/04 Javascript
浅谈React Native Flexbox布局(小结)
2018/01/08 Javascript
Vue项目添加动态浏览器头部title的方法
2018/07/11 Javascript
教你如何编写Vue.js的单元测试的方法
2018/10/17 Javascript
使用webpack4编译并压缩ES6代码的方法示例
2019/04/24 Javascript
JavaScript实现移动端弹窗后禁止滚动
2020/05/25 Javascript
JavaScript编写开发动态时钟
2020/07/29 Javascript
[03:59]DOTA2英雄梦之声_第07期_水晶室女
2014/06/23 DOTA
Python实现的下载8000首儿歌的代码分享
2014/11/21 Python
Windows8下安装Python的BeautifulSoup
2015/01/22 Python
python 2.7.14安装图文教程
2018/04/08 Python
Python: 传递列表副本方式
2019/12/19 Python
python关于调用函数外的变量实例
2019/12/26 Python
Django使用rest_framework写出API
2020/05/21 Python
python3.x中安装web.py步骤方法
2020/06/23 Python
使用索引(Index)有哪些需要考虑的因素
2016/10/19 面试题
销售辞职信范文
2015/03/02 职场文书
草房子读书笔记
2015/06/29 职场文书
国庆节新闻稿
2015/07/17 职场文书
2016廉洁从业学习心得体会
2016/01/19 职场文书
如何用Laravel包含你自己的帮助函数
2021/05/27 PHP
Python爬取用户观影数据并分析用户与电影之间的隐藏信息!
2021/06/29 Python
解决IDEA翻译插件Translation报错更新TTK失败不能使用
2022/04/24 Python