<!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. js打开新的窗体不被浏览器阻止

    转载自js弹出新窗口而不会被浏览器阻止的方法有时候希望可以用js另开新窗口,但用window.open方法打开窗口总是被浏览器阻止, 可以用下面的方法打开新窗口而不会遭到拦截 1.新添加一个Form ...

  2. strcpy实现

    #include <iostream> using namespace std; char *strcpy(char *strDest, const char *strSrc) { if ...

  3. VS2010与VAssistX

    http://www.cnblogs.com/9tian/archive/2011/07/01/2095202.html 最近越来越觉得VAssistX好用,可能是以前没有去仔细研究过吧,也可能是因为 ...

  4. Rewrite的QSA是什么意思?

    原版的英文: When the replacement URI contains a query string, the default behavior of RewriteRule is to d ...

  5. java学习之 垃圾回收

    垃圾回收器始终以一个较低优先级的后台进程进行垃圾的回收工作,这样不会影响程序的正常工作. 通常只有当内存到达用尽的边缘而程序需要分配新的内存空间时,垃圾回收器才会执行. 垃圾回收的条件:1,垃圾回收器 ...

  6. NandFlash

    一.概述 1.NandFlash NAND结构能提供极高的单元密度,可以达到高存储密度,比如能达到256M,并且写入和擦除的速度也很快.应用NAND的困难在于flash的管理需要特殊的系统接口. 2. ...

  7. Laravel框架——自己写的类找不到

    composer.json my model files are stored in directory of app\models, therefor "autoload": { ...

  8. wlan的QOS配置

    WLAN QoS配置 1.1  WLAN QoS简介 802.11网络提供了基于竞争的无线接入服务,但是不同的应用需求对于网络的要求是不同的,而原始的网络不能为不同的应用提供不同质量的接入服务,所以已 ...

  9. LA 3998 Prime k-tuple

    题意:如果K个相邻素数p1,p2,p3.....pk满足pk-p1=s,称这些素数组成一个距离为s的素数K元组,输入a,b,k,s,输出区间[a,b]内距离为s的素数k元组的个数. 思路:先打到500 ...

  10. websphere安装和mvn dependency:copy-dependencies

    http://www.blogjava.net/paulwong/archive/2009/09/19/295657.html http://ljhzzyx.blog.163.com/blog/sta ...