利用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 相关文章推荐
javascript中String类的subString()方法和slice()方法
May 24 Javascript
JavaScript定时显示广告代码分享
Mar 02 Javascript
在AngularJS应用中实现一些动画效果的代码
Jun 18 Javascript
javascript Promise简单学习使用方法小结
May 17 Javascript
详解JavaScript对象类型
Jun 16 Javascript
使用jquery实现的循环连续可停顿滚动实例
Nov 23 Javascript
JS中检测数据类型的几种方式及优缺点小结
Dec 12 Javascript
react-router实现跳转传值的方法示例
May 27 Javascript
vue打包后显示空白正确处理方法
Nov 01 Javascript
vue-cli 打包后提交到线上出现 &quot;Uncaught SyntaxError:Unexpected token&quot; 报错
Nov 06 Javascript
Vue实现简易翻页效果源码分享
Nov 08 Javascript
vue-cli3+typescript新建一个项目的思路分析
Aug 06 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实现查询两个数组中不同元素的方法
2016/02/23 PHP
ThinkPHP框架整合微信支付之Native 扫码支付模式一图文详解
2019/04/09 PHP
JavaScript 字符编码规则
2009/05/04 Javascript
js表格分页实现代码
2009/09/18 Javascript
来自qq的javascript面试题
2010/07/24 Javascript
基于jquery扩展漂亮的下拉框可以二次修改
2013/11/19 Javascript
Javascript排序算法之合并排序(归并排序)的2个例子
2014/04/04 Javascript
jQuery实现3D文字特效的方法
2015/03/10 Javascript
JavaScript实现搜索框的自动完成功能(一)
2016/02/25 Javascript
jQuery常用样式操作实例分析(获取、设置、追加、删除、判断等)
2016/09/08 Javascript
页面间固定参数,通过cookie传值的实现方法
2017/05/31 Javascript
seajs模块压缩问题与解决方法实例分析
2017/10/10 Javascript
vue+vue-validator 表单验证功能的实现代码
2017/11/13 Javascript
Taro集成Redux快速上手的方法示例
2018/06/21 Javascript
Vue事件修饰符native、self示例详解
2019/07/09 Javascript
关于layui导航栏不展示下拉列表的解决方法
2019/09/25 Javascript
浅谈python中set使用
2016/06/30 Python
python利用dir函数查看类中所有成员函数示例代码
2017/09/08 Python
selenium+python 去除启动的黑色cmd窗口方法
2018/05/22 Python
python计算两个数的百分比方法
2018/06/29 Python
python实现简单日期工具类
2019/04/24 Python
windows10下安装TensorFlow Object Detection API的步骤
2019/06/13 Python
python 对xml解析的示例
2021/02/27 Python
法国时尚童装网站:Melijoe
2016/08/10 全球购物
亚洲最大旅游体验平台:KKday
2017/10/21 全球购物
Kathmandu澳洲户外商店:新西兰户外运动品牌
2017/11/12 全球购物
英国票务网站:Ticketmaster英国
2018/08/27 全球购物
美国瑜伽服装和装备购物网站:Mukha Yoga
2019/02/22 全球购物
香港连卡佛百货官网:Lane Crawford
2019/09/04 全球购物
介绍一下Ruby的多线程处理
2013/02/01 面试题
博士研究生自我鉴定范文
2013/12/04 职场文书
自荐信怎么写呢?
2013/12/09 职场文书
给校长的建议书600字
2014/05/15 职场文书
大学生村官工作总结2015
2015/04/09 职场文书
导游词之苏州阳澄湖
2019/11/15 职场文书
MySQL 如何限制一张表的记录数
2021/09/14 MySQL