编程 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 相关文章推荐

jquery动态添加删除div 具体实现

Jul 20 Javascript

JS对HTML标签select的获取、添加、删除操作

Oct 17 Javascript

Node.js文件操作详解

Aug 16 Javascript

jQuery EasyUI之DataGrid使用实例详解

Jan 04 Javascript

浅析创建javascript对象的方法

May 13 Javascript

Javascript循环删除数组中元素的几种方法示例

May 18 Javascript

angular+webpack2实战例子

May 23 Javascript

jQuery实现简单的回到顶部totop功能示例

Oct 16 jQuery

Node.js调用fs.renameSync报错（Error: EXDEV, cross-device link not permitted）

Dec 27 Javascript

对VUE中的对象添加属性

Sep 18 Javascript

详解ES6 Fetch API HTTP请求实用指南

Nov 14 Javascript

antd 表格列宽自适应方法以及错误处理操作

Oct 27 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