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判断字符输入个数(数字英文长度记为1,中文记为2,超过长度自动截取)
Oct 15 Javascript
javascript 45种缓动效果 非常酷
Jun 28 Javascript
jquery的父子兄弟节点查找示例代码
Mar 03 Javascript
picLazyLoad 实现图片延时加载(包含背景图片)
Jul 21 Javascript
jQuery.parseHTML() 函数详解
Jan 09 Javascript
JavaScript 函数节流详解及方法总结
Feb 09 Javascript
Vue filters过滤器的使用方法
Jul 14 Javascript
利用node.js实现反向代理的方法详解
Jul 24 Javascript
使用重写url机制实现验证码换一张功能
Aug 01 Javascript
vue集成chart.js的实现方法
Aug 20 Javascript
Vue使用NProgress进度条的方法
Sep 21 Javascript
Array.filter中如何正确使用Async
Nov 04 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 chr() ord()中文截取乱码问题解决方法
2008/09/08 PHP
php 8小时时间差的解决方法小结
2009/12/22 PHP
PHP 将图片按创建时间进行分类存储的实现代码
2010/01/05 PHP
phpinfo() 中 Local Value(局部变量)Master Value(主变量) 的区别
2016/02/03 PHP
php+webSoket实现聊天室示例代码(附源码)
2017/02/17 PHP
PHP基于GD库实现的生成图片缩略图函数示例
2017/07/05 PHP
js 无提示关闭浏览器页面的代码
2010/03/09 Javascript
js实现广告漂浮效果的小例子
2013/07/02 Javascript
javascript实现Table排序的方法
2015/05/15 Javascript
Three.js学习之网格
2016/08/10 Javascript
js使用Replace结合正则替换重复出现的字符串功能示例
2016/12/27 Javascript
jQuery实现动态文字搜索功能
2017/01/05 Javascript
Vuex之理解Store的用法
2017/04/19 Javascript
利用JS测试目标网站的打开响应速度
2017/12/01 Javascript
Vue 按键修饰符处理事件的方法
2018/05/04 Javascript
解决vue 项目引入字体图标报错、不显示等问题
2018/09/01 Javascript
浅谈一种让小程序支持JSX语法的新思路
2019/06/16 Javascript
flexible.js实现移动端rem适配方案
2020/04/07 Javascript
vue2.x数组劫持原理的实现
2020/04/19 Javascript
PyQt5实现QLineEdit添加clicked信号的方法
2019/06/25 Python
python 判断字符串中是否含有汉字或非汉字的实例
2019/07/15 Python
Python数据可视化实现正态分布(高斯分布)
2019/08/21 Python
Django中的session用法详解
2020/03/09 Python
Windows 下更改 jupyterlab 默认启动位置的教程详解
2020/05/18 Python
详解python如何引用包package
2020/06/07 Python
Python word文本自动化操作实现方法解析
2020/11/05 Python
css3实现画半圆弧线的示例代码
2017/11/06 HTML / CSS
HTML5 localStorage使用总结
2017/02/22 HTML / CSS
工作表现自我评价
2014/02/08 职场文书
产品开发计划书
2014/04/27 职场文书
环保倡议书300字
2014/05/15 职场文书
应届生面试求职信
2014/07/02 职场文书
领导干部群众路线教育实践活动剖析材料
2014/10/10 职场文书
中秋节感想
2015/08/10 职场文书
2016年综治宣传月活动宣传标语口号
2016/03/16 职场文书
修改Nginx配置返回指定content-type的方法
2022/09/23 Servers