jquery实现简单文字提示效果


Posted in Javascript onDecember 02, 2015

本文实例讲述了jquery实现简单文字提示效果。分享给大家供大家参考,具体如下:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>jquery实现简单文字提示</title>
<style type="text/css">
#preview{border:2px solid #c7c7c7; background:#e3f4f9; padding:5px; display:none; position:absolute;}
</style>
<script src="jquery-1.2.6.pack.js" type="text/javascript"></script>
</head>
<body>
<a class="preview" title="看看提示出现了没">移到我身上来!!</a>
<script type="text/javascript">
this.imagePreview = function(){ 
/* CONFIG */
  xOffset = 10;
  yOffset = 20;
  // 可以自己设定偏移值
/* END CONFIG */
$("a.preview").hover(function(e){
  this.t = this.title;
  this.title = ""; 
  var c = (this.t != "") ? "" + this.t : "";
  $("body").append("<div id='preview'>"+ c +"</div>");     
  $("#preview")
  .css("top",(e.pageY - xOffset) + "px")
  .css("left",(e.pageX + yOffset) + "px")
  .fadeIn("fast");   
  },
function(){
  this.title = this.t; 
  $("#preview").remove();
  }); 
$("a.preview").mousemove(function(e){
  $("#preview")
  .css("top",(e.pageY - xOffset) + "px")
  .css("left",(e.pageX + yOffset) + "px");
});  
};
// 页面加载完执行
$(document).ready(function(){
imagePreview();
});
</script>
</body>
</html>

jquery-1.2.6.pack.js插件点击此处本站下载。

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
javascript判断ie浏览器6/7版本加载不同样式表的实现代码
Dec 26 Javascript
jquery.pagination.js 无刷新分页实现步骤分享
May 23 Javascript
json对象转字符串如何实现
Dec 02 Javascript
js判断两个日期是否相等的方法
Sep 10 Javascript
Jquery原生态实现表格header头随滚动条滚动而滚动
Mar 18 Javascript
jQuery中empty()方法用法实例
Jan 16 Javascript
js淡入淡出焦点图幻灯片效果代码分享
Sep 08 Javascript
jQuery autoComplete插件两种使用方式及动态改变参数值的方法详解
Oct 24 Javascript
用Fundebug插件记录网络请求异常的方法
Feb 21 Javascript
Vue-Cli 3.0 中配置高德地图的两种方式
Jun 19 Javascript
vue scroll滚动判断的实现(是否滚动到底部、滚动方向、滚动节流、获取滚动区域dom元素)
Jun 11 Javascript
浅析JavaScript中的变量提升
Jun 01 Javascript
分享15个大家都熟知的jquery小技巧
Dec 02 #Javascript
jQuery实现为控件添加水印文字效果(附源码)
Dec 02 #Javascript
jqGrid中文文档之选项设置
Dec 02 #Javascript
javascript实现自动填写表单实例简析
Dec 02 #Javascript
Jquery插件之Fancybox丰富的弹出层效果附源码下载
Dec 02 #Javascript
纯js代码实现简单计算器
Dec 02 #Javascript
jquery判断输入密码两次是否相等
Apr 22 #Javascript
You might like
PHP中创建并处理图象
2006/10/09 PHP
php 论坛采集程序 模拟登陆,抓取页面 实现代码
2009/07/09 PHP
php小经验:解析preg_match与preg_match_all 函数
2013/06/29 PHP
php创建sprite
2014/02/11 PHP
jquery blockUI 遮罩不能消失与不能提交的解决方法
2011/09/17 Javascript
JS的replace方法详细介绍
2012/11/09 Javascript
利用webqq协议使用python登录qq发消息源码参考
2013/04/08 Javascript
form表单只提交数据而不进行页面跳转的解决方案
2013/09/18 Javascript
三种方式获取XMLHttpRequest对象
2014/04/21 Javascript
NODE.JS加密模块CRYPTO常用方法介绍
2014/06/05 Javascript
jQuery插件实现适用于移动端的地址选择器
2016/02/18 Javascript
JavaScript Ajax实现异步通信
2016/12/14 Javascript
Bootstrap页面标题Page Header的实现方法
2017/03/22 Javascript
基于Vue实现tab栏切换内容不断实时刷新数据功能
2017/04/13 Javascript
Vue 页面切换效果之 BubbleTransition(推荐)
2018/04/08 Javascript
对vue中v-on绑定自定事件的实例讲解
2018/09/06 Javascript
vue-cli webpack配置文件分析
2019/05/20 Javascript
基于nodejs的微信JS-SDK简单应用实现
2019/05/21 NodeJs
React+Redux实现简单的待办事项列表ToDoList
2019/09/29 Javascript
Object.keys() 和 Object.getOwnPropertyNames() 的区别详解
2020/05/21 Javascript
vue 点击其他区域关闭自定义div操作
2020/07/17 Javascript
Python中super关键字用法实例分析
2015/05/28 Python
Python 使用os.remove删除文件夹时报错的解决方法
2017/01/13 Python
关于python之字典的嵌套,递归调用方法
2019/01/21 Python
Python2 Selenium元素定位的实现(8种)
2019/02/25 Python
基于python 等频分箱qcut问题的解决
2020/03/03 Python
Python文字截图识别OCR工具实例解析
2020/03/05 Python
CSS3效果:自定义“W”形运行轨迹实例
2017/03/29 HTML / CSS
社会实践的活动方案
2014/08/22 职场文书
纪念九一八事变演讲稿:牢记九一八,屈辱怎能忘
2014/09/14 职场文书
关于五一放假的通知
2015/08/18 职场文书
关于实现中国梦的心得体会
2016/01/05 职场文书
入党申请书怎么写?
2019/06/11 职场文书
Opencv中cv2.floodFill算法的使用
2021/06/18 Python
Python何绘制带有背景色块的折线图
2022/04/23 Python
python pandas 解析(读取、写入)CSV 文件的操作方法
2022/12/24 Python