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 相关文章推荐
JavaScript Object的extend是一个常用的功能
Dec 02 Javascript
JS上传图片前的限制包括(jpg jpg gif及大小高宽)等
Dec 19 Javascript
Chrome扩展页面动态绑定JS事件提示错误
Feb 11 Javascript
jQuery实现下拉框多选 jquery-multiselect 的实例代码
Jul 14 Javascript
Django1.7+JQuery+Ajax验证用户注册集成小例子
Apr 08 jQuery
JS 学习总结之正则表达式的懒惰性和贪婪性
Jul 03 Javascript
关于vue-router的beforeEach无限循环的问题解决
Sep 09 Javascript
Vue render渲染时间戳转时间,时间转时间戳及渲染进度条效果
Jul 27 Javascript
快速对接payjq的个人微信支付接口过程解析
Aug 15 Javascript
基于vue和websocket的多人在线聊天室
Feb 01 Javascript
vue项目中使用particles实现粒子背景效果及遇到的坑(按钮没有点击响应)
Feb 11 Javascript
简单聊聊Vue中的计算属性和属性侦听
Oct 05 Vue.js
用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数组函数序列之array_slice() - 在数组中根据条件取出一段值,并返回
2011/11/07 PHP
php中$_POST与php://input的区别实例分析
2015/01/07 PHP
PHP使用array_merge重新排列数组下标的方法
2015/07/22 PHP
PHP 数组基本操作小结(推荐)
2016/06/13 PHP
PHP入门教程之PHP操作MySQL的方法分析
2016/09/11 PHP
基于ThinkPHP5框架使用QueryList爬取并存入mysql数据库操作示例
2019/05/25 PHP
TP5框架简单登录功能实现方法示例
2019/10/31 PHP
laravel5.6 框架邮件队列database驱动简单demo示例
2020/01/26 PHP
让jQuery Mobile不显示讨厌loading界面的方法
2014/02/19 Javascript
jQuery1.9.1针对checkbox的调整方法(prop)
2014/05/01 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 简史
2015/01/09 Javascript
javascript页面倒计时实例
2015/07/25 Javascript
seajs加载jquery时提示$ is not a function该怎么解决
2015/10/23 Javascript
关于Vue.js一些问题和思考学习笔记(2)
2016/12/02 Javascript
JavaScript函数柯里化原理与用法分析
2017/03/31 Javascript
Node.js 8 中的重要新特性
2017/06/28 Javascript
python 获取list特定元素下标的实例讲解
2018/04/09 Python
numpy.linspace 生成等差数组的方法
2018/07/02 Python
Django 重写用户模型的实现
2019/07/29 Python
Python如何将图像音视频等资源文件隐藏在代码中(小技巧)
2020/02/16 Python
python super()函数的基本使用
2020/09/10 Python
使用CSS3配合IE滤镜实现渐变和投影的效果
2015/09/06 HTML / CSS
PUMA澳大利亚官方网站:德国运动品牌
2018/10/19 全球购物
struct和class的区别
2015/11/20 面试题
电大毕业生自我鉴定
2013/11/10 职场文书
集团薪酬管理制度
2014/01/13 职场文书
幼儿园教育教学反思
2014/01/31 职场文书
人力资源部经理的岗位职责
2014/03/04 职场文书
cf战队收人广告词
2014/03/14 职场文书
酒店采购员岗位职责
2014/03/14 职场文书
演讲稿祖国在我心中
2014/05/04 职场文书
给校长的一封检讨书
2014/09/20 职场文书
合同纠纷调解书
2015/05/20 职场文书
校园开放日新闻稿
2015/07/17 职场文书
民政局2016年“六一”儿童节慰问活动总结
2016/04/06 职场文书
mysql timestamp比较查询遇到的坑及解决
2021/11/27 MySQL