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 20 Javascript
javascript自定义的addClass()方法
May 28 Javascript
Angularjs制作简单的路由功能demo
Apr 14 Javascript
javascript实现网站加入收藏功能
Dec 16 Javascript
图文详解Heap Sort堆排序算法及JavaScript的代码实现
May 04 Javascript
AngularJS ng-change 指令的详解及简单实例
Jul 30 Javascript
JavaScript实现的DOM树遍历方法详解【二叉DOM树、多叉DOM树】
May 07 Javascript
微信小程序实现打卡日历功能
Sep 21 Javascript
vue-loader中引入模板预处理器的实现
Sep 04 Javascript
d3.js实现图形拖拽
Dec 19 Javascript
js节流防抖应用场景,以及在vue中节流防抖的具体实现操作
Sep 21 Javascript
JS时间戳与日期格式互相转换的简单方法示例
Jan 30 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 循环列出目录内容的函数代码
2010/05/26 PHP
php stream_get_meta_data返回值
2013/09/29 PHP
JavaScript 对象链式操作测试代码
2010/04/25 Javascript
Jvascript学习实践案例(开发常用)
2012/06/25 Javascript
javascript改变position值实现菜单滚动至顶部后固定
2013/01/18 Javascript
JS中setTimeout()的用法详解
2013/04/14 Javascript
jquery 跳到顶部和底部动画2句代码简单实现
2013/07/18 Javascript
扩展jQuery对象时如何扩展成员变量具体怎么实现
2014/04/25 Javascript
js实现按钮加背景图片常用方法
2014/11/01 Javascript
jquery图片滚动放大代码分享(1)
2015/08/25 Javascript
jQuery下拉美化搜索表单效果代码分享
2015/08/25 Javascript
JS实现弹出居中的模式窗口示例
2016/06/20 Javascript
jquery延迟对象解析
2016/10/26 Javascript
VueJS如何引入css或者less文件的一些坑
2017/04/25 Javascript
JS实现身份证输入框的输入效果
2017/08/21 Javascript
jQuery中过滤器的基本用法示例
2017/10/11 jQuery
Nuxt升级2.0.0时出现的问题(小结)
2018/10/08 Javascript
详解Jest结合Vue-test-utils使用的初步实践
2019/06/27 Javascript
vue实现点击按钮切换背景颜色的示例代码
2020/06/23 Javascript
vue使用vant中的checkbox实现全选功能
2020/11/17 Vue.js
python简单获取数组元素个数的方法
2015/07/13 Python
python3实现抓取网页资源的 N 种方法
2017/05/02 Python
Django Admin中增加导出Excel功能过程解析
2019/09/04 Python
python读取raw binary图片并提取统计信息的实例
2020/01/09 Python
解决tensorflow读取本地MNITS_data失败的原因
2020/06/22 Python
Keras 在fit_generator训练方式中加入图像random_crop操作
2020/07/03 Python
python在linux环境下安装skimage的示例代码
2020/10/14 Python
阻止移动设备(手机、pad)浏览器双击放大网页的方法
2014/06/03 HTML / CSS
联想墨西哥官方网站:Lenovo墨西哥
2016/08/17 全球购物
西班牙宠物用品和食品网上商店:Tiendanimal
2019/06/06 全球购物
Linux如何为某个操作添加别名
2015/02/05 面试题
大学生职业规划论文
2014/01/11 职场文书
房屋公证委托书
2014/04/03 职场文书
2015年档案室工作总结
2015/05/23 职场文书
Python基础之数据类型知识汇总
2021/05/18 Python
JS setTimeout与setInterval的区别
2022/04/20 Javascript