欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

jQuery簡單實(shí)現(xiàn)title提示效果示例

 更新時(shí)間:2016年08月01日 11:54:18   作者:Quber  
這篇文章主要介紹了jQuery簡單實(shí)現(xiàn)title提示效果的方法,結(jié)合實(shí)例形式分析了jQuery封裝與使用title提示框的方法,需要的朋友可以參考下

本文實(shí)例講述了jQuery簡單實(shí)現(xiàn)title提示效果的方法。分享給大家供大家參考,具體如下:

/*
調(diào)用示例:
$(document).ready(function(){
$('.quicktip').quberTip({
 speed:200
});
});
<a href='' class='quicktip' title='Information about this link'>desktop publishing</a>
*/
jQuery.fn.quberTip = function (options) {
  var defaults = {
    speed: 500,
    xOffset: 10,
    yOffset: 10
  };
  var options = $.extend(defaults, options);
  return this.each(function () {
    var $this = jQuery(this);
    if ($this.attr('title') != undefined) {
      //Pass the title to a variable and then remove it from DOM
      if ($this.attr('title') != '') {
        var tipTitle = ($this.attr('title'));
      } else {
        var tipTitle = 'QuberTip';
      }
      //Remove title attribute
      $this.removeAttr('title');
      $(this).hover(function (e) {
        //      $(this).css('cursor', 'pointer');
        $("body").append("<div id='tooltip'>" + tipTitle + "</div>");
        $("#tooltip").css({ "position": "absolute",
          "z-index": "9999",
          "background": "#D3DDF5",
          "background-image": "url(../../Quber_Image/Quber_Common/Quber_TB_TitltBG.png)",
          "padding": "5px",
          "opacity": "0.9",
          "border": "1px solid #A3C0E8",
          "-moz-border-radius": "3px",
          "border-radius": "3px",
          "-webkit-border-radius": "3px",
          "font-weight": "normal",
          "font-size": "12px",
          "display": "none"
        });
        $("#tooltip")
.css("top", (e.pageY + defaults.xOffset) + "px")
      .css("left", (e.pageX + defaults.yOffset) + "px")
      .fadeIn(options.speed);
      }, function () {
        //Remove the tooltip from the DOM
        $("#tooltip").remove();
      });
      $(this).mousemove(function (e) {
        $("#tooltip")
  .css("top", (e.pageY + defaults.xOffset) + "px")
  .css("left", (e.pageX + defaults.yOffset) + "px");
      });
    }
  });
};

更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《jQuery常用插件及用法總結(jié)》、《jQuery form操作技巧匯總》、《jQuery操作json數(shù)據(jù)技巧匯總》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery拖拽特效與技巧總結(jié)》、《jQuery表格(table)操作技巧匯總》、《jquery中Ajax用法總結(jié)》、《jQuery常見經(jīng)典特效匯總》、《jQuery動(dòng)畫與特效用法總結(jié)》及《jquery選擇器用法總結(jié)

希望本文所述對大家jQuery程序設(shè)計(jì)有所幫助。

相關(guān)文章

  • jQuery插件zoom實(shí)現(xiàn)圖片全屏放大彈出層特效

    jQuery插件zoom實(shí)現(xiàn)圖片全屏放大彈出層特效

    jQuery zoom是一款能夠查看相冊大圖的jQuery彈出層插件,點(diǎn)擊相冊的縮略圖,就會(huì)彈出該相片對應(yīng)的大圖,并且?guī)в袀€(gè)性的加載動(dòng)畫,還有上一張下一張按鈕以及關(guān)閉按鈕。使用方法非常簡單。兼容IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗等瀏覽器。
    2015-04-04
  • 推薦10個(gè)2014年最佳的jQuery視頻插件

    推薦10個(gè)2014年最佳的jQuery視頻插件

    也許有時(shí)你需要在網(wǎng)站上播放一些音頻和視頻文件,也許你正在建立一個(gè)在線社區(qū)需要有分享和播放音樂和視頻的功能。下面介紹的這些免費(fèi)jQuery插件也許有你需要的。
    2014-11-11
  • jquery.simple.tree插件 更簡單,兼容性更好的無限樹插件

    jquery.simple.tree插件 更簡單,兼容性更好的無限樹插件

    在這里介紹一款小巧,功能強(qiáng)大,能拖拽,支持異步,且兼容性更高的jquery Tree插件
    2010-09-09
  • jquery聚焦文本框與擴(kuò)展文本框聚焦方法

    jquery聚焦文本框與擴(kuò)展文本框聚焦方法

    在不同的瀏覽器中,一個(gè)文本框,如果只是直接給文本框設(shè)置focus(),那么光標(biāo)聚焦的位置可能是在最前面。下面的代碼則是給jquery擴(kuò)展一個(gè)textFocus方法
    2012-10-10
  • JQuery 1.4 中的Ajax問題

    JQuery 1.4 中的Ajax問題

    心血來潮下了最新版本的JQuery1.4,寫一個(gè)頁面通過Ajax加載的的例子。
    2010-01-01
  • 最新最熱最實(shí)用的15個(gè)jQuery插件匯總

    最新最熱最實(shí)用的15個(gè)jQuery插件匯總

    本文給大家匯總介紹了2015年7月最新發(fā)布的最熱最實(shí)用的15款jQuery插件,都有著非常炫酷的效果,十分的實(shí)用,這里推薦給大家。
    2015-07-07
  • jQuery實(shí)現(xiàn)對象轉(zhuǎn)為url參數(shù)的方法

    jQuery實(shí)現(xiàn)對象轉(zhuǎn)為url參數(shù)的方法

    這篇文章主要介紹了jQuery實(shí)現(xiàn)對象轉(zhuǎn)為url參數(shù)的方法,涉及jQuery針對字符串的遍歷與轉(zhuǎn)換操作相關(guān)技巧,需要的朋友可以參考下
    2017-01-01
  • jquery滾動(dòng)到頂部底部代碼

    jquery滾動(dòng)到頂部底部代碼

    jquery滾動(dòng)到頂部底部是一款簡單的滾動(dòng)到頂部底部控制。是一個(gè)很實(shí)用的功能,他能幫助新手和高級開發(fā)者們創(chuàng)造美好的用戶體驗(yàn)。這里推薦給大家,有需要的小伙伴可以參考下。
    2015-04-04
  • 修改UA在PC中訪問只能在微信中打開的鏈接方法

    修改UA在PC中訪問只能在微信中打開的鏈接方法

    下面小編就為大家分享一篇修改UA在PC中訪問只能在微信中打開的鏈接方法,具有很好的參考價(jià)值。希望對大家有所幫助。一起跟隨小編過來看看吧
    2017-11-11
  • jQuery實(shí)現(xiàn)的移動(dòng)端圖片縮放功能組件示例

    jQuery實(shí)現(xiàn)的移動(dòng)端圖片縮放功能組件示例

    這篇文章主要介紹了jQuery實(shí)現(xiàn)的移動(dòng)端圖片縮放功能組件,結(jié)合實(shí)例形式詳細(xì)分析了jQuery基于移動(dòng)端的圖片縮放功能組件實(shí)現(xiàn)原理、步驟、核心代碼及使用技巧,需要的朋友可以參考下
    2020-05-05

最新評論