主页 / 网络编程 /

jQuery tip提示插件（实例分享）

网络编程 2021-07-04 18:32www.168986.cn编程入门
本篇文章主要介绍了jQuery tip提示插件的相关知识。具有很好的参考价值。狼蚁网站SEO优化跟着长沙网络推广一起来看下吧

先声明，我也是学了某位大神的...

效果图

代码如下

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title>document</title>
 <style>
  .tip{
   width: 200px;
   text-align: center;
   position: relative;
   border:1px solid #c;
   height: 50px;
   line-height: 50px;
   left: 50%;
   margin-: 50px;
   transform: translateX(-50%);
  }
  .tip-container{
   position: absolute;
   box-shadow: 2px 2px 5px #f9f9f9;
   z-index: 999;
   display: none;
  }
  .tip-container .tip-point-,
  .tip-container .tip-point-bottom,
  .tip-container .tip-point-left,
  .tip-container .tip-point-right{
   border:1px solid #dcdcdc;
   position: relative;
   background: white;
  }
  .tip-content{
   padding:5px 10px;
   background: white;
   font-size: 12px;
   line-height: 1.7;
   font-family: "Helvetica Neue",Helvetica,Arial,"MicroSoft YaHei";
  }
  .tip-container .tip-point-::after,
  .tip-container .tip-point-::before,
  .tip-container .tip-point-bottom::after,
  .tip-container .tip-point-bottom::before{
   content:"";
   position: absolute;
   border:solid transparent;
   left: 50%;
   width: 0;
   height: 0;
   transform: translate3d(-50%,0,0);
   -webkit-transform: translate3d(-50%,0,0);
  }

  .tip-container .tip-point-right::after,
  .tip-container .tip-point-right::before,
  .tip-container .tip-point-left::after,
  .tip-container .tip-point-left::before{
   content:"";
   position: absolute;
   border:solid transparent;
   : 50%;
   width: 0;
   height: 0;
   transform: translate3d(0,-50%,0);
   -webkit-transform: translate3d(0,-50%,0);

  }
  /tip-point-/
  .tip-container .tip-point-::after{
   border--color: #fff;
   : 100%;
   border-width: 5px;
  }
  .tip-container .tip-point-::before {
   border--color: #dcdcdc;
   : 100%;
   border-width: 7px;
  }
  /tip-point-bottom/
  .tip-container .tip-point-bottom::after{
   border-bottom-color: #fff;
   bottom: 100%;
   border-width: 5px;
  }
  .tip-container .tip-point-bottom::before {
   border-bottom-color: #dcdcdc;
   bottom: 100%;
   border-width: 7px;
  }
  /tip-point-right/
  .tip-container .tip-point-right::after{
   border-right-color: #fff;
   right: 100%;
   border-width: 5px;
  }
  .tip-container .tip-point-right::before {
   border-right-color: #dcdcdc;
   right: 100%;
   border-width: 7px;
  }
  /tip-point-left/
  .tip-container .tip-point-left::after{
   border-left-color: #fff;
   left: 100%;
   border-width: 5px;
  }
  .tip-container .tip-point-left::before {
   border-left-color: #dcdcdc;
   left: 100%;
   border-width: 7px;
  }
 </style>
</head>
<body>
<div class="tip" data-tip="寂寞的天下着忧郁的雨" data-mode="">天堂不寂寞</div>
<div class="tip" data-tip="天堂不寂寞" data-mode="bottom">寂寞的天下着忧郁的雨</div>
<div class="tip" data-tip="寂寞的天下着忧郁的雨" data-mode="right">寂寞的天下着忧郁的雨</div>
<div class="tip" data-tip="天堂不寂寞" data-mode="left">寂寞的天下着忧郁的雨</div>
<script src="http://libs.baidu./jquery/2.0.0/jquery.js"></script>
<script>
 /
   Created by zxhuan (you@example.)
   Date: 2016/11/28
   Time: 11:14
  /
 ;
 (function ($,window,document,undefined) {
  var modePos;
  $.fn.tip = function (options) {
   var set = $.extend({
    "mode": "bottom",
    "speed": 300,
    "tipText":"提示内容"
   }, options);
   if(!modePos){
    //策略模式
    //算法
    modePos = {
     : function (t, tip) {
      return {
       left: t.offset().left + (t.width() - tip.width()) / 2 + "px",
       : t.offset(). - tip.height() - 12 + "px"
      }
     },
     bottom:function(t, tip){
      return {
       left: this.(t, tip).left,
       : t.offset(). + t.height() + 12 + "px"
      }
     },
     left:function(t, tip){
      return{
       left:t.offset().left - tip.width()-12+ "px",
       :t.offset(). +(t.height()-tip.height())/2+"px"
      }
     },
     right:function(t, tip){
      return{
       left:t.offset().left +t.width()+12+ "px",
       :t.offset(). +(t.height()-tip.height())/2+"px"
      }
     }
    };
   }
   function Tip(_this){
    var _that = $(_this);
    var _mode = set.mode;
    var tipText=set.tipText;
    var _tip=".tip-container";
    if (_that.data("mode")) {
     _mode = _that.data("mode");
    }
    if(_that.data("tip")){
     tipText = _that.data("tip");
    }
    _that.css("cursor", "pointer");
    _that.hover(function () {
     var _tipHtml = '<div class="tip-container"><div class="tip-point-' + _mode + '"><div class="tip-content">' + tipText + '</div></div></div>';
     _that.removeAttr("title alt");
     $("body").append(_tipHtml);
     $(_tip).css(modePos[_mode](_that,$(_tip))).fadeIn(set.speed);
    }, function () {
     $(".tip-container").remove();
    });
   }
   return this.each(function () {
    return new Tip(this);
   });
  }
 })(jQuery,window,document);
 $(".tip").tip();
</script>
</body>
</html>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望多多支持狼蚁SEO!

上一篇：d3.js入门教程之数据绑定详解 下一篇：JS实现动态添加DOM节点和事件的方法示例

编程语言

Copyright © 2016-2025 www.168986.cn 狼蚁网络 版权所有 Power by