自定义title--2

最新推荐文章于 2022-03-29 16:54:04 发布

一叶知秋9307

最新推荐文章于 2022-03-29 16:54:04 发布

阅读量308

点赞数

文章标签： jQuery js

本文链接：https://blog.csdn.net/qq_40285497/article/details/81116765

版权

这回这个自定义title增加了碰撞检测，三角尖是根据class来变化的，js检测到位置后给元素加上相应类名就可以，代码如下

js代码如下

var zQui = {};

// 自定义title；ele:需要浮窗的元素，str：显示的内容
zQui.title = function (opt) {
  // 现在界面上加入一个浮窗元素，之后只要显示隐藏就可以了
  let titleBox = null;
  (function () {
    var html ='<div class="my_title_box"></div>';
    $('body').append(html);
    titleBox = $(".my_title_box");
  })();

  // 显示弹窗函数
  (function () {
    // opt.must 存在的话是用于鼠标移到感叹号等图标上，显示提示
    // opt.must 不存在的话就是用于鼠标移到一段文本上，判断文本是否超出，超出在显示提示

    //开始绑定鼠标移入显示提示
    $(document).on('mouseenter',opt.ele,function () {
      let This = $(this);
      if(opt.must){
        // 当前元素myTittle属性内容就是要显示的内容
        showTitle(This, This.attr('myTitle'));
      }else{
        // 当前元素innerText为需要显示的内容
        if(ifTitle(This)){
          showTitle(This, This.text());
        }
      }
    });
    $(document).on('mouseout',opt.ele,function () {
      titleBox.hide();
    });
  })();

  // 判断是否需要弹窗函数
  function ifTitle(ele) {
    // 如果文本长度大于当前元素宽度，返回true，否则返回false
    var str = ele.text();
    var html = document.createElement('span');
    html.innerText = str;
    html.className = 'getTextWidth';
    document.querySelector('body').appendChild(html);
    var width = document.querySelector('.getTextWidth').offsetWidth;
    document.querySelector('.getTextWidth').remove();

    if(width > ele.width()){
      return true;
    }else{
      return false
    }
  }

  // 显示提示框，并调整位置
  function showTitle(ele, str) {
    var windowH =  $(window).height();
    var windowW = $(window).width();
    var eleHeight = ele.height();
    var eleWidth = ele.width();
    var eleLeft = ele.offset().left;
    var eleTop = ele.offset().top;

    titleBox.text(str);
    var myTitleBoxW = titleBox.innerWidth();
    var myTitleBoxH = titleBox.innerHeight();
    var left = eleLeft + eleWidth/2 - myTitleBoxW/2,
      top = eleTop - myTitleBoxH - 10;


    //设置下面4个属性是为了当title超出两个的情况
    var moveLeft = false,
      moveRight = false;
    //下面的10是title弹窗下面的三角尖所占空间
    //如果超出左边
    if(myTitleBoxW/2>(eleLeft+eleWidth/2)){
      titleBox.addClass('right');
      left = eleLeft + eleWidth + 10;
      top = eleTop - (myTitleBoxH-eleHeight)/2 ;
      moveLeft = true;
    }
    //如果超出右边
    if(myTitleBoxW/2>(windowW-eleLeft-eleWidth/2)){
      titleBox.addClass('left');
      left = eleLeft - 10 - myTitleBoxW;
      top = eleTop - (myTitleBoxH-eleHeight)/2;
      moveRight = true;
    }
    //如果超出上边
    if(myTitleBoxH+10>eleTop){
      titleBox.addClass('bottom');
      if(moveLeft == true || moveRight == true){
        top = eleTop - (myTitleBoxH-eleHeight)/2 ;
      }else{
        top = eleTop + eleHeight + 10;
      }
    }
    //如果超出下边
    if(myTitleBoxH+10>(windowH - eleTop+eleHeight)){
      titleBox.addClass('top');
      if(moveLeft == true || moveRight == true){
        top = eleTop - (myTitleBoxH-eleHeight)/2 ;
      }else{
        top = eleTop - 10 - myTitleBoxH;
      }
    }

    titleBox.css({
      left:left,
      top:top
    });
    titleBox.show();
  }
};

html代码如下：

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="jquery.js"></script>
  <script src="zQUi.js"></script>
  <style>
    p{
      width: 100px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      position: absolute;
      left: 10px;
      top: 20px;
    }
    .my_title_box{
      position: absolute;
      border: 1px solid #000;
      background-color: #0f8ae8;
      color: #fff;
      padding: 10px;
      border-radius: 3px;
      max-width: 260px;
      transform-origin: center;
      display: none;
    }
    .my_title_box:after{
      content: '';
      position: absolute;
      left: 50%;
      top: 100%;
      width: 10px;
      height: 10px;
      border: 1px solid #000;
      background-color: #0f8ae8;
      border-left-color: transparent;
      border-top-color: transparent;
      transform: rotate(45deg) translate(-68%,-3%);
    }
    .my_title_box.bottom:after{
      left: 50%;
      top: 0;
      transform: rotate(-135deg) translate(0,71%);
    }
    .my_title_box.right:after{
      left: 0;
      top: 50%;
      transform: rotate(135deg) translate(0,71%);
    }
    .my_title_box.left:after{
      left: 100%;
      top: 50%;
      transform: rotate(-45deg) translate(0,-58%);
    }
  </style>
</head>
<body>
<p class="myTitle">李杜诗篇万口传，至今已觉不新鲜。江山代有才人出，各领风骚数百年。</p>

<script>
  zQui.title({
    ele: 'p.myTitle', // 需要使用到浮窗提示的元素，必填
    // must: true, // 浮窗是否必须有
    width: 200, // 文本浮窗宽度
    bgColor: 'blue',
    color: '#000',
  });
</script>
</body>
</html>

一叶知秋9307

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
自定义title--2

这回这个自定义title增加了碰撞检测，三角尖是根据class来变化的，js检测到位置后给元素加上相应类名就可以，代码如下js代码如下var zQui = {};// 自定义title；ele:需要浮窗的元素，str：显示的内容zQui.title = function (opt) { // 现在界面上加入一个浮窗元素，之后只要显示隐藏就可以了 let title...
复制链接

扫一扫