本文实例讲述了jQuery实现鼠标跟随提示层效果代码。分享给大家供大家参考,具体如下:
运行效果截图如下:
Web网站有不少需要用到tip提示层的地方,结合jquery的jquery.cluetip.js ,可以实现本地字符或ajax异步调用显示提示层。如以上购评分明细提示。(优势:宽度需要调用页加载时定义,高度auto,且三角指定图标能根据显示层的大小位置来调用它的位置,达到醒目直观的效果)
jquery.cluetip.css
jquery-1.3.2.min.js -- 官方网可下载,这里不再表述。(必须) jquerycluetipLoad.js --提示层的基本参数和属性的定义。
提示层。
* 创建人:fooo
* 创建日期:09-09-23
* 修改人:
* 修改日期:
* 本地字符提示示例:标题|<%=Str()%>">我们的
* Ajax异步调用文件且提示示例:
- " >clueTip - Ajax异步提示1 @H_403_22@ * * 改变提示层宽度大小,只需在调用页加入: $.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: '


更多关于jQuery相关内容感兴趣的读者可查看本站专题:《》、《》、《》、《》、《》、《》、《》及《》
希望本文所述对大家jQuery程序设计有所帮助。