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 巧妙去除数组中的重复项
Jan 25 Javascript
jquery中通过过滤器获取表单元素的实现代码
Jul 05 Javascript
c#和Javascript操作同一json对象的实现代码
Jan 17 Javascript
JS实现判断滚动条滚到页面底部并执行事件的方法
Dec 18 Javascript
jQuery点缩略图弹出层显示大图片
Feb 13 Javascript
javascript遇到html5的一些表单属性
Jul 05 Javascript
AngularJS 入门教程之HTML DOM实例详解
Jul 28 Javascript
javascript 数组的正态分布排序的问题
Jul 31 Javascript
js实现的xml对象转json功能示例
Dec 24 Javascript
Angular.js中angular-ui-router的简单实践
Jul 18 Javascript
vue.js实现照片放大功能
Jun 23 Javascript
在vue项目中promise解决回调地狱和并发请求的问题
Nov 09 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初学者们头痛的十四个问题
2007/01/15 PHP
PHP常用技巧总结(附函数代码)
2012/02/04 PHP
php版微信js-sdk支付接口类用法示例
2016/10/12 PHP
表单项的name命名为submit、reset引起的问题
2007/12/22 Javascript
基于jquery的划词搜索实现(备忘)
2010/09/14 Javascript
javascript结合ajax读取txt文件内容
2014/12/05 Javascript
node.js中的http.get方法使用说明
2014/12/14 Javascript
javascript浏览器窗口之间传递数据的方法
2015/01/20 Javascript
封装好的一个万能检测表单的方法
2015/01/21 Javascript
jquery实现点击查看更多内容控制段落文字展开折叠效果
2015/08/06 Javascript
JS实现iframe编辑器光标位置插入内容的方法(兼容IE和Firefox)
2016/06/24 Javascript
JS自定义滚动条效果简单实现代码
2020/10/27 Javascript
js下拉菜单生成器dropMenu使用方法详解
2017/08/01 Javascript
webpack+vue中使用别名路径引用静态图片地址
2017/11/20 Javascript
原生JS实现的轮播图功能详解
2018/08/06 Javascript
LayerClose弹窗关闭刷新方法
2018/08/17 Javascript
Vue axios设置访问基础路径方法
2018/09/19 Javascript
Vue3新特性之在Composition API中使用CSS Modules
2020/07/13 Javascript
聊聊vue 中的v-on参数问题
2021/01/29 Vue.js
[04:29]2014DOTA2国际邀请赛 主赛事第三日TOPPLAY
2014/07/21 DOTA
[01:09]DOTAPLUS——DOTA2的新时代
2018/04/04 DOTA
[46:21]Liquid vs LGD 2018国际邀请赛淘汰赛BO3 第一场 8.23
2018/08/24 DOTA
跟老齐学Python之一个免费的实验室
2014/09/14 Python
Win7 64位下python3.6.5安装配置图文教程
2020/10/27 Python
Python3 jupyter notebook 服务器搭建过程
2018/11/30 Python
关于Pytorch MaxUnpool2d中size操作方式
2020/01/03 Python
CSS3 旋转立方体问题详解
2020/01/09 HTML / CSS
使用canvas绘制贝塞尔曲线
2014/12/17 HTML / CSS
加拿大高尔夫超市:Golf Town
2018/01/12 全球购物
化学学院毕业生自荐信范文
2013/12/17 职场文书
信息与计算科学专业推荐信
2014/02/23 职场文书
交通文明倡议书
2014/05/16 职场文书
大学军训口号大全
2015/12/24 职场文书
导游经典开场白——导游词
2019/04/17 职场文书
聊聊pytorch测试的时候为何要加上model.eval()
2021/05/23 Python
python 详解turtle画爱心代码
2022/02/15 Python