沃梦达 / 编程问答 / 前端问题 / 正文

Css巨大的网格问题

沃梦达教程前端问题

2022-01-01

CSS huge grid problems(Css巨大的网格问题)

本文介绍了Css巨大的网格问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在使用css网格作为时间轴。网格产生了大约1300个div，这对性能非常不利。

我需要让这些单元格中的每一个都可以单击，并在悬停时显示不同的颜色。如果不呈现全部1300个div，我找不到任何方法来设置"空"节点的样式或与它们交互。

我能做些什么？

Pomax

AsMike‘推荐答案’Kamerman 建议，最好的方法是检测鼠标点击并动态添加项目。您可以通过为item_width和item_height赋值来自定义项目的宽度和高度。

数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">

var item_width=40;
var item_height=40;
var added_items=[];
$(function(){
      $('.grid').on('click', function(e){
      var x = e.pageX - $(this).offset().left;
      var y = e.pageY - $(this).offset().top; 
      var item=$('<div class="item"></div>');
      var left=Math.floor(x/item_width)*item_width;
      var top=Math.floor(y/item_height)*item_height;
      var position={ 'left':left, 'top':top };
      var index=added_items.findIndex(p => p.left == position.left && p.top == position.top);
      if(index<0){
      added_items.push(position);
      item.css('left', left);
      item.css('top', top);
      item.css('background', "#"+((1<<24)*Math.random()|0).toString(16))
      item.appendTo($('.grid'));
      }
    });
  
});

.grid {
  
  width:400px;
  height:400px;
  border:1px solid red;
    position:relative;
  margin:10px;
}
.item {
  width:40px;
  height:40px;
  position:absolute;
  background:red;  
}
.item:hover { 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="grid"> </div>

这篇关于Css巨大的网格问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！

沃梦达教程

本文标题为：Css巨大的网格问题

上一篇：如何在Reaction路由器V6中重定向？

下一篇：带日期对象的setTimeout

基础教程推荐

学习HTML

学习jQuery

学习Laravel

学习CSS3

学习Vue.js

学习Bootstrap5

学习ThinkPHP

学习AJAX