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的函数
Jan 31 Javascript
DOM相关内容速查手册
Feb 07 Javascript
js checkbox(复选框) 使用集锦
Apr 28 Javascript
JS小框架 fly javascript framework
Nov 26 Javascript
jquery获取一组checkbox的值(实例代码)
Nov 04 Javascript
JQueryiframe页面操作父页面中的元素与方法(实例讲解)
Nov 19 Javascript
HTML+CSS+JS实现完美兼容各大浏览器的TABLE固定列
Apr 26 Javascript
微信小程序 slider 详解及实例代码
Jan 10 Javascript
vue-cli整合vuex的时候,修改actions和mutations,实现热部署的方法
Sep 19 Javascript
vue router 源码概览案例分析
Oct 09 Javascript
基于elementUI实现图片预览组件的示例代码
Mar 31 Javascript
小程序使用分包的示例代码
Mar 23 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中去除所有js,html,css代码
2010/10/12 PHP
PHP实现数据四舍五入的方法小结【4种方法】
2019/03/27 PHP
Jquery数独游戏解析(一)-页面布局
2010/11/05 Javascript
javascript中encodeURI和decodeURI方法使用介绍
2013/05/06 Javascript
关于Jquery操作Cookie取值错误的解决方法
2013/08/26 Javascript
jquery操作cookie插件分享
2014/01/14 Javascript
利用jQuery实现可以编辑的表格
2014/05/26 Javascript
JavaScript实现的简单幂函数实例
2015/04/17 Javascript
php利用curl获取远程图片实现方法
2015/10/26 Javascript
jQuery AJAX timeout 超时问题详解
2016/06/21 Javascript
详细探究ES6之Proxy代理
2016/07/22 Javascript
JS获得多个同name 的input输入框的值的实现方法
2017/01/09 Javascript
jQuery操作css样式
2017/05/15 jQuery
全面解析JavaScript Module模式
2020/07/24 Javascript
python实现txt文件格式转换为arff格式
2018/05/31 Python
python绘制中国大陆人口热力图
2018/11/07 Python
Python 利用切片从列表中取出一部分使用的方法
2019/02/01 Python
django query模块
2019/04/20 Python
Python模块、包(Package)概念与用法分析
2019/05/31 Python
Python批量查询关键词微信指数实例方法
2019/06/27 Python
Keras—embedding嵌入层的用法详解
2020/06/10 Python
10行Python代码实现Web自动化管控的示例代码
2020/08/14 Python
Pycharm自带Git实现版本管理的方法步骤
2020/09/18 Python
西班牙英格列斯百货官网:El Corte Inglés
2016/09/25 全球购物
澳大利高级泳装品牌:Bondi Born
2018/05/23 全球购物
Audible英国:有声读物,30天免费试用
2019/10/16 全球购物
电大奖学金获奖感言
2014/08/14 职场文书
助人为乐道德模范事迹材料
2014/08/16 职场文书
2015年教务工作总结
2015/05/23 职场文书
新郎新娘致辞
2015/07/31 职场文书
爱心捐款倡议书:点燃希望,传递温暖
2019/11/04 职场文书
CSS3 制作精美的定价表
2021/04/06 HTML / CSS
MySQL触发器的使用
2021/05/24 MySQL
SpringCloud Alibaba项目实战之nacos-server服务搭建过程
2021/06/21 Java/Android
如何解决php-fpm启动不了问题
2021/11/17 PHP
MySQL 原理与优化之原数据锁的应用
2022/08/14 MySQL