jQuery实现鼠标跟随提示层效果代码(可显示文本,Div,Table,Html等)


Posted in Javascript onApril 18, 2016

本文实例讲述了jQuery实现鼠标跟随提示层效果代码。分享给大家供大家参考,具体如下:

运行效果截图如下:

jQuery实现鼠标跟随提示层效果代码(可显示文本,Div,Table,Html等)

Web网站有不少需要用到tip提示层的地方,结合jquery的jquery.cluetip.js ,可以实现本地字符或ajax异步调用显示提示层。如以上购评分明细提示。(优势:宽度需要调用页加载时定义,高度auto , 且三角指定图标能根据显示层的大小位置来调用它的位置,达到醒目直观的效果)

jquery.cluetip.css

/* global */
#cluetip-close img {
 border: 0;
}
#cluetip-title {
 overflow: hidden;
}
#cluetip-title #cluetip-close {
 float: right;
 position: relative;
}
#cluetip-waitimage {
 width: 43px;
 height: 11px;
 position: absolute;
 background-image: url(../img_new/cluetipwait.gif);
}
.cluetip-arrows {
 display: none;
 position: absolute;
 top: 0;
 left: -11px;
 height: 22px;
 width: 11px;
 background-repeat: no-repeat;
 background-position: 0 0;
}
#cluetip-extra {
 display: none;
}
/***************************************
  =cluetipClass: 'default' 
-------------------------------------- */
.cluetip-default {
 background-color: #d9d9c2;
}
.cluetip-default #cluetip-outer {
 position: relative;
 margin: 0;
 background-color: #d9d9c2;
}
.cluetip-default h3#cluetip-title {
 margin: 0 0 5px;
 padding: 8px 10px 4px;
 font-size: 14px;
 font-weight: normal;
 background-color: #87876a;
 color: #fff;
}
.cluetip-default #cluetip-title a {
 color: #d9d9c2;
 font-size: 0.95em;
} 
.cluetip-default #cluetip-inner {
 padding: 10px;
}
.cluetip-default div#cluetip-close { 
 text-align: right;
 margin: 0 5px 5px;
 color: #900;
}
/* default arrows */
.clue-right-default .cluetip-arrows {
 background-image: url(../img_new/cluetipdarrowleft.gif);
}
.clue-left-default .cluetip-arrows {
 background-image: url(../img_new/cluetipdarrowright.gif);
 left: 100%;
 margin-right: -11px;
}
.clue-top-default .cluetip-arrows {
 background-image: url(../img_new/cluetipdarrowdown.gif);
 top: 100%;
 left: 50%;
 margin-left: -11px;
 height: 11px;
 width: 22px; 
} 
.clue-bottom-default .cluetip-arrows {
 background-image: url(../img_new/cluetipdarrowup.gif);
 top: -11px;
 left: 50%;
 margin-left: -11px;
 height: 11px;
 width: 22px;
}
/***************************************
  =cluetipClass: 'jtip'
-------------------------------------- */
.cluetip-jtip {
 background-color: transparent;
  display:none;
}
.cluetip-jtip #cluetip-outer {
 border: 1px solid #559EF8;
 position: relative;
 background-color: #fff;
}
.cluetip-jtip h3#cluetip-title {
 margin: 0 0 5px;
 padding: 2px 5px;
 font-size: 12px;
 font-weight: normal;
 background-color: #559EF8;
 color: #fff; 
}
.cluetip-jtip #cluetip-inner {
 padding: 0 5px 5px;
 display: inline-block;
}
.cluetip-jtip div#cluetip-close { 
 text-align: right;
 margin: 0 5px 5px;
 color: #900; 
 display:none;
}
/* jtip arrows */
.clue-right-jtip .cluetip-arrows {
 background-image: url(../img_new/cluetiparrowleft.gif);
}
.clue-left-jtip .cluetip-arrows {
 background-image: url(../img_new/cluetiparrowright.gif);
 left: 100%;
 margin-right: -11px;
}
.clue-top-jtip .cluetip-arrows {
 background-image: url(../img_new/cluetiparrowdown.gif);
 top: 100%;
 left: 50%;
 margin-left: -11px;
 height: 11px;
 width: 22px; 
} 
.clue-bottom-jtip .cluetip-arrows {
 background-image: url(../img_new/cluetiparrowup.gif);
 top: -11px;
 left: 50%;
 margin-left: -11px;
 height: 11px;
 width: 22px;
}
/***************************************
  =cluetipClass: 'rounded'
-------------------------------------- */
.cluetip-rounded {
 background: transparent url(../img_new/cluetipbl.gif) no-repeat 0 100%;
 margin-top: 10px;
 margin-left: 12px;
}
.cluetip-rounded #cluetip-outer {
 background: transparent url(../img_new/cluetiptl.gif) no-repeat 0 0;
 margin-top: -12px;
}
.cluetip-rounded #cluetip-title {
 background-color: transparent;
 padding: 12px 12px 0;
 margin: 0 -12px 0 0;
 position: relative;
}
.cluetip-rounded #cluetip-extra {
 position: absolute;
 display: block;
 background: transparent url(../img_new/cluetiptr.gif) no-repeat 100% 0;
 top: 0;
 right: 0;
 width: 12px;
 height: 30px;
 margin: -12px -12px 0 0;
}
.cluetip-rounded #cluetip-inner {
 background: url(../img_new/cluetipbr.gif) no-repeat 100% 100%;
 padding: 5px 12px 12px;
 margin: -18px -12px 0 0;
 position: relative;
}
.cluetip-rounded div#cluetip-close { 
 text-align: right;
 margin: 0 5px 5px;
 color: #009;
 background: transparent;
}
.cluetip-rounded div#cluetip-close a {
 color: #777;
}
/* rounded arrows */
.clue-right-rounded .cluetip-arrows {
 background-image: url(../img_new/cluetiprarrowleft.gif);
}
.clue-left-rounded .cluetip-arrows {
 background-image: url(../img_new/cluetiprarrowright.gif);
 left: 100%;
 margin-left: 12px;
}
.clue-top-rounded .cluetip-arrows {
 background-image: url(../img_new/cluetiprarrowdown.gif);
 top: 100%;
 left: 50%;
 margin-left: -11px;
 height: 11px;
 width: 22px; 
} 
.clue-bottom-rounded .cluetip-arrows {
 background-image: url(../img_new/cluetiprarrowup.gif);
 top: -23px;
 left: 50%;
 margin-left: -11px;
 height: 11px;
 width: 22px;
}
/* stupid IE6 HasLayout hack */
.cluetip-rounded #cluetip-title,
.cluetip-rounded #cluetip-inner {
 zoom: 1;
}
.float-left {
 float: left;
 margin-right: .5em;
 display: inline;
 position: relative;
}
.float-right {
 float: right;
 margin-left: .5em;
 display: inline;
 position: relative;
}

jquery-1.3.2.min.js  -- 官方网可下载,这里不再表述。(必须)
jquerycluetipLoad.js  --提示层的基本参数和属性的定义。

/* Jquery 鼠标跟随提示层。
 * 创建人:fooo
 * 创建日期:09-09-23
 * 修改人:
 * 修改日期:
 * 本地字符提示示例:<span title="标题|<%=Str()%>"><a href="#" >我们的</a></span>
 * Ajax异步调用文件且提示示例:<ol><li><a class="jt" href="#" title="评分项目明细" rel="HandlerAjax.ashx?Name=<%=Security.EncryptQueryString("我们的我我我人大")%>" >clueTip - Ajax异步提示1</a> </li></ol>
 *
 * 改变提示层宽度大小,只需在调用页加入: $.fn.cluetip.defaults.width = '100'; -根据大小调整。
 */
 // $.fn.cluetip.defaults.tracking = true;
 // $.fn.cluetip.defaults.width = 'auto';
$(document).ready(function() 
{
 //default theme
 $('a.title').cluetip({splitTitle: '|'});
 $('a.basic').cluetip();
 $('a.custom-width').cluetip({width: '200px', showTitle: false});
 $('h4').cluetip({attribute: 'id', hoverClass: 'highlight'});
 $('#sticky').cluetip({sticky: true, closePosition: 'title', arrows: true });
 $('#examples a:eq(5)').cluetip({
  hoverClass: 'highlight',
  sticky: true,
  closePosition: 'bottom',
  closeText: '<img src="../img_new/cluetipcross.png" alt="close" width="16" height="16" />',
  truncate: 60
 });
 $('a.load-local').cluetip({local:true, hideLocal: true, sticky: true, arrows: true, cursor: 'pointer'});
 $('#clickme').cluetip({activation: 'click', sticky: true, width: 250});
 $('ol:first a:last').cluetip({tracking: true});
 //jTip theme
 $('a.jt:eq(0)').cluetip({
  cluetipClass: 'jtip', 
  arrows: true, 
  dropShadow: false,
  sticky: true,
  mouseOutClose: true,
  closePosition: 'title',
  closeText: '<img src="../img_new/cluetipcross.png" alt="close" />'
 });
 $('a.jt:eq(1)').cluetip({cluetipClass: 'jtip', arrows: true, dropShadow: false, hoverIntent: false});
 $('span[title]').css({borderBottom: '0px solid #900'}).cluetip({splitTitle: '|', arrows: true, dropShadow: false, cluetipClass: 'jtip'});
 $('a.jt:eq(2)').cluetip({
  cluetipClass: 'jtip', 
  arrows: true, 
  dropShadow: false, 
  height: '150px', 
  sticky: true,
  positionBy: 'bottomTop'  
 });
 $('a.jt:eq(3)').cluetip({local: true, hideLocal: false});
 $('a.jt:eq(4)').cluetip({
  cluetipClass: 'jtip', arrows: true, 
  dropShadow: false, 
  onActivate: function(e) {
   var cb = $('#cb')[0];
   return !cb || cb.checked;
  }
 });
// Rounded Corner theme
 $('ol.rounded a:eq(0)').cluetip({splitTitle: '|', dropShadow: false, cluetipClass: 'rounded', showtitle: false});
 $('ol.rounded a:eq(1)').cluetip({cluetipClass: 'rounded', dropShadow: false, showtitle: false, positionBy: 'mouse'});
 $('ol.rounded a:eq(2)').cluetip({cluetipClass: 'rounded', dropShadow: false, showtitle: false, positionBy: 'bottomTop', topOffset: 70});
 $('ol.rounded a:eq(3)').cluetip({cluetipClass: 'rounded', dropShadow: false, sticky: true, ajaxCache: false, arrows: true});
 $('ol.rounded a:eq(4)').cluetip({cluetipClass: 'rounded', dropShadow: false});  
});

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

Javascript 相关文章推荐
Jquery实现仿新浪微博获取文本框能输入的字数代码
Feb 22 Javascript
javascript随机之洗牌算法深入分析
Jun 07 Javascript
分享28款免费实用的 JQuery 图片和内容滑块插件
Dec 15 Javascript
js动态获取子复选项并设计全选及提交的实现方法
Jun 24 Javascript
利用vue实现模态框组件
Dec 19 Javascript
jQuery Validate表单验证插件的基本使用方法及功能拓展
Jan 04 Javascript
javascript将list转换成树状结构的实例
Sep 08 Javascript
Vue组件开发之LeanCloud带图形校验码的短信发送功能
Nov 07 Javascript
Vue中div contenteditable 的光标定位方法
Aug 25 Javascript
Vue 实现列表动态添加和删除的两种方法小结
Sep 07 Javascript
JavaScript解析机制与闭包原理实例详解
Mar 08 Javascript
OpenLayers实现图层切换控件
Sep 25 Javascript
ArtEditor富文本编辑器增加表单提交功能
Apr 18 #Javascript
JS基于MSClass和setInterval实现ajax定时采集信息并滚动显示的方法
Apr 18 #Javascript
JS区分浏览器页面是刷新还是关闭
Apr 17 #Javascript
js组件SlotMachine实现图片切换效果制作抽奖系统
Apr 17 #Javascript
JS中取二维数组中最大值的方法汇总
Apr 17 #Javascript
JS组件Bootstrap ContextMenu右键菜单使用方法
Apr 17 #Javascript
js实现select二级联动下拉菜单
Apr 17 #Javascript
You might like
ThinkPHP单字母函数(快捷方法)使用总结
2014/07/23 PHP
php使用simplexml_load_file加载XML文件并显示XML的方法
2015/03/19 PHP
thinkphp验证码的实现(form、ajax实现验证)
2016/07/28 PHP
PHP如何通过带尾指针的链表实现'队列'
2020/10/22 PHP
ExtJS 2.0实用简明教程 之ExtJS版的Hello
2009/04/29 Javascript
让FireFox支持innerText的实现代码
2009/12/01 Javascript
jQuery页面图片伴随滚动条逐渐显示的小例子
2013/03/21 Javascript
Underscore.js常用方法总结
2015/02/28 Javascript
js检测iframe是否加载完成的方法
2015/11/26 Javascript
使用JS中的exec()方法构造正则表达式验证
2016/08/01 Javascript
js实现可输入可选择的select下拉框
2016/12/21 Javascript
JavaScript正则表达式简单实用实例
2017/06/23 Javascript
使用Bootrap和Vue实现仿百度搜索功能
2017/10/26 Javascript
解决vue 引入子组件报错的问题
2018/09/06 Javascript
原生JS实现DOM加载完成马上执行JS代码的方法
2018/09/07 Javascript
微信小程序实现动态显示和隐藏某个控件功能示例
2018/12/14 Javascript
vuejs简单验证码功能完整示例
2019/01/08 Javascript
了解JavaScript中的选择器
2019/05/24 Javascript
vue指令v-html使用过滤器filters功能实例
2019/10/25 Javascript
[01:30]2016国际邀请赛中国区预选赛神秘商店火爆开启
2016/06/26 DOTA
[04:10]2018年度CS GO玩家最喜爱的主播-完美盛典
2018/12/16 DOTA
介绍Python的@property装饰器的用法
2015/04/28 Python
在Python中使用gRPC的方法示例
2018/08/08 Python
python实现简单多人聊天室
2018/12/11 Python
Django使用中间键实现csrf认证详解
2019/07/22 Python
纯CSS3打造动感漂亮时尚的扇形菜单
2014/03/18 HTML / CSS
Yummie官方网站:塑身衣和衣柜必需品
2019/10/29 全球购物
什么是封装
2013/03/26 面试题
教师应聘个人求职信
2013/12/10 职场文书
驾驶员岗位职责
2014/01/29 职场文书
财务情况说明书范文
2014/05/06 职场文书
财政局党的群众路线教育实践活动整改方案
2014/09/21 职场文书
2014年自愿离婚协议书范本
2014/09/25 职场文书
HTML5 语义化标签(移动端必备)
2021/08/23 HTML / CSS
Python 游戏大作炫酷机甲闯关游戏爆肝数千行代码实现案例进阶
2021/10/16 Python
Python中的pprint模块
2021/11/27 Python