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 相关文章推荐
jquery如何实现锚点链接之间的平滑滚动
Dec 02 Javascript
JavaScript运行机制之事件循环(Event Loop)详解
Oct 10 Javascript
node.js中的fs.lstat方法使用说明
Dec 16 Javascript
jQuery中on()方法用法实例详解
Feb 06 Javascript
jquery实现可横向和竖向展开的动态下滑菜单效果
Aug 24 Javascript
javascript动态获取登录时间和在线时长
Feb 25 Javascript
Bootstrap对话框使用实例讲解
Sep 24 Javascript
javascript帧动画(实例讲解)
Sep 02 Javascript
微信小程序登录换取token的教程
May 31 Javascript
微信小程序之批量上传并压缩图片的实例代码
Jul 05 Javascript
对layui中表单元素的使用详解
Aug 15 Javascript
JS实现滑动拼图验证功能完整示例
Mar 29 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
东芝TOSHIBA RP-F11电路分析
2021/03/02 无线电
在WINDOWS中设置计划任务执行PHP文件的方法
2011/12/19 PHP
深入解析php中的foreach问题
2013/06/30 PHP
PHP中大于2038年时间戳的问题处理方案
2015/03/03 PHP
php实现RSA加密类实例
2015/03/26 PHP
Yii配置与使用memcached缓存的方法
2016/07/13 PHP
jquery 列表双向选择器之改进版
2013/08/09 Javascript
js写的方法实现上传图片之后查看大图
2014/03/05 Javascript
JavaScript随机生成信用卡卡号的方法
2015/04/07 Javascript
jquery滚动条插件slimScroll使用方法
2017/02/09 Javascript
js轮播图透明度切换(带上下页和底部圆点切换)
2017/04/27 Javascript
基于Vue实现的多条件筛选功能的详解(类似京东和淘宝功能)
2019/05/07 Javascript
[01:14:05]《加油DOTA》第四期
2014/08/25 DOTA
[36:17]DOTA2上海特级锦标赛 - VGL音乐会全集
2016/03/06 DOTA
[46:14]完美世界DOTA2联赛PWL S3 Magma vs INK ICE 第一场 12.11
2020/12/16 DOTA
Python中的is和==比较两个对象的两种方法
2017/09/06 Python
Python处理中文标点符号大集合
2018/05/14 Python
python中将\\uxxxx转换为Unicode字符串的方法
2018/09/06 Python
树莓派+摄像头实现对移动物体的检测
2019/06/22 Python
pytorch 使用单个GPU与多个GPU进行训练与测试的方法
2019/08/19 Python
python生成requirements.txt的两种方法
2019/09/18 Python
Python Tkinter Entry和Text的添加与使用详解
2020/03/04 Python
python读取当前目录下的CSV文件数据
2020/03/11 Python
在django中form的label和verbose name的区别说明
2020/05/20 Python
Python使用lambda抛出异常实现方法解析
2020/08/20 Python
Python文件操作及内置函数flush原理解析
2020/10/13 Python
Manjaro、pip、conda更换国内源的方法
2020/11/17 Python
css3实现input输入框颜色渐变发光效果代码
2014/04/02 HTML / CSS
div或img图片高度随宽度自适应的方法
2020/02/06 HTML / CSS
Kidsroom台湾:来自德国的婴儿用品
2017/12/11 全球购物
英国领先的露营和露营车品牌之一:OLPRO
2019/08/06 全球购物
印尼第一大家居、生活和家具电子商务:Ruparupa
2019/11/25 全球购物
法律进社区实施方案
2014/03/21 职场文书
美术教师个人总结
2015/02/06 职场文书
人生感悟经典句子
2019/08/20 职场文书
选对餐饮营销策略,营业额才会上涨
2019/08/27 职场文书