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 相关文章推荐
JS与jQuery实现隔行变色的方法
Sep 09 Javascript
利用js来实现缩略语列表、文献来源链接和快捷键列表
Dec 16 Javascript
Vue keep-alive实践总结(推荐)
Aug 31 Javascript
jackson解析json字符串,首字母大写会自动转为小写的方法
Dec 22 Javascript
微信、QQ、微博、Safari中使用js唤起App
Jan 24 Javascript
JavaScript+H5实现微信摇一摇功能
May 23 Javascript
jquery实现搜索框功能实例详解
Jul 23 jQuery
详解在React中跨组件分发状态的三种方法
Aug 09 Javascript
Vue实现商品分类菜单数量提示功能
Jul 26 Javascript
jQuery-Citys省市区三级菜单联动插件使用详解
Jul 26 jQuery
浅谈vuex中store的命名空间
Nov 08 Javascript
Vue常用API、高级API的相关总结
Feb 02 Vue.js
全面解析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字符串的比较函数strcmp()与strcasecmp()的使用详解
2013/05/15 PHP
[原创]PHP正则删除html代码中a标签并保留标签内容的方法
2017/05/23 PHP
PHP数组内存利用率低和弱类型详细解读
2017/08/10 PHP
javascript Select标记中options操作方法集合
2008/10/22 Javascript
input按钮的事件处理大全
2010/12/10 Javascript
基于jQuery的公告无限循环滚动实现代码
2012/05/11 Javascript
幻灯片带网页设计中的20个奇妙应用示例小结
2012/05/27 Javascript
深入理解JavaScript系列(39):设计模式之适配器模式详解
2015/03/04 Javascript
JavaScript获取页面中超链接数量的方法
2015/11/09 Javascript
JavaScript、tab切换完整版(自动切换、鼠标移入停止、移开运行)
2016/01/05 Javascript
BootStrap Validator 版本差异问题导致的submitHandler失效问题的解决方法
2016/12/01 Javascript
URL中“#” “?” &amp;“”号的作用浅析
2017/02/04 Javascript
Vue请求JSON Server服务器数据的实现方法
2018/11/02 Javascript
详解为生产环境编译Angular2应用的方法
2018/12/10 Javascript
Vue项目路由刷新的实现代码
2019/04/17 Javascript
ES6学习笔记之字符串、数组、对象、函数新增知识点实例分析
2020/01/22 Javascript
python显示天气预报
2014/03/02 Python
Python中用于计算对数的log()方法
2015/05/15 Python
详解Python发送邮件实例
2016/01/10 Python
机器学习之KNN算法原理及Python实现方法详解
2018/07/09 Python
Scrapy框架爬取西刺代理网免费高匿代理的实现代码
2019/02/22 Python
Python常用特殊方法实例总结
2019/03/22 Python
SELENIUM自动化模拟键盘快捷键操作实现解析
2019/10/28 Python
在Django中预防CSRF攻击的操作
2020/03/13 Python
python 利用matplotlib在3D空间中绘制平面的案例
2021/02/06 Python
CSS3对背景图片的裁剪及尺寸和位置的设定方法
2016/03/07 HTML / CSS
HTML5几个设计和修改的页面范例分享
2015/09/29 HTML / CSS
怎么可以提高数据库查询数据的速度
2014/06/28 面试题
学习十八大报告感言
2014/02/04 职场文书
电子商务个人职业生涯规划范文
2014/02/12 职场文书
诚信承诺书模板
2014/05/26 职场文书
学校党的群众路线教育实践活动总结报告
2014/07/03 职场文书
德能勤绩廉个人总结
2015/02/14 职场文书
朝花夕拾读书笔记
2015/06/29 职场文书
在Python中如何使用yield
2021/06/07 Python
Java Dubbo框架知识点梳理
2021/06/26 Java/Android