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进行跨域请求
Jan 25 Javascript
jQuery源码分析-05异步队列 Deferred 使用介绍
Nov 14 Javascript
jQuery+JSON+jPlayer实现QQ空间音乐查询功能示例
Jun 17 Javascript
Node.js开发指南中的简单实例(mysql版)
Sep 17 Javascript
动态读取JSON解析键值对的方法
Jun 03 Javascript
JS动态添加选项案例分析
Oct 17 Javascript
微信小程序开发之从相册获取图片 使用相机拍照 本地图片上传
Apr 18 Javascript
解决vue单页使用keep-alive页面返回不刷新的问题
Mar 13 Javascript
vue实现移动端悬浮窗效果
Dec 01 Javascript
微信小程序之下拉列表实现方法解析(附完整源码)
Aug 23 Javascript
layer.msg()去掉默认时间,实现手动关闭的方法
Sep 12 Javascript
Vue通过WebSocket建立长连接的实现代码
Nov 05 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
超级实用的7个PHP代码片段分享
2012/01/05 PHP
php 多关键字 高亮显示实现代码
2012/04/23 PHP
Drupal7 form表单二次开发要点与实例
2014/03/02 PHP
PHP读取大文件的类SplFileObject使用介绍
2014/04/09 PHP
php中Y2K38的漏洞解决方法实例分析
2014/09/22 PHP
Mac系统下使用brew搭建PHP(LNMP/LAMP)开发环境
2015/03/03 PHP
jquery 新浪网易的评论块制作
2010/07/01 Javascript
ASP.NET jQuery 实例13 原创jQuery文本框字符限制插件-TextArea Counter
2012/02/03 Javascript
js 自动播放的实例代码
2013/11/19 Javascript
基于jquery ui的alert,confirm方案(支持换肤)
2015/04/03 Javascript
移动端JQ插件hammer使用详解
2015/07/03 Javascript
JavaScript动态创建div等元素实例讲解
2016/01/06 Javascript
jQuery插件FusionWidgets实现的Bulb图效果示例【附demo源码下载】
2017/03/23 jQuery
vue.js指令和组件详细介绍及实例
2017/04/06 Javascript
在Vue中如何使用Cookie操作实例
2017/07/27 Javascript
Vue 实时监听窗口变化 windowresize的两种方法
2018/11/06 Javascript
js实现转动骰子模型
2019/10/24 Javascript
使用axios发送post请求,将JSON数据改为form类型的示例
2019/10/31 Javascript
JavaScript中如何对多维数组(矩阵)去重的实现
2019/12/04 Javascript
vue中的使用token的方法示例
2020/03/10 Javascript
vue使用vant中的checkbox实现全选功能
2020/11/17 Vue.js
Python 变量类型及命名规则介绍
2013/06/08 Python
用python + openpyxl处理excel2007文档思路以及心得
2014/07/14 Python
Python和JavaScript间代码转换的4个工具
2016/02/22 Python
python实现员工管理系统
2018/01/11 Python
Python with语句上下文管理器两种实现方法分析
2018/02/09 Python
python virtualenv虚拟环境配置与使用教程详解
2020/07/13 Python
香港优质食材和美酒专门店:FoodWise
2017/09/01 全球购物
德国团购网站:Groupon德国
2018/03/13 全球购物
工作中的自我评价如何写好
2013/10/28 职场文书
2014年母亲节演讲稿范文
2014/05/07 职场文书
幼儿园区域活动总结
2014/05/08 职场文书
公务员四风问题对照检查材料整改措施
2014/09/26 职场文书
小学生暑假安全保证书
2015/07/13 职场文书
小学课改工作总结
2015/08/13 职场文书
《七律·长征》教学反思
2016/02/16 职场文书