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 获取屏幕各种宽高的方法(浏览器兼容)
May 15 Javascript
js实现倒计时(距离结束还有)示例代码
Jul 24 Javascript
js面向对象的写法
Feb 19 Javascript
第一次动手实现bootstrap table分页效果
Sep 22 Javascript
angularjs ui-router中路由的二级嵌套
Mar 10 Javascript
基于vue2.x的电商图片放大镜插件的使用
Jan 22 Javascript
vue后台管理之动态加载路由的方法
Aug 13 Javascript
详解vue中router-link标签所必备了解的属性
Apr 15 Javascript
原生javascript中this几种常见用法总结
Feb 24 Javascript
用云开发Cloudbase实现小程序多图片内容安全监测的代码详解
Jun 07 Javascript
微信小程序基于ColorUI构建皮皮虾短视频去水印组件
Nov 04 Javascript
Nest.js散列与加密实例详解
Feb 24 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
syphon 虹吸式咖啡冲泡冲煮倒水的得与失
2021/03/03 冲泡冲煮
一个php作的文本留言本的例子(三)
2006/10/09 PHP
php获取mysql版本的几种方法小结
2008/03/25 PHP
CentOS 7.2 下编译安装PHP7.0.10+MySQL5.7.14+Nginx1.10.1的方法详解(mini版本)
2016/09/01 PHP
PHP中函数gzuncompress无法使用的解决方法
2017/03/02 PHP
简单谈谈PHP面向对象之标识对象
2017/06/27 PHP
PHP替换Word中变量并导出PDF图片的实现方法
2020/11/26 PHP
javascript下查找父节点的简单方法
2007/08/13 Javascript
jQuery UI Datepicker length为空或不是对象错误的解决方法
2010/12/19 Javascript
jQuery1.6 正式版发布并提供下载
2011/05/05 Javascript
js读取注册表的键值示例
2013/09/25 Javascript
触屏中的JavaScript事件分析
2015/02/06 Javascript
详解@angular/cli 改变默认启动端口两种方式
2018/11/29 Javascript
vue component 中引入less文件报错 Module build failed
2019/04/17 Javascript
微信小程序里引入SVG矢量图标的方法
2019/09/20 Javascript
Vue-cli项目部署到Nginx服务器的方法
2019/11/01 Javascript
JavaScript定时器常见用法实例分析
2019/11/15 Javascript
JS绘图Flot如何实现动态可刷新曲线图
2020/10/16 Javascript
Python实现利用最大公约数求三个正整数的最小公倍数示例
2017/09/30 Python
Python3学习urllib的使用方法示例
2017/11/29 Python
python实现把二维列表变为一维列表的方法分析
2019/10/08 Python
python获取全国城市pm2.5、臭氧等空气质量过程解析
2019/10/12 Python
jupyter notebook 调用环境中的Keras或者pytorch教程
2020/04/14 Python
Django实现内容缓存实例方法
2020/06/30 Python
Python连接Impala实现步骤解析
2020/08/04 Python
SmartBuyGlasses丹麦:网上购买名牌太阳镜、眼镜和隐形眼镜
2016/10/01 全球购物
印度排名第一的蛋糕、鲜花和礼品送货:Winni
2019/08/02 全球购物
产品质量承诺书范文
2014/03/27 职场文书
我的中国梦演讲稿小学篇
2014/08/19 职场文书
安全施工责任书
2014/08/25 职场文书
群众路线组织生活会发言材料
2014/10/17 职场文书
李白故里导游词
2015/02/12 职场文书
2015年宣传工作总结
2015/04/08 职场文书
党员反邪教心得体会
2016/01/15 职场文书
Mysql文件存储图文详解
2021/06/01 MySQL
python中的class_static的@classmethod的巧妙用法
2021/06/22 Python