利用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 相关文章推荐
jQuery Ajax文件上传(php)
Jun 16 Javascript
extjs 学习笔记(二) Ext.Element类
Oct 13 Javascript
Javascript基础教程之数组 array
Jan 18 Javascript
JavaScript事件委托用法分析
Jan 24 Javascript
JavaScript将XML转成JSON的方法
Mar 12 Javascript
超赞的动手创建JavaScript框架的详细教程
Jun 30 Javascript
javascript数组随机排序实例分析
Jul 22 Javascript
js时钟翻牌效果实现代码分享
Jul 31 Javascript
推荐VSCode 上特别好用的 Vue 插件之vetur
Sep 14 Javascript
javascript字体颜色控件的开发 JS实现字体控制
Nov 27 Javascript
JavaScript数组及常见操作方法小结
Nov 13 Javascript
Vue组件间数据传递的方式(3种)
Jul 13 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
关于我转生变成史莱姆这档事:第二季PV上线,萌王2021年回归
2020/05/06 日漫
一个PHP+MSSQL分页的例子
2006/10/09 PHP
IIS php环境配置PHP5 MySQL5 ZendOptimizer phpmyadmin安装与配置
2008/11/18 PHP
php 图片加水印与上传图片加水印php类
2010/05/12 PHP
解析linux下安装memcacheq(mcq)全过程笔记
2013/06/27 PHP
php url路由入门实例
2014/04/23 PHP
jquery中对表单的基本操作代码
2010/07/29 Javascript
Js实现当前点击a标签变色突出显示其他a标签回复原色
2013/11/27 Javascript
javascript伸缩菜单栏实现代码分享
2015/11/12 Javascript
JSONObject使用方法详解
2015/12/17 Javascript
SublimeText自带格式化代码功能之reindent
2015/12/27 Javascript
jQuery时间插件jquery.clock.js用法实例(5个示例)
2016/01/14 Javascript
利用Query+bootstrap和js两种方式实现日期选择器
2017/01/10 Javascript
layui实现根据table数据判断按钮显示情况的方法
2019/09/26 Javascript
在Vue中使用HOC模式的实现
2020/08/23 Javascript
[01:45]2014DOTA2 TI预选赛预选赛 战前探营!
2014/05/21 DOTA
python将xml xsl文件生成html文件存储示例讲解
2013/12/03 Python
python解决js文件utf-8编码乱码问题(推荐)
2018/05/02 Python
Python3匿名函数用法示例
2018/07/25 Python
浅谈python常用程序算法
2019/03/22 Python
OpenCV-Python 摄像头实时检测人脸代码实例
2019/04/30 Python
关于python导入模块import与常见的模块详解
2019/08/28 Python
已安装tensorflow-gpu,但keras无法使用GPU加速的解决
2020/02/07 Python
python3 实现口罩抽签的功能
2020/03/11 Python
Python绘图之柱形图绘制详解
2020/07/28 Python
HTML5添加禁止缩放功能
2017/11/03 HTML / CSS
canvas实现滑动验证的实现示例
2020/08/11 HTML / CSS
世界知名接发和假发品牌:Poze Hair
2017/03/08 全球购物
Marc Jacobs官方网站:美国奢侈品牌
2017/08/29 全球购物
Deux par Deux官方网站:设计师童装
2020/01/03 全球购物
实习会计求职自荐信范文
2014/03/10 职场文书
服务承诺书怎么写
2014/05/24 职场文书
创先争优个人承诺书
2014/08/30 职场文书
2015年财政所工作总结
2015/04/25 职场文书
Python一些基本的图像操作和处理总结
2021/06/23 Python
LeetCode189轮转数组python示例
2022/08/05 Python