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脚本学习 比较实用的基础
Sep 07 Javascript
JavaScript实现自动对页面上敏感词进行屏蔽的方法
Jul 27 Javascript
深入浅析JSON.parse()、JSON.stringify()和eval()的作用详解
Apr 03 Javascript
详解微信小程序开发之下拉刷新 上拉加载
Nov 24 Javascript
简单易懂的天气插件(代码分享)
Feb 04 Javascript
十大 Node.js 的 Web 框架(快速提升工作效率)
Jun 30 Javascript
vue中各组件之间传递数据的方法示例
Jul 27 Javascript
浅谈关于angularJs中使用$.ajax的注意点
Aug 12 Javascript
JavaScript选取(picking)和反选(rejecting)对象的属性方法
Aug 16 Javascript
详解bootstrap用dropdown-menu实现上下文菜单
Sep 22 Javascript
AngularJS与后端php的数据交互方法
Aug 13 Javascript
vue数据更新UI不刷新显示的解决办法
Aug 06 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
支持中文字母数字、自定义字体php验证码代码
2012/02/27 PHP
php数据类型判断函数有哪些
2013/09/23 PHP
php生成缩略图填充白边(等比缩略图方案)
2013/12/25 PHP
制作安全性高的PHP网站的几个实用要点
2014/12/30 PHP
PHP简单实现冒泡排序的方法
2016/12/26 PHP
PHP-FPM 设置多pool及配置文件重写操作示例
2019/10/02 PHP
打开新窗口关闭当前页面不弹出关闭提示js代码
2013/03/18 Javascript
js使用html()或text()方法获取设置p标签的显示的值
2014/08/01 Javascript
分享一个自己动手写的jQuery分页插件
2014/08/28 Javascript
jQuery中:password选择器用法实例
2015/01/03 Javascript
纯javascript响应式树形菜单效果
2015/11/10 Javascript
Bootstrap打造一个左侧折叠菜单的系统模板(一)
2016/05/17 Javascript
Bootstrap3使用typeahead插件实现自动补全功能
2016/07/07 Javascript
springMVC结合AjaxForm上传文件
2016/07/12 Javascript
微信小程序 定义全局数据、函数复用、模版等详细介绍
2016/10/27 Javascript
关于jQuery.ajax()的jsonp碰上post详解
2017/07/02 jQuery
jQuery 循环遍历改变a标签的href(实例讲解)
2017/07/12 jQuery
JavaScript 中Date对象的格式化代码方法汇总
2017/09/06 Javascript
分享5个顶级的JavaScript Ajax组件库
2018/09/16 Javascript
VUE注册全局组件和局部组件过程解析
2019/10/10 Javascript
[01:31](回顾)杀出重围,决战TI之巅
2014/07/01 DOTA
跟老齐学Python之编写类之三子类
2014/10/11 Python
使用python采集脚本之家电子书资源并自动下载到本地的实例脚本
2018/10/23 Python
Djang的model创建的字段和参数详解
2019/07/27 Python
python3.4中清屏的处理方法
2020/07/06 Python
GUESS盖尔斯法国官网:美国时尚品牌
2016/09/23 全球购物
size?荷兰官方网站:英国高级运动鞋精品店
2020/07/24 全球购物
创先争优活动方案
2014/02/12 职场文书
三八节主持词
2014/03/17 职场文书
师德建设实施方案
2014/03/21 职场文书
创意婚礼策划方案
2014/05/18 职场文书
群众路线个人自我剖析材料
2014/10/07 职场文书
学生会部长竞选稿
2015/11/19 职场文书
解析在浏览器地址栏输入一个URL后发生了什么
2021/06/21 Servers
MySQL去除密码登录告警的方法
2022/04/20 MySQL
Valheim服务器 Mod修改安装教程 【ValheimPlus】
2022/12/24 Servers