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 validator 插件增加日期比较方法
Feb 21 Javascript
jquery对单选框,多选框,文本框等常见操作小结
Jan 08 Javascript
JS+CSS实现可拖动的弹出提示框
Feb 16 Javascript
jQuery实现简单的间隔向上滚动效果
Mar 09 Javascript
js实现防止被iframe的方法
Jul 03 Javascript
VC调用javascript的几种方法(推荐)
Aug 09 Javascript
JavaScript 对象详细整理总结
Sep 29 Javascript
jquery实现折叠菜单效果【推荐】
Mar 08 Javascript
js实现简易聊天对话框
Aug 17 Javascript
详解基于vue-router的动态权限控制实现方案
Sep 28 Javascript
基于Vue2-Calendar改进的日历组件(含中文使用说明)
Apr 14 Javascript
在Angular中实现一个级联效果的下拉框的示例代码
May 20 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模板的朋友必看的很多个顶级PHP模板引擎比较分析
2008/05/26 PHP
php CI框架插入一条或多条sql记录示例
2014/07/29 PHP
javascript处理table表格的代码
2010/12/06 Javascript
JS获得QQ号码的昵称,头像,生日的简单实例
2013/12/04 Javascript
JS保留两位小数,多位小数的示例代码
2014/01/07 Javascript
js调试工具console.log()方法查看js代码的执行情况
2014/08/08 Javascript
jQuery中insertBefore()方法用法实例
2015/01/08 Javascript
JS中取二维数组中最大值的方法汇总
2016/04/17 Javascript
AngularJs表单校验功能实例代码
2017/02/09 Javascript
如何去除vue项目中的#及其ie9兼容性
2018/01/11 Javascript
详解JS数值Number类型
2018/02/07 Javascript
Vue的elementUI实现自定义主题方法
2018/02/23 Javascript
ES6基础之数组和对象的拓展实例详解
2019/08/22 Javascript
Layui实现数据表格中鼠标悬浮图片放大效果,离开时恢复原图的方法
2019/09/11 Javascript
Javascript柯里化实现原理及作用解析
2020/10/22 Javascript
跟老齐学Python之深入变量和引用对象
2014/09/24 Python
深入了解Python中pop和remove的使用方法
2018/01/09 Python
Python学习笔记之读取文件、OS模块、异常处理、with as语法示例
2019/06/04 Python
python+logging+yaml实现日志分割
2019/07/22 Python
numpy中的meshgrid函数的使用
2019/07/31 Python
关于初始种子自动选取的区域生长实例(python+opencv)
2020/01/16 Python
Windows下pycharm安装第三方库失败(通用解决方案)
2020/09/17 Python
真正了解CSS3背景下的@font face规则
2017/05/04 HTML / CSS
Viking Direct荷兰:购买办公用品
2019/06/20 全球购物
怎么可以提高数据库查询数据的速度
2014/06/28 面试题
和睦家庭事迹
2014/05/14 职场文书
食品安全承诺书范文
2014/08/29 职场文书
初婚初育证明范本
2014/11/24 职场文书
三年级学生评语大全
2014/12/26 职场文书
倡议书作文
2015/01/19 职场文书
国庆节慰问信
2015/02/15 职场文书
预备党员党支部意见
2015/06/02 职场文书
2015秋季运动会通讯稿
2015/07/18 职场文书
安全责任协议书范本
2016/03/23 职场文书
简短的人生哲理(38句)
2019/08/13 职场文书
彻底解决MySQL使用中文乱码的方法
2022/01/22 MySQL