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中的事件
Sep 23 Javascript
超级简单的图片防盗(HTML),好用
Apr 08 Javascript
javascript中自定义对象的属性方法分享
Jul 12 Javascript
通过AJAX的JS、JQuery两种方式解析XML示例介绍
Sep 23 Javascript
详解JavaScript基于面向对象之创建对象(2)
Dec 10 Javascript
js实现人民币大写金额形式转换
Apr 27 Javascript
微信小程序 本地数据读取实例
Apr 27 Javascript
JQuery实现图片轮播效果
May 08 jQuery
ReactNative踩坑之配置调试端口的解决方法
Jul 28 Javascript
Angular4自制一个市县二级联动组件示例
Nov 21 Javascript
小程序hover-class点击态效果实现
Feb 26 Javascript
vue项目或网页上实现文字转换成语音播放功能
Jun 09 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
PHP5权威编程阅读学习笔记 附电子书下载
2012/07/05 PHP
php表单敏感字符过滤类
2014/12/08 PHP
支持中文、字母、数字的PHP验证码
2015/05/04 PHP
解决laravel 表单提交-POST 异常的问题
2019/10/15 PHP
PHP字符串与数组处理函数用法小结
2020/01/07 PHP
jquery cookie插件代码类
2009/05/26 Javascript
JavaScript call apply使用 JavaScript对象的方法绑定到DOM事件后this指向问题
2011/09/28 Javascript
javascript小数四舍五入多种方法实现
2012/12/23 Javascript
JQuery实现动态适时改变字体颜色的方法
2015/03/10 Javascript
jQuery获取上传文件的名称的正则表达式
2015/05/21 Javascript
Nodejs从有门道无门菜鸟起飞必看教程
2016/07/20 NodeJs
JS填写银行卡号每隔4位数字加一个空格
2016/12/19 Javascript
浅谈Angular的$q, defer, promise
2016/12/20 Javascript
jquery.form.js异步提交表单详解
2017/04/25 jQuery
easyui combogrid实现本地模糊搜索过滤多列
2017/05/13 Javascript
详解js模板引擎art template数组渲染的方法
2018/10/09 Javascript
微信小程序实现选项卡效果
2018/11/06 Javascript
vue 搭建后台系统模块化开发详解
2019/05/01 Javascript
《javascript设计模式》学习笔记七:Javascript面向对象程序设计组合模式详解
2020/04/08 Javascript
谈谈我在vue-cli3中用预渲染遇到的坑
2020/04/22 Javascript
element-ui 弹窗组件封装的步骤
2021/01/22 Javascript
Python中的自定义函数学习笔记
2014/09/23 Python
Python采用socket模拟TCP通讯的实现方法
2014/11/19 Python
python模拟Django框架实例
2016/05/17 Python
python 生成图形验证码的方法示例
2018/11/11 Python
Python3实现英文字母转换哥特式字体实例代码
2020/09/01 Python
解决Ubuntu18中的pycharm不能调用tensorflow-gpu的问题
2020/09/17 Python
Numpy ndarray 多维数组对象的使用
2021/02/10 Python
汽车销售顾问求职自荐信
2014/01/01 职场文书
财务部副经理岗位职责
2014/03/14 职场文书
诉前财产保全担保书
2014/05/20 职场文书
小学教师师德师风自我剖析材料
2014/09/29 职场文书
个人股份转让协议书范本
2015/01/28 职场文书
乒乓球比赛通知
2015/04/27 职场文书
家装电话营销开场白
2015/05/29 职场文书
总结Python使用过程中的bug
2021/06/18 Python