利用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 相关文章推荐
JS 字符串连接[性能比较]
May 10 Javascript
读jQuery之十一 添加事件核心方法
Jul 31 Javascript
常用jQuery选择器总结
Jul 11 Javascript
关闭页面时window.location事件未执行的原因分析及解决方案
Sep 01 Javascript
node.js使用npm 安装插件时提示install Error: ENOENT报错的解决方法
Nov 20 Javascript
页面内容排序插件jSort使用方法
Oct 10 Javascript
AngularJS实现全选反选功能
Dec 08 Javascript
简单实现js页面切换功能
Jan 10 Javascript
JS控制静态页面之间传递参数获取参数并应用的简单实例
Aug 10 Javascript
Javascript中apply、call、bind的巧妙使用
Aug 18 Javascript
Vue computed计算属性的使用方法
Jul 14 Javascript
vue.js input框之间赋值方法
Aug 24 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
星际争霸任务指南——神族
2020/03/04 星际争霸
PHP缓存工具XCache安装与使用方法详解
2018/04/09 PHP
php intval函数用法总结
2019/04/14 PHP
javascript+dom树型菜单类,希望朋友们一起进步
2007/05/03 Javascript
基于jQuery的可用于选项卡及幻灯的切换插件
2011/03/28 Javascript
js性能优化 如何更快速加载你的JavaScript页面
2012/03/17 Javascript
『jQuery』.html(),.text()和.val()的概述及使用
2013/04/22 Javascript
JS实现仿FLASH效果的竖排导航代码
2015/09/15 Javascript
jquery mobile 移动web(5)
2015/12/20 Javascript
基于JSON格式数据的简单jQuery幻灯片插件(jquery-slider)
2016/08/10 Javascript
javascript跨域请求包装函数与用法示例
2016/11/03 Javascript
Javascript计算二维数组重复值示例代码
2016/12/18 Javascript
详解JS中遍历语法的比较
2017/04/07 Javascript
NodeJS设计模式总结【单例模式,适配器模式,装饰模式,观察者模式】
2017/09/06 NodeJs
微信小程序基于本地缓存实现点赞功能的方法
2017/12/18 Javascript
详解Vue快速零配置的打包工具——parcel
2018/01/16 Javascript
Angular服务Request异步请求的实例讲解
2018/08/13 Javascript
前后端如何实现登录token拦截校验详解
2018/09/03 Javascript
jquery.param()实现数组或对象的序列化方法
2018/10/08 jQuery
js尾调用优化的实现
2019/05/23 Javascript
基于python神经卷积网络的人脸识别
2018/05/24 Python
Python 加密与解密小结
2018/12/06 Python
localStorage 设置过期时间的方法实现
2018/12/21 HTML / CSS
html5 application cache遇到的严重问题
2012/12/26 HTML / CSS
移动端html5 meta标签的神奇功效
2016/01/06 HTML / CSS
Halston Heritage官网:简洁的日装,稍显奢华的晚装
2018/11/20 全球购物
中海讯通笔试题
2015/09/15 面试题
大学毕业生自我鉴定
2013/11/05 职场文书
幼教求职信
2014/03/12 职场文书
品德评语大全
2014/05/05 职场文书
工作期间打牌检讨书范文
2014/11/20 职场文书
春晚观后感
2015/06/11 职场文书
浙江省杭州市平均工资标准是多少?
2019/07/09 职场文书
python 如何执行控制台命令与操作剪切板
2021/05/20 Python
vue二维数组循环嵌套方式 循环数组、循环嵌套数组
2022/04/24 Vue.js
PostgreSQL出现死锁该如何解决
2022/05/30 PostgreSQL