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

jquery-tips懸浮提示插件分享

 更新時間:2015年07月31日 14:41:54   投稿:hebedich  
Tooltip(提示框)是一種常見的效果,它通常用在需要進一步解釋、說明或提示的某個詞上。這種小效果實現起來雖然不難,但如果你想不勞而獲,可以試試 Tips。

由于是在mac下寫的,沒什么低版本瀏覽器測試工具沒做具體的兼容測試,而且我也不是前端還請多多包涵,js庫用的jquery1.11.1,低版本應該也是可以的,需要自己去下jquery,只是寫的好玩,分享一下,希望大家能一起改進

/**
* jquery tips 提示插件 jquery.tips.js v0.1beta
*
* 使用方法
* $(selector).tips({  //selector 為jquery選擇器
* msg:'your messages!',  //你的提示消息 必填
* side:1, //提示窗顯示位置 1,2,3,4 分別代表 上右下左 默認為1(上) 可選
* color:'#FFF', //提示文字色 默認為白色 可選
* bg:'#F00',//提示窗背景色 默認為紅色 可選
* time:2,//自動關閉時間 默認2秒 設置0則不自動關閉 可選
* x:0,//橫向偏移 正數向右偏移 負數向左偏移 默認為0 可選
* y:0,//縱向偏移 正數向下偏移 負數向上偏移 默認為0 可選
* })
*
*
*/
(function ($) {
  $.fn.tips = function(options){
    var defaults = {
      side:1,
      msg:'',
      color:'#FFF',
      bg:'#F00',
      time:2,
      x:0,
      y:0
    }
    var options = $.extend(defaults, options);
    if (!options.msg||isNaN(options.side)) {
    throw new Error('params error');
  }
  if(!$('#jquery_tips_style').length){
    var style='<style id="jquery_tips_style" type="text/css">';
    style+='.jq_tips_box{padding:10px;position:absolute;overflow:hidden;display:inline;display:none;z-index:10176523;}';
    style+='.jq_tips_arrow{display:block;width:0px;height:0px;position:absolute;}';
    style+='.jq_tips_top{border-left:10px solid transparent;left:20px;bottom:0px;}';
    style+='.jq_tips_left{border-top:10px solid transparent;right:0px;top:18px;}';
    style+='.jq_tips_bottom{border-left:10px solid transparent;left:20px;top:0px;}';
    style+='.jq_tips_right{border-top:10px solid transparent;left:0px;top:18px;}';
    style+='.jq_tips_info{word-wrap: break-word;word-break:normal;border-radius:4px;padding:5px 8px;max-width:130px;overflow:hidden;box-shadow:1px 1px 1px #999;font-size:12px;cursor:pointer;}';
    style+='</style>';
    $(document.body).append(style);
  }
    this.each(function(){
      var element=$(this);
      var element_top=element.offset().top,element_left=element.offset().left,element_height=element.outerHeight(),element_width=element.outerWidth();
      options.side=options.side<1?1:options.side>4?4:Math.round(options.side);
      var sideName=options.side==1?'top':options.side==2?'right':options.side==3?'bottom':options.side==4?'left':'top';
      var tips=$('<div class="jq_tips_box"><i class="jq_tips_arrow jq_tips_'+sideName+'"></i><div class="jq_tips_info">'+options.msg+'</div></div>').appendTo(document.body);
      tips.find('.jq_tips_arrow').css('border-'+sideName,'10px solid '+options.bg);
      tips.find('.jq_tips_info').css({
        color:options.color,
        backgroundColor:options.bg
      });
      switch(options.side){
        case 1:
          tips.css({
            top:element_top-tips.outerHeight()+options.x,
            left:element_left-10+options.y
          });
          break;
        case 2:
          tips.css({
            top:element_top-20+options.x,
            left:element_left+element_width+options.y
          });
          break;
        case 3:
          tips.css({
            top:element_top+element_height+options.x,
            left:element_left-10+options.y
          });
          break;
        case 4:
          tips.css({
            top:element_top-20+options.x,
            left:element_left-tips.outerWidth()+options.y
          });
          break;
        default:
      }
      var closeTime;
      tips.fadeIn('fast').click(function(){
        clearTimeout(closeTime);
        tips.fadeOut('fast',function(){
          tips.remove();
        })
      })
      if(options.time){
        closeTime=setTimeout(function(){
          tips.click();
        },options.time*1000);
        tips.hover(function(){
          clearTimeout(closeTime);
        },function(){
          closeTime=setTimeout(function(){
            tips.click();
          },options.time*1000);
        })
      }
    });
    return this;
  };
})(jQuery);

以上所述就是本文的全部內容了,希望大家能夠喜歡。

相關文章

  • jquery刪除指定子元素代碼實例

    jquery刪除指定子元素代碼實例

    這篇文章主要介紹了jquery刪除指定子元素代碼實例,本文使用較簡單的方法實現了這個需求,代碼一看就懂,需要的朋友可以參考下
    2015-01-01
  • Jquery 最近瀏覽過的商品的功能實現代碼

    Jquery 最近瀏覽過的商品的功能實現代碼

    Jquery 最近瀏覽過的商品的功能實現代碼,需要的朋友可以參考下。
    2010-05-05
  • jquery獲取select,option所有的value和text的實例

    jquery獲取select,option所有的value和text的實例

    下面小編就為大家?guī)硪黄猨query獲取select,option所有的value和text的實例。小編覺得挺不錯的,現在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-03-03
  • jQuery的load()方法及其回調函數用法實例

    jQuery的load()方法及其回調函數用法實例

    這篇文章主要介紹了jQuery的load()方法及其回調函數用法,實例分析了load方法的簡單使用技巧,具有一定參考借鑒價值,需要的朋友可以參考下
    2015-03-03
  • JQuery調webservice實現郵箱驗證(檢測是否可用)

    JQuery調webservice實現郵箱驗證(檢測是否可用)

    JQuery調webservice實現郵箱驗證:判斷郵箱是否存在如果不存在提示可以使用否從提示該郵箱已存在請重新輸入,感興趣的朋友可以參下哈,希望對你有所幫助
    2013-05-05
  • Jquery chosen動態(tài)設置值實例介紹

    Jquery chosen動態(tài)設置值實例介紹

    Jquery chosen一款選擇插件,支持檢索,多選,但不支持輸入效果,下面與大家分享下其使用示例,感興趣的朋友可以參考下,希望對大家有所幫助
    2013-08-08
  • 基于Jquery+Ajax+Json的高效分頁實現代碼

    基于Jquery+Ajax+Json的高效分頁實現代碼

    分頁我相信大家存儲過程分頁已經很熟悉了,ajax更是耳熟能詳了,更別說我們的json,等等
    2011-10-10
  • jQuery實現推拉門效果

    jQuery實現推拉門效果

    這篇文章主要為大家詳細介紹了jQuery實現推拉門效果,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2020-10-10
  • jQuery事件用法實例匯總

    jQuery事件用法實例匯總

    這篇文章主要介紹了jQuery事件用法實例匯總,對事件的綁定及各類事件的用法做了較為詳盡的實例分析,有很好的借鑒價值,需要的朋友可以參考下
    2014-08-08
  • jQuery Validate插件實現表單驗證

    jQuery Validate插件實現表單驗證

    這篇文章主要為大家詳細介紹了jQuery Validate插件實現表單驗證的相關資料,感興趣的小伙伴們可以參考一下
    2016-08-08

最新評論