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用noConflict代替$的实现方法
Apr 12 jQuery
jQuery zTree树插件动态加载实例代码
May 11 jQuery
jquery Ajax实现Select动态添加数据
Jun 08 jQuery
详解jQuery中关于Ajax的几个常用的函数
Jul 17 jQuery
jQuery实现可编辑表格并生成json结果(实例代码)
Jul 19 jQuery
基于Jquery Ajax type的4种类型(详解)
Aug 02 jQuery
jquery实现倒计时小应用
Sep 19 jQuery
jQuery 改变P标签文本值方法
Feb 24 jQuery
jquery实现二级导航下拉菜单效果实例
May 14 jQuery
js与jquery获取input输入框中的值实例讲解
Feb 27 jQuery
viewer.js一个强大的基于jQuery的图像查看插件(支持旋转、缩放)
Apr 01 jQuery
多种类型jQuery网页验证码插件代码实例
Jan 09 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
如何做到多笔资料的同步
2006/10/09 PHP
php _autoload自动加载类与机制分析
2012/02/10 PHP
PHP中使用sleep函数实现定时任务实例分享
2014/08/21 PHP
分享五个PHP7性能优化提升技巧
2015/12/07 PHP
php-app开发接口加密详解
2018/04/18 PHP
laravel框架实现去掉URL中index.php的方法
2019/10/12 PHP
json格式化/压缩工具 Chrome插件扩展版
2010/05/25 Javascript
innerText和textContent对比及使用介绍
2013/02/27 Javascript
js获得指定控件输入光标的坐标兼容IE,Chrome,火狐等多种主流浏览器
2013/05/21 Javascript
js展开闭合效果演示代码
2013/07/24 Javascript
jquery实现可拖拽弹出层特效
2015/01/04 Javascript
JQuery实现动态适时改变字体颜色的方法
2015/03/10 Javascript
AngularJS  自定义指令详解及实例代码
2016/09/14 Javascript
javascript匀速动画和缓冲动画详解
2016/10/20 Javascript
微信小程序 progress组件详解及实例代码
2016/10/25 Javascript
bootstrap基础知识学习笔记
2016/11/02 Javascript
详解jQuery插件开发方式
2016/11/22 Javascript
JavaScript 栈的详解及实例代码
2017/01/22 Javascript
jQuery内容筛选选择器实例代码
2017/02/06 Javascript
提高Web性能的前端优化技巧总结
2017/02/27 Javascript
整理关于Bootstrap列表组的慕课笔记
2017/03/29 Javascript
webpack4的迁移的使用方法
2018/05/25 Javascript
[03:51]吞吞映像 每周精彩击杀top10第二弹
2014/06/25 DOTA
python回调函数用法实例分析
2015/05/09 Python
Python 中urls.py:URL dispatcher(路由配置文件)详解
2017/03/24 Python
使用Anaconda3建立虚拟独立的python2.7环境方法
2018/06/11 Python
python网络编程之多线程同时接受和发送
2019/09/03 Python
flask实现验证码并验证功能
2019/12/05 Python
浅谈python 调用open()打开文件时路径出错的原因
2020/06/05 Python
浅谈keras通过model.fit_generator训练模型(节省内存)
2020/06/17 Python
html5中valid、invalid、required的定义
2014/02/21 HTML / CSS
几个判断型的面试题
2012/07/03 面试题
小学教师管理制度
2014/01/18 职场文书
深入开展党的群众路线教育实践活动方案
2014/02/04 职场文书
美国旅游签证工作证明
2014/10/14 职场文书
关于感恩老师的古诗句
2019/08/20 职场文书