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


Posted in Javascript onSeptember 09, 2016

本文实例讲述了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='3water.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实现的超链接提示效果示例【附demo源码下载】

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

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

Javascript 相关文章推荐
JQuery扩展插件Validate—4设置错误提示的样式
Sep 05 Javascript
js 弹出菜单/窗口效果
Oct 30 Javascript
老生常谈onBlur事件与onfocus事件(js)
Jul 09 Javascript
微信小程序 封装http请求实例详解
Jan 16 Javascript
快速实现jQuery多级菜单效果
Feb 01 Javascript
JS 组件系列之 bootstrap treegrid 组件封装过程
Apr 28 Javascript
Node.js编写CLI的实例详解
May 17 Javascript
JS实现Cookie读、写、删除操作工具类示例
Aug 28 Javascript
node.js中express模块创建服务器和http模块客户端发请求
Mar 06 Javascript
微信小程序 调用远程接口 给全局数组赋值代码实例
Aug 13 Javascript
Vue 实现简易多行滚动&quot;弹幕&quot;效果
Jan 02 Javascript
vue中实现图片压缩 file文件的方法
May 28 Javascript
全面解析Bootstrap表单样式的使用
Sep 09 #Javascript
jQuery+ajax读取并解析XML文件的方法
Sep 09 #Javascript
JS与jQuery实现隔行变色的方法
Sep 09 #Javascript
jQuery层次选择器用法示例
Sep 09 #Javascript
jQuery基本过滤选择器用法示例
Sep 09 #Javascript
jQuery可见性过滤选择器用法示例
Sep 09 #Javascript
javascript比较语义化版本号的实现代码
Sep 09 #Javascript
You might like
用PHP实现的四则运算表达式计算实现代码
2011/08/02 PHP
最新制作ThinkPHP3.2.3完全开发手册
2015/11/23 PHP
PHP二维数组实现去除重复项的方法【保留各个键值】
2017/12/21 PHP
PHP mongodb操作类定义与用法示例【适合mongodb2.x和mongodb3.x】
2018/06/16 PHP
基于JQuery的多标签实现代码
2012/09/19 Javascript
JS中产生20位随机数以0-9为例也可以是a-z A-Z
2014/08/01 Javascript
jquery学习总结(超级详细)
2014/09/04 Javascript
JQuery实现动态适时改变字体颜色的方法
2015/03/10 Javascript
jQuery实现带延迟的二级tab切换下拉列表效果
2015/09/01 Javascript
jQuery实现简单的DIV拖动效果
2016/02/19 Javascript
jQuery Ajax 实现分页 kkpager插件实例代码
2017/08/10 jQuery
详解swipe使用及竖屏页面滚动方法
2018/06/28 Javascript
React事件处理的机制及原理
2018/12/03 Javascript
详解VUE项目中安装和使用vant组件
2019/04/28 Javascript
layui原生表单验证的实例
2019/09/09 Javascript
使用Vue.set()方法实现响应式修改数组数据步骤
2019/11/09 Javascript
javascript操作向表格中动态加载数据
2020/08/27 Javascript
Openlayers实现距离面积测量
2020/09/28 Javascript
VUE Elemen-ui之穿梭框使用方法详解
2021/01/19 Javascript
[01:05:32]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#1COL VS Alliance第一局
2016/03/04 DOTA
python正则分组的应用
2013/11/10 Python
python中enumerate的用法实例解析
2014/08/18 Python
用Python编写一个简单的FUSE文件系统的教程
2015/04/02 Python
python实现将文本转换成语音的方法
2015/05/28 Python
python函数装饰器用法实例详解
2015/06/04 Python
python进阶_浅谈面向对象进阶
2017/08/17 Python
python 输出所有大小写字母的方法
2019/01/02 Python
python设置代理和添加镜像源的方法
2020/02/14 Python
Python用类实现扑克牌发牌的示例代码
2020/06/01 Python
html5使用canvas压缩图片的示例代码
2018/09/11 HTML / CSS
编写一个 C 函数,该函数在一个字符串中找到可能的最长的子字符串,且该字符串是由同一字符组成的
2015/07/23 面试题
研究生导师推荐信
2014/09/06 职场文书
廉政文化进校园广播稿
2014/10/20 职场文书
公司总经理岗位职责
2015/04/01 职场文书
Python类方法总结讲解
2021/07/26 Python
Python 实现Mac 屏幕截图详解
2021/10/05 Python