jquery实现

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>文字提示</title>

 <!--   引入jQuery -->

 <script src="../../scripts/jquery.js" type="text/javascript"></script>

<style type="text/css">

body{

    margin:0;

    padding:40px;

    background:#fff;

    font:80% Arial, Helvetica, sans-serif;

    color:#555;

    line-height:180%;

}

p{

    clear:both;

    margin:0;

    padding:.5em 0;

}

/* tooltip */

#tooltip{

    position:absolute;

    border:1px solid #333;

    background:#f7f5d1;

    padding:1px;

    color:#333;

    display:none;

}

</style>

<script type="text/javascript">

//<![CDATA[

$(function(){

    var x = 10;

    var y = 20;

    $("a.tooltip").mouseover(function(e){

           this.myTitle = this.title;

        this.title = "";

        var tooltip = "<div id='tooltip'>"+ this.myTitle +"<\/div>"; //创建 div 元素

        $("body").append(tooltip);    //把它追加到文档中

        $("#tooltip")

            .css({

                "top": (e.pageY+y) + "px",

                "left": (e.pageX+x)  + "px"

            }).show("fast");      //设置x坐标和y坐标，并且显示

    }).mouseout(function(){

        this.title = this.myTitle;

        $("#tooltip").remove();   //移除

    }).mousemove(function(e){

        $("#tooltip")

            .css({

                "top": (e.pageY+y) + "px",

                "left": (e.pageX+x)  + "px"

            });

    });

})

//]]>

</script>

</head>

<body>

<p><a href="#" class="tooltip" title="这是我的超链接提示1.">提示1.</a></p>

<p><a href="#" class="tooltip" title="这是我的超链接提示2.">提示2.</a></p>

<p><a href="#" title="这是自带提示1.">自带提示1.</a></p>

<p><a href="#" title="这是自带提示2.">自带提示2.</a> </p>

</body>

</html>

手写 title 提示的更多相关文章

  1. 简易-五星评分-jQuery纯手写

    超级简单的评分功能,分为四个步骤轻松搞定: 第一步: 引入jquery文件:这里我用百度CDN的jquery: <script src="http://apps.bdimg.com/l ...

  2. 超级简单的jQuery纯手写五星评分效果

    超级简单的评分功能,分为四个步骤轻松搞定: 第一步: 引入jquery文件:这里我用百度CDN的jquery: <script src="http://apps.bdimg.com/l ...

  3. 手把手集成web端手写公式功能

    何为手写公式,很简单,就是在网页上可以写出数学公式,并能够生成Latex格式的字符串.废话不多说,直接走正题. 一.首先大家可以先去官网了解一下myscript这个插件 官方网站:https://de ...

  4. 一套手写ajax加一般处理程序的增删查改

    倾述下感受:8天16次驳回.这个惨不忍睹. 好了不说了,说多了都是泪. 直接上代码 : 这个里面的字段我是用动软生成的,感觉自己手写哪些字段太浪费时间了,说多了都是泪 ajax.model层的代码: ...

  5. Atitit s2018.2 s2 doc list on home ntpc.docx  \Atiitt uke制度体系 法律 法规 规章 条例 国王诏书.docx \Atiitt 手写文字识别 讯飞科大 语音云.docx \Atitit 代码托管与虚拟主机.docx \Atitit 企业文化 每日心灵 鸡汤 值班 发布.docx \Atitit 几大研发体系对比 Stage-Gat

    Atitit s2018.2 s2 doc list on home ntpc.docx \Atiitt uke制度体系  法律 法规 规章 条例 国王诏书.docx \Atiitt 手写文字识别   ...

  6. CSS实现自定义手型气泡提示

    实现自定义的手型气泡提示 <html> <head> <meta charset="utf-8"> <title></titl ...

  7. 手写控件，frame，center和bounds属性

    一.手写控件 1.手写控件的步骤 (1)使用相应的控件类创建控件对象 (2)设置该控件的各种属性 (3)添加控件到视图中 (4)如果是button等控件,还需考虑控件的单击事件等 (5)注意:View ...

  8. .net学习之Session、Cookie、手写Ajax代码以及请求流程

    1.IIS 7 以上版本集成了两种模式,一种是经典模式,一种是集成模式(直接将asp.net框架集成到IIS中) 2.浏览器和服务器端通过什么技术来实现的?Socket(套接字),通信的语法是HTTP ...

  9. iOS开发UI篇—手写控件，frame，center和bounds属性

    iOS开发UI基础—手写控件,frame,center和bounds属性 一.手写控件 1.手写控件的步骤 (1)使用相应的控件类创建控件对象 (2)设置该控件的各种属性 (3)添加控件到视图中 (4 ...

随机推荐

  1. cache的工作原理

    http://www.360doc.com/content/11/0307/21/3791508_99049437.shtml TLB(Translation Lookaside Buffer,也称快 ...

  2. lightoj 1026 无向图 求桥

    题目链接:http://lightoj.com/volume_showproblem.php?problem=1026 #include<cstdio> #include<cstri ...

  3. hdu 4681 最长公共子序列+枚举

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4681 #include<cstdio> #include<cstring> # ...

  4. poj 1556 The door

    题目链接:http://poj.org/problem?id=1556 #include<cstdio> #include<cstring> #include<cmath ...

  5. java中字节流和字符流的区别

    流分类: 1.Java的字节流   InputStream是所有字节输入流的祖先,而OutputStream是所有字节输出流的祖先.2.Java的字符流  Reader是所有读取字符串输入流的祖先,而 ...

  6. JS中timestamp日期类型的转换

    在JS中获取timestamp:var timestamp=Math.round(new Date().getTime()/1000); 在JS中将timestamp转换为Date: Date.pro ...

  7. Java学习的随笔（3）接口

    首先是一段<Java编程思想>中,对接口的解释:“interface这个关键字产生一个完全抽象的类,它根本就没有提供任何具体的实现.它允许创建者确定方法名.参数列表.返回类型,但是没有任何 ...

  8. DataGridView的DataGridViewComboBoxColumn列点击一次，自动处于编辑状态

    本文转载:http://www.cnblogs.com/Johnny_Z/archive/2012/02/12/2348235.html Winform中的DataGridView数据绑定控件有时会用 ...

  9. MySQL Replication, 主从和双主配置

    MySQL Replication, 主从和双主配置 MySQL的Replication是一种多个MySQL的数据库做主从同步的方案,特点是异步,广泛用在各种对MySQL有更高性能,更高可靠性要求的场 ...

  10. Linux下一个Redis启动/关闭/重新启动服务脚本

    脚本功能: 实现redis单机多实例情况下的正常启动.关闭.重新启动单个redis实例.完毕系统标准服务的下面经常使用功能:  start|stop|status|restart 注:redis程序代 ...