利用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 相关文章推荐
Using the TextRange Object
Oct 14 Javascript
javascript new一个对象的实质
Jan 07 Javascript
jQuery学习笔记之控制页面实现代码
Feb 27 Javascript
jquery实现的鼠标拖动排序Li或Table
May 04 Javascript
javascript实现点击后变换按钮显示文字的方法
May 13 Javascript
Angular.JS判断复选框checkbox是否选中并实时显示
Nov 30 Javascript
jquery实现放大镜简洁代码(推荐)
Jun 08 jQuery
js实现本地时间同步功能
Aug 26 Javascript
新手快速上手webpack4打包工具的使用详解
Jan 28 Javascript
小程序如何在不同设备上自适应生成海报的实现方法
Aug 20 Javascript
element-plus一个vue3.xUI框架(element-ui的3.x 版初体验)
Dec 02 Vue.js
vue祖孙组件之间的数据传递案例
Dec 07 Vue.js
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 Smarty初体验二 获取配置信息
2011/08/08 PHP
php的数组与字符串的转换函数整理汇总
2013/07/18 PHP
php分页查询的简单实现代码
2017/03/14 PHP
web 页面分页打印的实现
2009/06/22 Javascript
jquery checkbox全选、取消全选实现代码
2010/03/05 Javascript
jQuery下通过$.browser来判断浏览器.
2011/04/05 Javascript
ASP.NET jQuery 实例18 通过使用jQuery validation插件校验DropDownList
2012/02/03 Javascript
通过length属性判断jquery对象是否存在
2013/10/18 Javascript
javascript格式化json显示实例分析
2015/04/21 Javascript
JS组件Bootstrap导航条使用方法详解
2016/04/29 Javascript
关于json字符串与实体之间的严格验证代码
2016/11/10 Javascript
详解ES6中的let命令
2020/04/05 Javascript
js实现鼠标左右移动,图片也跟着移动效果
2017/01/25 Javascript
浅谈layui 数据表格前后台传值的问题
2019/09/12 Javascript
使用node.JS中的url模块解析URL信息
2020/02/06 Javascript
微信小程序pinker组件使用实现自动相减日期
2020/05/07 Javascript
微信小程序抽奖组件的使用步骤
2021/01/11 Javascript
python类中super()和__init__()的区别
2016/10/18 Python
详解Python中最难理解的点-装饰器
2017/04/03 Python
Python使用当前时间、随机数产生一个唯一数字的方法
2017/09/18 Python
在python中使用正则表达式查找可嵌套字符串组
2017/10/24 Python
python获取酷狗音乐top500的下载地址 MP3格式
2018/04/17 Python
利用numpy和pandas处理csv文件中的时间方法
2018/04/19 Python
python3读取图片并灰度化图片的四种方法(OpenCV、PIL.Image、TensorFlow方法)总结
2019/07/04 Python
Django 重写用户模型的实现
2019/07/29 Python
解决python有时候import不了当前的包问题
2019/08/28 Python
利用python生成照片墙的示例代码
2020/04/09 Python
Python错误的处理方法
2020/06/23 Python
基于django和dropzone.js实现上传文件
2020/11/24 Python
浅谈amaze-ui中datepicker和datetimepicker注意的几点
2020/08/21 HTML / CSS
员工工作表扬信范文
2014/01/13 职场文书
幼儿教师求职信
2014/05/24 职场文书
2014年前台接待工作总结
2014/12/05 职场文书
我们的节日重阳节活动总结
2015/03/24 职场文书
python中requests库+xpath+lxml简单使用
2021/04/29 Python
深入理解redis中multi与pipeline
2021/06/02 Redis