<!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. Spring MVC 获取前端参数的注解

    在与前端交互的开发过程中,出现过几次无法取到参数的情况,费了些时间去排查问题,下面就简单总结一下. 注解详解 我们所要获取的前端传递参数大概可以分为以下四类: requet uri 部分的注解:@Pa ...

  2. 谈谈android 布局 的优化

    来自:http://www.cnblogs.com/youxilua/archive/2012/05/08/2489414.html 导言 设配android的屏幕一定是一个噩梦,就好比那些搞网页设计 ...

  3. mysql的乱码问题

    ALTER TABLE `news`.`snapshots` MODIFY title VARCHAR() CHARACTER SET utf8; ALTER TABLE `news`.`snapsh ...

  4. hdu 5139 Formula

    http://acm.hdu.edu.cn/showproblem.php?pid=5139 思路:这道题要先找规律,f(n)=n!*(n-1)!*(n-2)!.....1!;  不能直接打表,而是离 ...

  5. STM32F10x 学习笔记5（USART实现串口通讯 1）

    STM32F10x 系列单片机中都包含了USART 模块,所谓USART,就是通用同步异步收发器.通用同步异步收发器(USART)提供了一种灵活的方法与使用工业标准NRZ异步串行数据格式的外部设备之间 ...

  6. 宏中"#"和"##"的用法

    一.一般用法 我们使用#把宏参数变为一个字符串,用##把两个宏参数贴合在一起. 用法: #include<cstdio> #include<climits> using nam ...

  7. TControl的显示函数（5个非虚函数，4个虚函数）和三个例子的执行过程（包括SetParent的例子）

    // 9个显示函数 procedure SetBounds(ALeft, ATop, AWidth, AHeight: Integer); virtual; // 虚函数,important 根据父控 ...

  8. Eqs (哈希)

    Time Limit: 5000MS   Memory Limit: 65536K Total Submissions: 10695   Accepted: 5185 Description Cons ...

  9. 【枚举】Vijos P1012 清帝之惑之雍正

    题目链接: https://vijos.org/p/1012 题目大意: 给n个坐标(n<=100 000),求直线距离最短是多少.数据较大用long long 或 double 题目思路: [ ...

  10. sharepoint2007的中文版

    今天终于下载到了sharepoint2007的中文版了,以前微软的测试板也没有中文版,今天终于下载到了,经过测试,用英文版的sn也是可以用的.微软提供的测试版,输入正式的key,就可以变成正式版了.我 ...