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 相关文章推荐
javascript与CSS复习(二)
Jun 29 Javascript
jQuery实现密保互斥问题解决方案
Aug 16 Javascript
网页中可关闭的漂浮窗口实现可自行调节
Aug 20 Javascript
什么是cookie?js手动创建和存储cookie
May 27 Javascript
jQuery实现自定义事件的方法
Apr 17 Javascript
HTML5使用DeviceOrientation实现摇一摇功能
Jun 05 Javascript
JavaScript DOM 学习总结(五)
Nov 24 Javascript
基于jQuery实现文本框只能输入数字(小数、整数)
Jan 14 Javascript
jQuery悬停文字提示框插件jquery.tooltipster.js用法示例【附demo源码下载】
Jul 19 Javascript
BootstrapTable+KnockoutJS自定义T4模板快速生成增删改查页面
Aug 01 Javascript
微信小程序中页面FOR循环和嵌套循环
Jun 21 Javascript
Angular 多级路由实现登录页面跳转(小白教程)
Nov 19 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 register_shutdown_function函数的深入解析
2013/06/03 PHP
jquery ui dialog里调用datepicker的问题
2009/08/06 Javascript
JS TextArea字符串长度限制代码集合
2012/10/31 Javascript
JSON序列化与解析原生JS方法且IE6和chrome测试通过
2013/09/05 Javascript
JS实现多物体缓冲运动实例代码
2013/11/29 Javascript
jquery简单图片切换显示效果实现方法
2015/01/14 Javascript
jQuery插件bxSlider实现响应式焦点图
2015/04/12 Javascript
JS简单限制textarea内输入字符数量的方法
2015/10/14 Javascript
jQuery+PHP+MySQL二级联动下拉菜单实例讲解
2015/10/27 Javascript
jquery基础知识第一讲之认识jquery
2016/03/17 Javascript
通过Tabs方法基于easyUI+bootstrap制作工作站
2016/03/28 Javascript
BootStrap下拉菜单和滚动监听插件实现代码
2016/09/26 Javascript
H5移动端适配 Flexible方案
2016/10/24 Javascript
Angular的MVC和作用域
2016/12/26 Javascript
js实现华丽的九九乘法表效果
2017/03/29 Javascript
详解如何让Express支持async/await
2017/10/09 Javascript
Vue.js 表单控件操作小结
2018/03/29 Javascript
vuejs前后端数据交互之从后端请求数据的实例
2018/08/11 Javascript
转换layUI的数据表格中的日期格式方法
2019/09/19 Javascript
JavaScript实现指定数量的并发限制的示例代码
2020/03/10 Javascript
如何搭建一个完整的Vue3.0+ts的项目步骤
2020/10/18 Javascript
vue-axios同时请求多个接口 等所有接口全部加载完成再处理操作
2020/11/09 Javascript
Python新手实现2048小游戏
2015/03/31 Python
python从网络读取图片并直接进行处理的方法
2015/05/22 Python
python比较两个列表大小的方法
2015/07/11 Python
浅谈python socket函数中,send与sendall的区别与使用方法
2017/05/09 Python
Python的log日志功能及设置方法
2019/07/11 Python
python Django中models进行模糊查询的示例
2019/07/18 Python
Python实现不规则图形填充的思路
2020/02/02 Python
爱尔兰旅游网站:ebookers.ie
2020/01/24 全球购物
高校毕业生自我鉴定
2013/10/27 职场文书
借条格式范本
2015/05/25 职场文书
实习单位意见
2015/06/04 职场文书
关于童年的读书笔记
2015/06/26 职场文书
2016国培研修心得体会
2016/01/08 职场文书
如何使用JavaScript策略模式校验表单
2021/04/29 Javascript