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获取多个tagname的节点数组
Sep 22 Javascript
使用javascript做的一个随机点名程序
Feb 13 Javascript
js实现图片在未加载完成前显示加载中字样
Sep 03 Javascript
jQuery自定义添加&quot;$&quot;与解决&quot;$&quot;冲突的方法
Jan 19 Javascript
javascript等号运算符使用详解
Apr 16 Javascript
JQuery选择器、过滤器大整理
May 26 Javascript
JavaScript实现复制或剪切内容到剪贴板功能的方法
May 23 Javascript
js中 计算两个日期间的工作日的简单实例
Aug 08 Javascript
hovertree插件实现二级树形菜单(简单实用)
Dec 28 Javascript
学习使用Bootstrap页面排版样式
May 11 Javascript
JS排序算法之希尔排序与快速排序实现方法
Dec 12 Javascript
js 将canvas生成图片保存,或直接保存一张图片的实现方法
Jan 02 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作为网站开发语言的原因分享
2012/01/03 PHP
PHP类继承 extends使用介绍
2014/01/14 PHP
Windows下安装PHP单元测试环境PHPUnit图文教程
2014/10/24 PHP
php从字符串创建函数的方法
2015/03/16 PHP
php中的常用魔术方法汇总
2016/02/14 PHP
js 匿名调用实现代码
2009/06/19 Javascript
javascript获得网页窗口实际大小的示例代码
2013/09/21 Javascript
jquery向上向下取整适合分页查询
2014/09/06 Javascript
如何调试异步加载页面里包含的js文件
2014/10/30 Javascript
jQuery实现渐变弹出层和弹出菜单的方法
2015/02/20 Javascript
JS实现仿Windows经典风格的选项卡Tab切换代码
2015/10/20 Javascript
jQuery表单验证简单示例
2016/10/17 Javascript
利用JS实现简单的日期选择插件
2017/01/23 Javascript
详解React中的组件通信问题
2017/07/31 Javascript
基于Vue实现支持按周切换的日历
2020/09/24 Javascript
JavaScript实现异步图像上传功能
2018/07/12 Javascript
JS散列表碰撞处理、开链法、HashTable散列示例
2019/02/08 Javascript
原生JS实现天气预报
2020/06/16 Javascript
javascript中layim之查找好友查找群组
2021/02/06 Javascript
[41:08]2014 DOTA2国际邀请赛中国区预选赛 HGT VS NE
2014/05/22 DOTA
详解Python的迭代器、生成器以及相关的itertools包
2015/04/02 Python
Python使用multiprocessing创建进程的方法
2015/06/04 Python
python2.7的编码问题与解决方法
2016/10/04 Python
详解如何利用Cython为Python代码加速
2018/01/27 Python
Jupyter notebook设置背景主题,字体大小及自动补全代码的操作
2020/04/13 Python
Python3如何实现Win10桌面自动切换
2020/08/11 Python
美国益智玩具购物网站:Fat Brain Toys
2017/11/03 全球购物
Juicy Couture Beauty官方网站:香水和化妆品
2019/03/12 全球购物
Bata印度官网:源自欧洲舒适鞋履品牌
2020/01/30 全球购物
Elizabeth Gage官网:英国最好的珠宝设计之一
2020/09/26 全球购物
创建市级文明单位实施方案
2014/03/01 职场文书
运动会标语
2014/06/21 职场文书
婚宴邀请函
2015/01/30 职场文书
青春雷锋观后感
2015/06/10 职场文书
解决Python中的modf()函数取小数部分不准确问题
2021/05/28 Python
Apache Pulsar结合Hudi构建Lakehouse方案分析
2022/03/31 Servers