用html自定义横向条形图

最新推荐文章于 2024-07-12 10:59:50 发布

lixiaonaaa

最新推荐文章于 2024-07-12 10:59:50 发布

阅读量1.1k

点赞数 1

分类专栏： javascript 文章标签： html 前端 js

本文链接：https://blog.csdn.net/lixiaonaaa/article/details/120947803

版权

javascript 专栏收录该内容

36 篇文章 1 订阅

订阅专栏

本文介绍了一个JavaScript函数，当用户鼠标悬停在进度条上时，会显示包含时间、操作方法和艺术值的提示框，并且提示框会随着鼠标移动而移动。这个功能展示了如何利用DOM操作和CSS动画实现交互式的用户体验。

摘要由CSDN通过智能技术生成

// 进度条图表
function progressCharts(interfaceCharts, list) {
  var html = '<div id="progress_inner" class="progress-inner">', artArr=[], max=0;
  // 获取最大值
  for(var i=0; i<list.length; i++) {
    artArr.push(list[i].art);
  }
  max = Math.max.apply(null,artArr);
  // 构造图表
  for(var i=0; i<list.length; i++) {
    html += `<div class="progress-item"><div class="clearfix progress-top">
      <span class="fl custom-time">${list[i].dateTime}</span><span class="fl">${list[i].method}</span><span class="fr fa fa-file-text custom-jump" data-m="${list[i].method}"></span>
    </div>
    <div class="custom-line"><div class="custom-line-bar" data-method="${list[i].method}" data-time="${list[i].dateTime}" data-art="${list[i].art}" data-w="${(list[i].art/max)*100}%" style="width:0"></div></div></div>`
  }
  html += '</div>';

  $('#'+interfaceCharts).html(html);
  setTimeout(() => {
    $('.custom-line-bar').each(function(i, item) {
      $(this).css({'width': $(this).attr('data-w'), 'transition': 'width 2s', '-webkit-transition': 'width 2s'})
    })
  }, 300);


  $('#progress_inner .custom-line').mouseover (function(e) {
    var e = e || window.event;
    if($('#custom_tip').length>0) {
      return;
    }

    var html = `<div id="custom_tip" class="custom-tip" style="left: ${e.clientX + 5 + 'px'}; top: ${e.clientY - 80 + 'px'}">
    <P><span class="custom-point"></span>${$(this).find('.custom-line-bar').attr('data-time')}</P>
    <P><span class="custom-point"></span>${$(this).find('.custom-line-bar').attr('data-method')}</P>
    <P><span class="custom-point"></span>${$(this).find('.custom-line-bar').attr('data-art')}</P>
    </div>`;
    $('#progress_inner').append(html);

    $(this).mousemove(function(ev) {
      var e = ev || window.event;
      $('#custom_tip').css({'left': e.clientX + 5 + 'px', 'top': e.clientY - 80 + 'px'});
    }) 
  })


  $('#progress_inner .custom-line').mouseout(function() {
    $('#custom_tip').remove();
  })

  $('#progress_inner .custom-jump').click(function() {
    tranDetail($(this).attr('data-m'));
  })
    
}

知识点：鼠标移上显示信息提示框，并跟随鼠标移动

  $('#progress_inner .custom-line').mouseover (function(e) {
    var e = e || window.event;
    if($('#custom_tip').length>0) {
      return;
    }

    var html = `<div id="custom_tip" class="custom-tip" style="left: ${e.clientX + 5 + 'px'}; top: ${e.clientY - 80 + 'px'}">
    <P><span class="custom-point"></span>${$(this).find('.custom-line-bar').attr('data-time')}</P>
    <P><span class="custom-point"></span>${$(this).find('.custom-line-bar').attr('data-method')}</P>
    <P><span class="custom-point"></span>${$(this).find('.custom-line-bar').attr('data-art')}</P>
    </div>`;
    $('#progress_inner').append(html);

    $(this).mousemove(function(ev) {
      var e = ev || window.event;
      $('#custom_tip').css({'left': e.clientX + 5 + 'px', 'top': e.clientY - 80 + 'px'});
    }) 
  })


  $('#progress_inner .custom-line').mouseout(function() {
    $('#custom_tip').remove();
  })

结果如下图