zoukankan      html  css  js  c++  java
  • 划过或点击下面带框的文本

    Tips,带三角可关闭的文字提示

    请划过或点击下面带框的文本

    看我这里一个DIV

    提示在我的下面出现
    提示在左边出现
    提示出现2秒后会自动消失
    提示可以有关闭按钮

    不同担心页面放大缩小会位置会偏移哦

    优点

    • 1:兼容 各种浏览器
    • 2:自己定义TIPS样式(颜色),CSS3渐进增强
    • 3:多方向弹出提示
    • 4:纯CSS+javascript(不包含任何图片)
    • 5:体积超级小 CSS+js = 3k

    参数配置

    • ljtips(object).show(JSON)
    • object: DOM对象ID(test1), DOM对象
    •  
      json:{ 
      content:提示的消息内容(必须), 
      p:提示框位置(可选值top left bottom right),默认为right(可选), 
      closeBtn:是否有关闭按钮(true false) 默认值(false)(可选), 
      time:多少毫秒提示框消失(可选) 
      } 
      

    使用说明

    • 主要方法 .show(); .hide();.clear(); 一般你只需要使用show,hide;
    • 使用1
    • 首先实例化一个ljtips(var tips=ljtips('test1')); 然后使用tips.show(JSON)
    • 使用2
    • 在行内调用提示框"
       
      "
    • 使用3
    • 在JS里调用document.getElementById("test6").onmouseover = function(){ljtips(this).show({content:"这个框你关不掉了吧!没有关闭按钮!",p:'right'})};
  • 相关阅读:
    Java设计模式14:常用设计模式之组合模式(结构型模式)
    Android 高级UI设计笔记07:RecyclerView 的详解
    Android进阶笔记07:Android之MVC 理解
    TCP/IP协议原理与应用笔记18:构成子网和超网
    TCP/IP协议原理与应用笔记17:IP编址(重点)
    Java设计模式13:常用设计模式之桥接模式(结构型模式)
    Java设计模式12:常用设计模式之外观模式(结构型模式)
    Java设计模式11:常用设计模式之代理模式(结构型模式)
    《nginx 五》nginx实现动静分离
    《nginx 四》双机主从热备
  • 原文地址:https://www.cnblogs.com/thebigdipper/p/3762139.html
Copyright © 2011-2022 走看看