jQuery tip提示插件(实例分享)


Posted in jQuery onApril 28, 2017

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

效果图:

jQuery tip提示插件(实例分享)

代码如下:

<!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 #ccc;
   height: 50px;
   line-height: 50px;
   left: 50%;
   margin-top: 50px;
   transform: translateX(-50%);
  }
  .tip-container{
   position: absolute;
   box-shadow: 2px 2px 5px #f9f9f9;
   z-index: 999;
   display: none;
  }
  .tip-container .tip-point-top,
  .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-top::after,
  .tip-container .tip-point-top::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;
   top: 50%;
   width: 0;
   height: 0;
   transform: translate3d(0,-50%,0);
   -webkit-transform: translate3d(0,-50%,0);

  }
  /*tip-point-top*/
  .tip-container .tip-point-top::after{
   border-top-color: #fff;
   top: 100%;
   border-width: 5px;
  }
  .tip-container .tip-point-top::before {
   border-top-color: #dcdcdc;
   top: 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="top">天堂不寂寞</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.com/jquery/2.0.0/jquery.js"></script>
<script>
 /**
  * Created by zxhuan (you@example.com)
  * 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 = {
     top: function (t, tip) {
      return {
       left: t.offset().left + (t.width() - tip.width()) / 2 + "px",
       top: t.offset().top - tip.height() - 12 + "px"
      }
     },
     bottom:function(t, tip){
      return {
       left: this.top(t, tip).left,
       top: t.offset().top + t.height() + 12 + "px"
      }
     },
     left:function(t, tip){
      return{
       left:t.offset().left - tip.width()-12+ "px",
       top:t.offset().top +(t.height()-tip.height())/2+"px"
      }
     },
     right:function(t, tip){
      return{
       left:t.offset().left +t.width()+12+ "px",
       top:t.offset().top +(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>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

jQuery 相关文章推荐
为JQuery EasyUI 表单组件增加焦点切换功能的方法
Apr 13 jQuery
jQuery ajax请求struts action实现异步刷新
Apr 19 jQuery
基于jQuery Easyui实现登陆框界面
Jul 10 jQuery
jQuery实现右侧抽屉式在线客服功能
Dec 25 jQuery
关于jquery中attr()和prop()方法的区别
May 28 jQuery
jQuery实现获取动态添加的标签对象示例
Jun 28 jQuery
jquery 动态遍历select 赋值的实例
Sep 12 jQuery
jQuery AJAX与jQuery事件的分析讲解
Feb 18 jQuery
JavaScript实现的弹出遮罩层特效经典示例【基于jQuery】
Jul 10 jQuery
jQuery实现轮播图效果
Nov 26 jQuery
JQuery中的常用事件、对象属性与使用方法分析
Dec 23 jQuery
详解jQuery中的prop()使用方法
Jan 05 jQuery
jQuery自定义元素右键点击事件(实现案例)
Apr 28 #jQuery
jQuery实现动态添加、删除按钮及input输入框的方法
Apr 27 #jQuery
jquery ui sortable拖拽后保存位置
Apr 27 #jQuery
jquery 禁止鼠标右键并监听右键事件
Apr 27 #jQuery
jQuery EasyUI tree增加搜索功能的实现方法
Apr 27 #jQuery
JS/jquery实现一个网页内同时调用多个倒计时的方法
Apr 27 #jQuery
jQuery使用正则验证15/18身份证的方法示例
Apr 27 #jQuery
You might like
php面向对象全攻略 (十) final static const关键字的使用
2009/09/30 PHP
PHP SPL标准库之数据结构堆(SplHeap)简单使用实例
2015/05/12 PHP
PHP中遇到的时区问题解决方法
2015/07/23 PHP
PHP内核探索:哈希表碰撞攻击原理
2015/07/31 PHP
PHP表单数据写入MySQL数据库的代码
2016/05/31 PHP
php获取客户端IP及URL的方法示例
2017/02/03 PHP
php PDO判断连接是否可用的实现方法
2017/04/03 PHP
JS验证邮箱格式是否正确的代码
2013/12/05 Javascript
jQuery点击自身以外地方关闭弹出层的简单实例
2013/12/24 Javascript
JavaScript优化专题之Loading and Execution加载和运行
2016/01/20 Javascript
jQuery限制图片大小的方法
2016/05/25 Javascript
React简单介绍
2017/05/24 Javascript
python爬虫headers设置后无效的解决方法
2017/10/21 Python
Python标准库inspect的具体使用方法
2017/12/06 Python
使用sklearn进行对数据标准化、归一化以及将数据还原的方法
2018/07/11 Python
对Python中DataFrame选择某列值为XX的行实例详解
2019/01/29 Python
python3+pyqt5+itchat微信定时发送消息的方法
2019/02/20 Python
python图像处理入门(一)
2019/04/04 Python
Python concurrent.futures模块使用实例
2019/12/24 Python
Python多线程实现支付模拟请求过程解析
2020/04/21 Python
python实现凯撒密码、凯撒加解密算法
2020/06/11 Python
Python实现快速大文件比较代码解析
2020/09/04 Python
HTML5中的Web Notification桌面通知功能的实现方法
2019/07/29 HTML / CSS
Mountain Warehouse澳大利亚官网:欧洲家庭户外品牌倡导者
2016/11/20 全球购物
英国和世界各地鲜花速递专家:Arena Flowers
2018/02/10 全球购物
一套C#面试题
2013/10/09 面试题
党员创先争优承诺书
2014/03/26 职场文书
职位说明书范文
2014/05/07 职场文书
红色故事演讲稿
2014/05/22 职场文书
法人授权委托书
2014/09/16 职场文书
国际残疾人日广播稿范文
2014/10/09 职场文书
运动会宣传语
2015/07/13 职场文书
工作简报范文
2015/07/21 职场文书
2015年公司中秋节致辞
2015/07/31 职场文书
2016大学生优秀志愿者事迹材料
2016/02/25 职场文书
node.js使用express-fileupload中间件实现文件上传
2021/07/16 Javascript