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 相关文章推荐
用Node.js通过sitemap.xml批量抓取美女图片
May 28 Javascript
详解AngularJS Filter(过滤器)用法
Dec 28 Javascript
AngularJS 2.0入门权威指南
Oct 08 Javascript
Vue自定义指令拖拽功能示例
Feb 17 Javascript
详解Vuejs2.0 如何利用proxyTable实现跨域请求
Aug 03 Javascript
JavaScript中一些特殊的字符运算
Aug 17 Javascript
angularjs实现天气预报功能
Jun 16 Javascript
vue中使用heatmapjs的示例代码(结合百度地图)
Sep 05 Javascript
vue踩坑记-在项目中安装依赖模块npm install报错
Apr 02 Javascript
vue实现移动端轻量日期组件不依赖第三方库的方法
Apr 28 Javascript
vue路由插件之vue-route
Jun 13 Javascript
Vue实现背景更换颜色操作
Jul 17 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 常用算法和时间复杂度
2013/07/01 PHP
PHP读取文件内容后清空文件示例代码
2014/03/18 PHP
使用图灵api创建微信聊天机器人
2015/07/23 PHP
简述php环境搭建与配置
2016/12/05 PHP
通过php动态传数据到highcharts
2017/04/05 PHP
php设计模式之状态模式实例分析【星际争霸游戏案例】
2020/03/26 PHP
用JTrackBar实现的模拟苹果风格的滚动条
2007/08/06 Javascript
DHTML Slide Show script图片轮换
2008/03/03 Javascript
jquery下将选择的checkbox的id组成字符串的方法
2010/11/28 Javascript
JavaScript之HTMLCollection接口代码
2011/04/27 Javascript
JavaScript 一道字符串分解的题目
2011/08/03 Javascript
利用javascript的面向对象的特性实现限制试用期
2011/08/04 Javascript
jQuery的deferred对象使用详解
2011/08/20 Javascript
使用js获取地址栏中传递的值
2013/07/02 Javascript
JavaScript中的正则表达式简明总结
2014/04/04 Javascript
javascript中的深复制详解及实例分析
2016/12/29 Javascript
基于JavaScript实现的顺序查找算法示例
2017/04/14 Javascript
配置eslint规范项目代码风格
2019/03/11 Javascript
JavaScript实现网页留言板功能
2020/11/23 Javascript
[53:13]2014 DOTA2国际邀请赛中国区预选赛5.21 DT VS LGD-GAMING
2014/05/22 DOTA
Python使用面向对象方式创建线程实现12306售票系统
2015/12/24 Python
python实现自动登录
2018/09/17 Python
spark dataframe 将一列展开,把该列所有值都变成新列的方法
2019/01/29 Python
python实现随机加减法生成器
2020/02/24 Python
利用html5 canvas破解简单验证码及getImageData接口应用
2013/01/25 HTML / CSS
英国领先的办公用品供应商:Viking
2016/08/01 全球购物
汽车检测与维修个人求职信
2013/09/24 职场文书
餐饮投资计划书
2014/04/25 职场文书
社团活动总结报告
2014/06/27 职场文书
安全目标管理责任书
2014/07/25 职场文书
工程部主管岗位职责
2015/02/12 职场文书
员工试用期转正自我评价
2015/03/10 职场文书
六年级数学教学反思
2016/02/16 职场文书
PyQt5 QThread倒计时功能的实现代码
2021/04/02 Python
我们认为中短波广播场强仪的最佳组合
2022/04/05 无线电
Win10/Win11 任务栏替换成经典样式
2022/04/19 数码科技