<!DOCTYPE html>

<html content="text/html; charset=UTF-8">

<title>tooltip</title>

<script src="jquery-1.10.2.min.js" type="text/javascript"></script>

</head>

<body>

<style type="text/css">

#tooltip{

    position:absolute;

    border:1px solid #333;

    background:#333333;

    padding:10px;

    color:#e5e6f0;

    display:none;

    z-index:30;

}

div{ width:100px; height:100px; background:#000; display:inline-block;}

a{ margin:10px; float:left;}

</style>

<a href="" class="tooltip">

<div title="No.1  第一行&lt;br /&gt;

第二行&lt;br /&gt;

第三行"></div>

</a>

<a href="" class="tooltip">

<div  title="No.2  第一行&lt;br /&gt;

第二行&lt;br /&gt;

第三行"></div>

</a>

<script type="text/javascript">

(function($){

    $.fn.tjtooltip = function(set) {

        var settings = $.extend({

            xoffset : 10,

            yoffset : 20,

            tooltip : 'tooltip'

        } , set);

        var tchild = null,

            tipo   = null,

            d_t    = '';

            WinW   = $(window).width(),

            leftPx = 0,

            tipo_width = 0;

        this.hover(function(e){

            tchild = $(this).children()[0];

            d_t = tchild.title;

            tchild.title = '';

            tipo = document.createElement('p');

            tipo.id = settings.tooltip;

            tipo.innerHTML = d_t;

            document.body.appendChild(tipo);

            tipo_width = tipo.offsetWidth;

            leftPx = ( e.pageX + settings.yoffset + tipo_width ) > WinW ?

                     ( e.pageX - settings.yoffset - tipo_width ) : ( e.pageX + settings.yoffset );

            tipo.style.top = ( e.pageY - settings.xoffset ) + "px";

            tipo.style.left= leftPx + "px";

            $("#"+settings.tooltip).fadeIn('fast');

            },

            function(){

                tchild.title = d_t;

                $("#"+settings.tooltip).remove();

            }

        );

        this.mousemove(function(e){

            if(!tipo){return false;}

            leftPx = ( e.pageX + settings.yoffset + tipo_width ) > WinW ?

                     ( e.pageX - settings.yoffset - tipo_width ) : ( e.pageX + settings.yoffset );

            tipo.style.top = ( e.pageY - settings.xoffset ) + "px";

            tipo.style.left= leftPx + "px";

        });

        return this;

    }

})(jQuery);

$('a.tooltip').tjtooltip();

</script>

</body></html>

jq實現網頁個性title的更多相关文章

  1. Jquery scrollTop animate 實現動態滾動到頁面頂部

    這個方法之前都是用的錨點實現的,但是效果僵硬,動感不足! 之後參考了一些網站,發現都是用的js,於是自己想到用jquery 來做一個插件也來實現以下這個小功能. $.fn.backTop = func ...

  2. 邁向 RHCE 之路 (Day26) - Apache 網頁伺服器

    本篇將在 SELinux 安全機制及 IPTables 防火牆開啟的環境下實作,分別實作簡單網頁服務及虛擬主機 Virtual Host 設定,最後則是實作網頁中需要保護網頁時可以透過 .htacce ...

  3. 開玩樹莓派（二）：配置IP，實現無顯示器局域網內Putty連接和RDP遠程

    目錄: 開玩樹莓派(一):安裝Raspbian系統 開玩樹莓派(二):配置IP,實現無顯示器局域網內Putty連接和RDP遠程 開玩樹莓派(三):Python編程 開玩樹莓派(四):GPIO控制和遠程 ...

  4. 使用Mutex實現單一程式執行個體的注意事項（转）

    相信大家都知道在.NET程式中若要實現單一程式執行個體,一般來說有幾種方法,像是去判斷是否已經有開啟的Process是相同的程式.用Mutex與Semaphore之類的技術來判斷是否程式正在開啟.但是 ...

  5. [转载]在網頁上加入HTML5 的Video Tag，直接播放MP4、OGG…等

    在之前有一篇文章提到HTML5(為何iPhone,iPod,iPad不支援Flash,HTML5將更普及於網路世界!!)的重要性,而Html 5的主要革新是在他的語意標籤,像是<video> ...

  6. ASP.NET MVC 4.0 学习2-留言板實現

    新增專案實現留言板功能,瞭解MVC的運行機制 1,新增專案   2,添加數據庫文件message.mdf   Ctrl+W,L 打開資料庫連接,添加存放留言的Atricle表 添加字段,後點擊&quo ...

  7. [Xamarin.Android] 結合Windows Azure與Google cloud message 來實現Push Notification （转帖）

    這一篇要討論如何使用Xamarin.Android 整合GCM以及Windows Azure來實作Android手機上的推播通知服務. 這篇文章比較著重概念的部分,在開始讀這篇之前,也可以先參考一下X ...

  8. jQueryMobile 網頁使用 ASP.NET Web API 服務

    微軟的 ASP.NET Web API 框架,能以 RESTful 輕量級的架構風格,建立 HTTP 服務,讓多種不同的用戶端,如: 手機.平板.電腦(PC),透過 HTTP 的 GET.POST.P ...

  9. eafier 簡單易用 HTML、CSS 網頁編輯器（可自動插入 Tag 標籤）

    很久很久以前,一般人要做網頁的話大概都會用 FrontPage 之類的工具,更進階一點的會用 Dreamweaver 等軟體.雖然上述軟體提供很方便的「所見即所得」的編輯預覽模式,但寫出來的網頁程式碼 ...

随机推荐

  1. Flask jQuery ajax

    http://www.runoob.com/jquery/jquery-ref-ajax.html http://jun1986.iteye.com/blog/1399242 下面是jQuery官方给 ...

  2. C#.NET快速开发框架-企业版V4.0截图打包下载

    C/S系统开发框架-企业版 V4.0 (Enterprise Edition) http://www.csframework.com/cs-framework-4.0.htm 其它图片打包下载: ht ...

  3. IOS设计模式之三：MVC模式

    IOS设计模式之三:MVC模式   模型-视图-控制器 这个模式其实应该叫做MCV,用控制器把model与view隔开才对,也就是model与view互相不知道对方的存在,没有任何瓜葛,他们就像一个团 ...

  4. Swift中KIF测试的特点－b

    我最近在忙着回归到过去测试代码的老路子,使用KIF和XCTest框架,这样会使得iOS中的测试变得简单.当我开始捣鼓KIF的时候,我用Swift写的应用出了点小问题,不过最终还是很机智的搞定了.在我写 ...

  5. Java中swap解惑

    直接上代码…… public class Swap { public static void main(String[] args) { int a[] = new int[]{1,2}; Syste ...

  6. cf D George and Interesting Graph

    题意:给你一个有趣图的定义:在这个图中有一个根,根与每个点都有边和回边,除了根之外,其他的点的出度和入度都为2,然后给你一个图让你经过几步操作可以使此图变为有趣图,操作为:删边或者加边. 思路:枚举根 ...

  7. 稍加详细的ATR信息，将完善历史字节部分+

    http://blog.csdn.net/jennyvenus/article/details/2900697 //Reset 3B FB 13 00 00 81 31 FE 45 65 46 53 ...

  8. Pie（二分）

    ime Limit: 1000MS   Memory Limit: 65536K Total Submissions: 8930   Accepted: 3235   Special Judge De ...

  9. COJ 2105 submatrix

    submatrix 难度级别: A: 编程语言:不限:运行时间限制:2000ms: 运行空间限制:131072KB: 代码长度限制:102400B 试题描述   小A有一个N×M的矩阵,矩阵中1~N* ...

  10. 贪心 BZOJ 3671：[Noi2014]随机数生成器

    Description   Input 第 1行包含5个整数,依次为 x_0,a,b,c,d ,描述小H采用的随机数生成算法所需的随机种子.第2行包含三个整数 N,M,Q ,表示小H希望生成一个1到 ...