利用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 相关文章推荐
jquery1.4后 jqDrag 拖动 不可用
Feb 06 Javascript
JavaScript实现标题栏文字轮播效果代码
Oct 24 Javascript
JavaScript探测CSS动画是否已经完成的方法
Aug 30 Javascript
Vue.js中数组变动的检测详解
Oct 12 Javascript
第一次接触神奇的前端框架vue.js
Dec 01 Javascript
详解Vue用axios发送post请求自动set cookie
May 10 Javascript
angular ng-click防止重复提交实例
Jun 16 Javascript
jQuery dateRangePicker插件使用方法详解
Jul 28 jQuery
快速理解 JavaScript 中的 LHS 和 RHS 查询的用法
Aug 24 Javascript
jQuery实现左右滑动的toggle方法
Mar 03 jQuery
Vue 引入AMap高德地图的实现代码
Apr 29 Javascript
微信小程序图表插件wx-charts用法实例详解
May 20 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
《猛禽小队》:DC宇宙的又一超级大烂片
2020/04/09 欧美动漫
PHP 向右侧拉菜单实现代码,测试使用中
2009/11/03 PHP
php循环检测目录是否存在并创建(循环创建目录)
2011/01/06 PHP
Memcached常用命令以及使用说明详解
2013/06/27 PHP
PHP数据库操作之基于Mysqli的数据库操作类库
2014/04/19 PHP
一款简单实用的php操作mysql数据库类
2014/12/08 PHP
php上传图片并压缩的实现方法
2015/12/22 PHP
php unicode编码和字符串互转的方法
2020/08/12 PHP
Ubuntu中支持PHP5与PHP7双版本的简单实现
2018/08/19 PHP
网页右键ie不支持event.preventDefault和event.returnValue (需要加window)
2013/02/22 Javascript
下拉菜单点击实现连接跳转功能的js代码
2013/05/19 Javascript
display和visibility的区别示例介绍
2014/02/26 Javascript
轻松创建nodejs服务器(3):代码模块化
2014/12/18 NodeJs
JavaScript的removeChild()函数用法详解
2015/12/27 Javascript
JS实现鼠标移上去显示图片或微信二维码
2016/12/14 Javascript
微信小程序 textarea 组件详解及简单实例
2017/01/10 Javascript
js 转义字符及URI编码详解
2017/02/28 Javascript
详解使用grunt完成requirejs的合并压缩和js文件的版本控制
2017/03/02 Javascript
Vue-路由导航菜单栏的高亮设置方法
2018/03/17 Javascript
vue.js的状态管理vuex中store的使用详解
2019/11/08 Javascript
vue父子模板传值问题解决方法案例分析
2020/02/26 Javascript
python 多进程通信模块的简单实现
2014/02/20 Python
微信跳一跳游戏python脚本
2020/04/01 Python
基于Python3.6+splinter实现自动抢火车票
2018/09/25 Python
解决python xx.py文件点击完之后一闪而过的问题
2019/06/24 Python
django-rest-swagger的优化使用方法
2019/08/29 Python
VScode连接远程服务器上的jupyter notebook的实现
2020/04/23 Python
Pandas缺失值2种处理方式代码实例
2020/06/13 Python
HTML5中form如何关闭自动完成功能的方法
2018/07/02 HTML / CSS
Viking Direct荷兰:购买办公用品
2019/06/20 全球购物
LG西班牙网上商店:Tienda LG Online Es
2019/07/30 全球购物
SK-II神仙水美国官网:SK-II美国
2020/02/25 全球购物
社会实践活动总结范文
2014/07/03 职场文书
机关党员四风问题个人整改措施
2014/10/26 职场文书
2015年平安创建工作总结
2015/04/29 职场文书
volatile保证可见性及重排序方法
2022/08/05 Java/Android