利用jQuary实现文字浮动提示效果示例代码


Posted in Javascript onDecember 26, 2013
<html> 
<head> 
<meta charset="utf-8"/> 
<script type="text/javascript" src="script/jquery-1.4.2.min.js"></script> 
<script> 
/*文字提示*/ 
/* 
(1)鼠标移入的时候,创建一个div它的内容是title属性的值 
(2)规定位置,设置css样式 
(3)鼠标移出的时候,移除div 
(4)鼠标移动的时候,X Y轴的坐标要相应的变化 
*/ 
$(function(){ 
var x = 7; 
var y = 8; 
$("a.tip").hover(function(){ 
var title = this.title; 
var $div = $("<div id='newTip'>"+title+"</div>"); 
$("body").append($div); 
$div.css({"position":"absolute","background":"pink"}); 
},function(){ 
$("#newTip").remove(); 
}).mousemove(function(e){ 
var $div = $("#newTip").css({"left":(e.pageX+x)+'px',"top":(e.pageY+y)+'px'}); 
}); 
}) 
</script> 
</head> 
<body> 
<a href="#" class="tip" title="这是我的提示">这是我的提示</a> 
</body> 
</html>
Javascript 相关文章推荐
ajax 文件上传应用简单实现
Mar 03 Javascript
js的逻辑运算符 ||
May 31 Javascript
修改好的jquery滚动字幕效果实现代码
Jun 22 Javascript
JQuery魔力之$(&quot;tagName&quot;)与selector
Mar 05 Javascript
使用jquery实现简单的ajax
Jul 08 Javascript
使用javascript创建快捷方式的简单实例
Aug 09 Javascript
JavaScript中各种引用类型的常用操作方法小结
May 05 Javascript
基于vue-router 多级路由redirect 重定向的问题
Sep 03 Javascript
JavaScript如何实现元素全排列实例代码
May 14 Javascript
浅谈redux, koa, express 中间件实现对比解析
May 23 Javascript
vue+element实现表格新增、编辑、删除功能
May 28 Javascript
小程序点餐界面添加购物车左右摆动动画
Sep 23 Javascript
js几秒以后倒计时跳转示例
Dec 26 #Javascript
Get中文乱码IE浏览器Get中文乱码解决方案
Dec 26 #Javascript
Jquery模仿Baidu、Google搜索时自动补充搜索结果提示
Dec 26 #Javascript
jquery1.9 下检测浏览器类型和版本的方法
Dec 26 #Javascript
jQuery aminate方法定位到页面具体位置
Dec 26 #Javascript
javascript创建数组之联合数组的使用方法示例
Dec 26 #Javascript
JS获取select-option-text_value的方法
Dec 26 #Javascript
You might like
PHP中运用jQuery的Ajax跨域调用实现代码
2012/02/21 PHP
找到了一篇jQuery与Prototype并存的冲突的解决方法
2007/08/29 Javascript
Javascript attachEvent传递参数的办法
2009/12/14 Javascript
Google AJAX 搜索 API实现代码
2010/11/17 Javascript
JS获取IP、MAC和主机名的五种方法
2013/11/14 Javascript
JS打字效果的动态菜单代码分享
2015/08/21 Javascript
深入理解MVC中的时间js格式化
2016/05/19 Javascript
Bootstrap基本模板的使用和理解1
2016/12/14 Javascript
jQuery纵向导航菜单效果实现方法
2016/12/19 Javascript
EasyUI学习之DataGird分页显示数据
2016/12/29 Javascript
jQuery实现贪吃蛇小游戏(附源码下载)
2017/03/04 Javascript
微信小程序 滚动到某个位置添加class效果实现代码
2017/04/19 Javascript
vue实现前进刷新后退不刷新效果
2018/01/26 Javascript
JavaScript同源策略和跨域访问实例详解
2018/04/03 Javascript
JS动态插入脚本和插入引用外部链接脚本的方法
2018/05/21 Javascript
vue cli2.0单页面title修改方法
2018/06/07 Javascript
vue+VeeValidate 校验范围实例详解(部分校验,全部校验)
2018/10/19 Javascript
微信小程序 搜索框组件代码实例
2019/09/06 Javascript
jquery实现烟花效果(面向对象)
2020/03/10 jQuery
js实现全选和全不选
2020/07/28 Javascript
js实现弹窗猜数字游戏
2020/11/26 Javascript
Python实现自动发送邮件功能
2021/03/02 Python
Python分支语句与循环语句应用实例分析
2019/05/07 Python
keras自动编码器实现系列之卷积自动编码器操作
2020/07/03 Python
澳大利亚领先的武术用品和健身器材供应商:SMAI
2019/03/24 全球购物
金山毒霸系列的笔试题
2013/04/13 面试题
文秘专业个人求职信
2013/12/22 职场文书
省级四好少年事迹材料
2014/01/25 职场文书
村党支部换届选举方案
2014/05/02 职场文书
社团活动总结格式
2014/08/29 职场文书
初中毕业典礼演讲稿
2014/09/09 职场文书
毕业生实习期转正自我鉴定
2014/09/26 职场文书
2015年全国“爱牙日”宣传活动总结
2015/03/23 职场文书
导游词之峨眉乐山/兵马俑/北京故宫御花园
2019/09/03 职场文书
JS继承最简单的理解方式
2021/03/31 Javascript
MySQL分区以及建索引的方法总结
2022/04/13 MySQL