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 相关文章推荐
JS阻止用户多次提交示例代码
Mar 26 Javascript
js获取UserControl内容为拼html时提供方便
Nov 02 Javascript
超详细的javascript数组方法汇总
Nov 21 Javascript
Underscore源码分析
Dec 30 Javascript
JS与Ajax Get和Post在使用上的区别实例详解
Jun 08 Javascript
如何以Angular的姿势打开Font-Awesome详解
Apr 22 Javascript
JS中DOM元素的attribute与property属性示例详解
Sep 04 Javascript
vue-cli 打包使用history模式的后端配置实例
Sep 20 Javascript
ES6知识点整理之对象解构赋值应用示例
Apr 17 Javascript
了解JavaScript表单操作和表单域
May 27 Javascript
node事件循环和process模块实例分析
Feb 14 Javascript
如何在VUE中使用vue-awesome-swiper
Jan 04 Vue.js
分享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/12/14 PHP
php笔记之:有规律大文件的读取与写入的分析
2013/04/26 PHP
laravel创建类似ThinPHP中functions.php的全局函数
2016/11/26 PHP
初学JavaScript_03(ExtJs Grid的简单使用)
2008/10/02 Javascript
JavaScript 存在陷阱 删除某一区域所有节点
2010/05/10 Javascript
JavaScript中为元素加上name属性的方法
2011/05/09 Javascript
Js与下拉列表处理问题解决
2014/02/13 Javascript
用javascript关闭本窗口不弹出询问框的方法
2014/09/12 Javascript
jQuery插件jcrop+Fileapi完美实现图片上传+裁剪+预览的代码分享
2015/04/22 Javascript
基于jQuery+PHP+Mysql实现在线拍照和在线浏览照片
2015/09/06 Javascript
基于JavaScript实现手机短信按钮倒计时(超简单)
2015/12/30 Javascript
Javascript数组Array方法解读
2016/03/13 Javascript
解决微信浏览器Javascript无法使用window.location.reload()刷新页面
2016/06/21 Javascript
jQuery滚动新闻实现代码
2016/06/26 Javascript
一次$.getJSON不执行的简单记录
2016/07/19 Javascript
vue实现点击选中,其他的不选中方法
2018/09/05 Javascript
vue 监听某个div垂直滚动条下拉到底部的方法
2018/09/15 Javascript
layui问题之渲染数据表格时,仅出现10条数据的解决方法
2019/09/12 Javascript
element-ui 文件上传修改文件名的方法示例
2019/11/05 Javascript
js实现微信聊天效果
2020/08/09 Javascript
[00:32]DOTA2上海特级锦标赛 COL战队宣传片
2016/03/04 DOTA
在Python中操作列表之List.pop()方法的使用
2015/05/21 Python
python3+PyQt5实现自定义流体混合窗口部件
2018/04/24 Python
pandas.DataFrame.to_json按行转json的方法
2018/06/05 Python
python爬虫库scrapy简单使用实例详解
2020/02/10 Python
使用opencv识别图像红色区域,并输出红色区域中心点坐标
2020/06/02 Python
python中实现栈的三种方法
2020/12/19 Python
美国山地自行车、露营、户外装备和服装购物网站:Aventuron
2018/05/05 全球购物
俄罗斯在线服装店:STOLNIK
2021/03/07 全球购物
软件生产职位结构化面试主要考察要素及面试题库
2015/06/12 面试题
爱岗敬业演讲稿范文
2014/01/14 职场文书
说明书格式及范文
2014/05/07 职场文书
关爱残疾人标语
2014/06/25 职场文书
出纳岗位职责
2015/01/31 职场文书
餐饮服务员岗位职责
2015/02/09 职场文书
安全责任协议书范本
2016/03/23 职场文书