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做的简单的可折叠的两级树形菜单
Sep 21 Javascript
图片动画横条广告带上下滚动的JS代码
Oct 25 Javascript
通过jquery 获取URL参数并进行转码
Aug 18 Javascript
js实现带圆角的多级下拉菜单效果
Aug 28 Javascript
input获取焦点时底部菜单被顶上来问题的解决办法
Jan 24 Javascript
JS路由跳转的简单实现代码
Sep 21 Javascript
JS实现手写parseInt的方法示例
Sep 24 Javascript
Vue实现左右菜单联动实现代码
Aug 12 Javascript
原生js实现瀑布流效果
Mar 09 Javascript
vue渲染方式render和template的区别
Jun 05 Javascript
在vue中使用el-tab-pane v-show/v-if无效的解决
Aug 03 Javascript
JavaScript 如何在浏览器中使用摄像头
Dec 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的Yii框架中的event事件机制
2016/03/17 PHP
PHP使用PDO调用mssql存储过程的方法示例
2017/10/07 PHP
php实现表单提交上传文件功能
2018/05/28 PHP
农历与西历对照
2006/09/06 Javascript
Javascript Global对象
2009/08/13 Javascript
一个简单的js树形菜单
2011/12/09 Javascript
js函数的延迟加载实现代码
2012/10/11 Javascript
jQuery旋转插件—rotate支持(ie/Firefox/SafariOpera/Chrome)
2013/01/16 Javascript
jquery中选择块并改变属性值的方法
2013/07/31 Javascript
原生js实现fadein 和 fadeout淡入淡出效果
2014/06/05 Javascript
node.js中的fs.readlinkSync方法使用说明
2014/12/17 Javascript
浅谈angularJS 作用域
2015/07/05 Javascript
浅析JS动态创建元素【两种方法】
2016/04/20 Javascript
JS双击变input框批量修改内容
2016/12/12 Javascript
angularjs中ng-attr的用法详解
2016/12/31 Javascript
jquery仿苹果的时间/日期选择效果
2017/03/08 Javascript
Vue 监听列表item渲染事件方法
2018/09/06 Javascript
jQuery实现动态加载(按需加载)javascript文件的方法分析
2019/05/31 jQuery
使用python绘制人人网好友关系图示例
2014/04/01 Python
Python字符串拼接六种方法介绍
2017/12/18 Python
Python实现PS图像调整之对比度调整功能示例
2018/01/26 Python
pandas分别写入excel的不同sheet方法
2018/12/11 Python
Python 判断图像是否读取成功的方法
2019/01/26 Python
TFRecord文件查看包含的所有Features代码
2020/02/17 Python
详解使用python3.7配置开发钉钉群自定义机器人(2020年新版攻略)
2020/04/01 Python
CSS3 选择器 伪类选择器介绍
2012/01/21 HTML / CSS
html5实现输入框fixed定位在屏幕最底部兼容性
2020/07/03 HTML / CSS
C++面试题目
2013/06/25 面试题
婚礼答谢宴主持词
2014/03/14 职场文书
个人投资合作协议书
2014/10/12 职场文书
合作与交流自我评价
2015/03/09 职场文书
培训班开班主持词
2015/07/02 职场文书
社区安全温馨提示语
2015/07/14 职场文书
如何写好开幕词?
2019/06/24 职场文书
python 实现图片特效处理
2022/04/03 Python
python垃圾回收机制原理分析
2022/04/13 Python