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 相关文章推荐
JS返回上一页实例代码通过图片和按钮分别实现
Aug 16 Javascript
详解JavaScript中的Unescape()和String() 函数
Nov 09 Javascript
原生 JS Ajax,GET和POST 请求实例代码
Jun 08 Javascript
jQuery 获取页面li数组并删除不在数组中的key
Aug 02 Javascript
很实用的js选项卡切换效果
Aug 12 Javascript
React-Native使用Mobx实现购物车功能
Sep 14 Javascript
详解ES6 系列之异步处理实战
Oct 26 Javascript
微信小程序 腾讯地图SDK 获取当前地址实现解析
Aug 12 Javascript
layui table设置某一行的字体颜色方法
Sep 05 Javascript
JavaScript逻辑运算符相关总结
Sep 04 Javascript
react使用antd表单赋值,用于修改弹框的操作
Oct 29 Javascript
js+html+css实现手动轮播和自动轮播
Dec 30 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
yii2 modal弹窗之ActiveForm ajax表单异步验证
2016/06/13 PHP
PHP自动补全表单的两种方法
2017/03/06 PHP
php实现留言板功能(代码详解)
2017/03/28 PHP
jQuery下通过$.browser来判断浏览器.
2011/04/05 Javascript
基于jquery实现等比缩放图片
2014/12/03 Javascript
javascript实现切换td中的值
2014/12/05 Javascript
jQuery中is()方法用法实例
2015/01/06 Javascript
javascript常用方法总结
2015/05/14 Javascript
jQuery+css实现的切换图片功能代码
2016/01/27 Javascript
jQuery+css实现的时钟效果(兼容各浏览器)
2016/01/27 Javascript
Node.js DES加密的简单实现
2016/07/07 Javascript
JS键盘版计算器的制作方法
2016/12/03 Javascript
JavaScript中创建对象的7种模式详解
2017/02/21 Javascript
React中的refs的使用教程
2018/02/13 Javascript
实战node静态文件服务器的示例代码
2018/03/08 Javascript
微信小程序如何获取手机验证码
2018/11/04 Javascript
基于 jQuery 实现键盘事件监听控件
2019/04/04 jQuery
python Django框架实现自定义表单提交
2016/03/25 Python
pycharm使用matplotlib.pyplot不显示图形的解决方法
2018/10/28 Python
详解Python的三种可变参数
2019/05/08 Python
python 爬取马蜂窝景点翻页文字评论的实现
2020/01/20 Python
Python unittest 自动识别并执行测试用例方式
2020/03/09 Python
详解如何修改jupyter notebook的默认目录和默认浏览器
2021/01/24 Python
CSS3 选择器 基本选择器介绍
2012/01/21 HTML / CSS
领导干部培训感言
2014/01/23 职场文书
《花木兰》教学反思
2014/04/09 职场文书
综合办公室主任岗位职责
2014/04/13 职场文书
影子教师研修方案
2014/06/14 职场文书
爱护公共设施倡议书
2014/08/29 职场文书
学位证书委托书
2014/09/30 职场文书
2014年店长工作总结
2014/11/17 职场文书
小型婚礼主持词
2015/06/30 职场文书
大学升旗仪式主持词
2015/07/04 职场文书
机关单位2016年法制宣传日活动总结
2016/04/01 职场文书
Python带你从浅入深探究Tuple(基础篇)
2021/05/15 Python
详解Laravel制作API接口
2021/05/31 PHP