jquery-tips悬浮提示插件分享


Posted in Javascript onJuly 31, 2015

由于是在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);

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
CSS+JS构建的图片查看器
Jul 22 Javascript
jquery 自定义容器下雨效果可将下雨图标改为其他
Apr 23 Javascript
javascript 10进制和62进制的相互转换
Jul 31 Javascript
js获取元素外链样式的方法
Jan 27 Javascript
JavaScript的Backbone.js框架的一些使用建议整理
Feb 14 Javascript
js贪吃蛇游戏实现思路和源码
Apr 14 Javascript
js获取对象、数组的实际长度,元素实际个数的实现代码
Jun 08 Javascript
Javascript 实现放大镜效果实例详解
Dec 03 Javascript
jQuery实现多张图片上传预览(不经过后端处理)
Apr 29 jQuery
微信小程序实现文字跑马灯效果
May 26 Javascript
使用Mock.js生成前端测试数据
Dec 13 Javascript
element-ui点击查看大图的方法示例
Dec 14 Javascript
javascript实现检验的各种规则
Jul 31 #Javascript
纯JS实现本地图片预览的方法
Jul 31 #Javascript
javascript动画算法实例分析
Jul 31 #Javascript
jquery实现手机号码选号的方法
Jul 31 #Javascript
javascript文本模板用法实例
Jul 31 #Javascript
Javascript实现网络监测的方法
Jul 31 #Javascript
jquery模拟alert的弹窗插件
Jul 31 #Javascript
You might like
PHP常用正则表达式集锦
2014/08/17 PHP
php 读写json文件及修改json的方法
2018/03/07 PHP
JavaScript 判断日期格式是否正确的实现代码
2011/07/04 Javascript
解析JavaScript中instanceof对于不同的构造器或许都返回true
2013/12/03 Javascript
javascript学习笔记(三)BOM和DOM详解
2014/09/30 Javascript
javascript实现省市区三级联动下拉框菜单
2015/11/17 Javascript
深入浅析NodeJs并发异步的回调处理
2015/12/21 NodeJs
JS获取多维数组中相同键的值实现方法示例
2017/01/06 Javascript
详解vue与后端数据交互(ajax):vue-resource
2017/03/16 Javascript
Bootstrap警告(Alerts)的实现方法
2017/03/22 Javascript
Angularjs 动态添加指令并绑定事件的方法
2017/04/13 Javascript
JavaScript实现简单动态进度条效果
2018/04/06 Javascript
详解Angular5 路由传参的3种方法
2018/04/28 Javascript
Vue 父子组件数据传递的四种方式( inheritAttrs + $attrs + $listeners)
2018/05/04 Javascript
微信小程序五子棋游戏AI实现方法【附demo源码下载】
2019/02/20 Javascript
vue模块拖拽实现示例代码
2019/03/09 Javascript
微信小程序Echarts图表组件使用方法详解
2019/06/25 Javascript
bootstrap 日期控件 datepicker被弹出框dialog覆盖的解决办法
2019/07/09 Javascript
浅析Python 中整型对象存储的位置
2016/05/16 Python
Python 常用string函数详解
2016/05/30 Python
python2.7的编码问题与解决方法
2016/10/04 Python
python Tkinter版学生管理系统
2019/02/20 Python
使用Pandas对数据进行筛选和排序的实现
2019/07/29 Python
numpy 声明空数组详解
2019/12/05 Python
OpenCV Python实现拼图小游戏
2020/03/23 Python
TensorFlow2.1.0最新版本安装详细教程
2020/04/08 Python
Python参数传递对象的引用原理解析
2020/05/22 Python
CSS的background属性及CSS3的背景图片设置总结
2016/06/13 HTML / CSS
详解CSS3原生支持div铺满浏览器的方法
2018/08/30 HTML / CSS
Application Cache未缓存文件无法访问无法加载问题
2014/05/31 HTML / CSS
Right-on官方网站:日本知名的休闲服装品牌
2019/07/12 全球购物
《桂林山水》教学反思
2014/02/08 职场文书
使用css样式设计一个简单的html登陆界面的实现
2021/03/30 HTML / CSS
Python基础之赋值,浅拷贝,深拷贝的区别
2021/04/30 Python
Ruby使用Mysql2连接操作MySQL
2022/04/19 Ruby
python库Tsmoothie模块数据平滑化异常点抓取
2022/06/10 Python