jQuery实现的超链接提示效果示例【附demo源码下载】

更新时间：2016年09月09日 12:04:36 作者：onestopweb

这篇文章主要介绍了jQuery实现的超链接提示效果,结合实例形式对比分析了jQuery实现的带有loading动态图效果的提示文字以及默认提示文字显示效果,并附带demo源码供读者下载参考,需要的朋友可以参考下

本文实例讲述了jQuery实现的超链接提示效果。分享给大家供大家参考，具体如下：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body>
<style type="text/css">
*{margin:0;padding:0;}
ul li{ list-style:none;}
img {border:0 none;}
body {padding:100px;}
.tooltip{position:absolute;display:none;border:1px solid #333; border-radius:8px; box-shadow:0 0 3px rgba(000,000,000,0.8);background:rgba(247,245,209,0.5);padding:3px;color:#333;display:none;}/* border-radius，box-shadow ie9以下都不兼容 */
</style>
<div class="test">
  <a href="#" class="link" title="这是我的超链接提这是我的超<br>
  <strong>链接</strong>提这是我的超链接提这是<img src='jb51.gif'>我的超<br>
  链接提这是我的超链接提这是我的超链接提示1.">自定义链接提示</a>
  <a href="#" class="link">默认title提示</a>
  <a href="#" class="link" title="自定义TITLE提示2222！！！！">自定义链接提示</a>
  <a href="#" title="原始链接TITLE提示！">原始链接title提示</a> </div>
</body>
<script src="jquery-1.7.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
  var x=10;
  var y=20;
  $(".link").mouseover(function(e){
    //alert(e.pageX);
    if(typeof($(this).attr('title'))!='undefined'){ // 判断标签中是否有定义title属性
      this.my_tit=this.title;
      this.title='';
      var tooltip="<div class='tooltip'>"+this.my_tit+"</div>";
      $("body").append(tooltip);
      $(".tooltip").css({
        display:'block',
        left: e.pageX+x,
        top: e.pageY+y
        })
      };
    }).mouseout(function(){
      if(typeof($(this).attr('title'))!='undefined'){
        this.title=this.my_tit;
        $(".tooltip").remove();
      };
    }).mousemove(function(e){// 鼠标移动时跟随
      $(".tooltip").css({
      left: e.pageX+x,
      top: e.pageY+y
    })
  })
});
</script>
</html>

运行效果截图如下：

完整实例代码点击此处本站下载。

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery拖拽特效与技巧总结》、《jQuery表格(table)操作技巧汇总》、《jquery中Ajax用法总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》

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

您可能感兴趣的文章:

jQuery插件简单学习实例教程
这篇文章主要介绍了jQuery插件的简单用法,列举了分页插件、放大镜插件、自动完成插件、上传插件、日历插件等的简单使用方法,需要的朋友可以参考下
2016-07-07
DWZ table的原生分页浅谈
接下来看一段代码，我会给大家详细介绍DWZ中table分页的使用方式，以下是在MVC中实现的方式。
2013-03-03
jQuery实现的别踩白块小游戏完整示例
这篇文章主要介绍了jQuery实现的别踩白块小游戏,结合实例形式详细分析了jQuery针对页面元素的计算、判定、动态操作相关实现技巧,需要的朋友可以参考下
2019-01-01
jQuery的ajax中使用FormData实现页面无刷新上传功能
这篇主要写如何利用ajax和FormData实现页面无刷新的文件上传效果，主要用到了jQuery的ajax()方法和XMLHttpRequest Level 2的FormData接口。需要的的朋友参考下本文
2017-01-01
jQuery实现背景滑动菜单
本篇文章分享了基于jQuery实现背景滑动菜单的实例代码。感兴趣的朋友可以下载实例运行，下面就跟小编一起来看看吧
2016-12-12
jQuery中after()方法用法实例
这篇文章主要介绍了jQuery中after()方法用法,以实例形式较为详细的分析了after()方法的功能、特性与使用技巧,具有一定的参考借鉴价值,需要的朋友可以参考下
2014-12-12
jquery如何实现锚点链接之间的平滑滚动
实现锚点链接之间的平滑滚动的方法有很多，在接下来的文章中为大家介绍下，jquery是如何实现的，感兴趣的朋友不要错过
2013-12-12
jquery 构造函数在表单提交过程中修改数据
这篇文章主要介绍了jquery 构造函数在表单提交过程中修改数据的方法，十分简单实用，有需要的小伙伴可以参考下。
2015-05-05
浅析jquery如何判断滚动条滚到页面底部并执行事件
jquery如何判断滚动条滚到页面底部并执行事件？下面小编就为大家带来一篇jquery判断滚动条滚到页面底部并执行事件方法。希望对大家有所帮助，一起跟随小编过来看看吧
2016-04-04
jquery tmpl模板(实例讲解)
下面小编就为大家带来一篇jquery tmpl模板(实例讲解)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-09-09