编程 Javascript

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程序设计有所帮助。

jquery实现简单文字提示效果

- Author -

aochen

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

javascript 火狐(firefox)不显示本地图片问题解决

Jul 05 Javascript

前淘宝前端开发工程师阿当的PPT中有JS技术理念问题

Jan 15 Javascript

Bootstrap每天必学之表格

Nov 23 Javascript

JavaScript如何实现对数字保留两位小数一位自动补零

Dec 18 Javascript

JavaScript操作 url 中 search 部分方法函数

Jun 15 Javascript

jQuery图片轮播实现并封装(一)

Dec 03 Javascript

用Axios Element实现全局的请求loading的方法

Mar 15 Javascript

JS简单获取并修改input文本框内容的方法示例

Apr 08 Javascript

纯JS实现可用于页码更换的飞页特效示例

May 21 Javascript

jQuery实现经典的网页3D轮播图封装功能【附源码下载】

Feb 15 jQuery

WebGL three.js学习笔记之阴影与实现物体的动画效果

Apr 25 Javascript

webpack常用构建优化策略小结

Nov 21 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