javascript - 自动排列div，同时放大一个div

coder 2023-08-09 原文

我一直在尝试创建一个图库应用程序，用户将鼠标悬停在 div 上，它会变大，但其余高度保持不变。您可以在此代码笔片段的示例中看到这种情况。

问题:问题是当我将鼠标悬停在某些 div 上时，它没有正确排列。任何人都可以帮助我让它变得像这样没有 div 离开父 div 并填写父 div。

$( '.preview' ).on( 'mouseover', function() {
    $( '.preview' ).removeClass( 'active' );
    $( this ).addClass( 'active' )
}).each( function( i, el ) {
    $( el ).append( '<span>' + i + '</span>' )
});

body {
  font-family: sans-serif;
}

* {
  box-sizing: border-box;
}

.main {
  width: 400px;
  height: 500px;
  background: red;
  font-size: 0;
}

.preview {
  position: relative;
  width: 100px;
  height: 100px;
  background: white;
  border: 1px solid grey;
  transition: width 1s;
  display: inline-block;
  white-space: nowrap;
  vertical-align: top;
  float: left;
}

.active {
  width: 200px;
  height: 200px;
}

.preview>span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: black;
  font-size: 32px;
}

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

<div class="main">
  <div class="preview active"></div>
  <div class="preview"></div>
  <div class="preview"></div>
  <div class="preview"></div>
  <div class="preview"></div>
  <div class="preview"></div>
  <div class="preview"></div>
  <div class="preview"></div>
  <div class="preview"></div>
  <div class="preview"></div>
  <div class="preview"></div>
  <div class="preview"></div>
  <div class="preview"></div>
  <div class="preview"></div>
  <div class="preview"></div>
  <div class="preview"></div>
  <div class="preview"></div>
</div>

最佳答案

您可以使用 CSS Grid 布局模块:

A Complete Guide to Grid

示例:

$( '.preview' ).on( 'mouseover', function() {
    $( '.preview' ).removeClass( 'active' );
    $( this ).addClass( 'active' )
}).each( function( i, el ) {
    $( el ).append( '<span>' + i + '</span>' )
});

.main {
    width: 400px;
    height: 500px;
    background-color: red;
    /* CSS Grid */
    display: grid;
    grid-template-columns: auto auto auto auto;
    grid-template-rows: auto auto auto auto;
    grid-gap: 0
}
.preview {
    border: 1px solid #ddd;
    background-color: #fff;
    text-align: center;
    font-size: 32px;
    transition: all 1s
}
.active{
    grid-column: span 2;
    grid-row: span 2;
    background-color: rgba(255, 255, 255, .9)
}

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

<div class="main">
    <div class="preview active"></div>
    <div class="preview"></div>
    <div class="preview"></div>
    <div class="preview"></div>
    <div class="preview"></div>
    <div class="preview"></div>
    <div class="preview"></div>
    <div class="preview"></div>
    <div class="preview"></div>
    <div class="preview"></div>
    <div class="preview"></div>
    <div class="preview"></div>
    <div class="preview"></div>
    <div class="preview"></div>
    <div class="preview"></div>
    <div class="preview"></div>
    <div class="preview"></div>
</div>

关于javascript - 自动排列div，同时放大一个div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50736787/

有关javascript - 自动排列div，同时放大一个div的更多相关文章

ruby-on-rails - 使用 Ruby on Rails 进行自动化测试 - 最佳实践 - 2
很好奇，就使用rubyonrails自动化单元测试而言，你们正在做什么？您是否创建了一个脚本来在cron中运行rake作业并将结果邮寄给您？git中的预提交Hook？只是手动调用？我完全理解测试，但想知道在错误发生之前捕获错误的最佳实践是什么。让我们理所当然地认为测试本身是完美无缺的，并且可以正常工作。下一步是什么以确保他们在正确的时间将可能有害的结果传达给您？最佳答案不确定您到底想听什么，但是有几个级别的自动代码库控制:在处理某项功能时，您可以使用类似autotest的内容获得关于哪些有效，哪些无效的即时反馈。要确保您的提
ruby - 使用 Vim Rails，您可以创建一个新的迁移文件并一次性打开它吗？ - 2
使用带有Rails插件的vim，您可以创建一个迁移文件，然后一次性打开该文件吗？textmate也可以这样吗？最佳答案你可以使用rails.vim然后做类似的事情::Rgeneratemigratonadd_foo_to_bar插件将打开迁移生成的文件，这正是您想要的。我不能代表textmate。关于ruby-使用VimRails，您可以创建一个新的迁移文件并一次性打开它吗？，我们在StackOverflow上找到一个类似的问题： https://sta
ruby-on-rails - Rails - 一个 View 中的多个模型 - 2
我需要从一个View访问多个模型。以前，我的links_controller仅用于提供以不同方式排序的链接资源。现在我想包括一个部分(我假设)显示按分数排序的顶级用户(@users=User.all.sort_by(&:score))我知道我可以将此代码插入每个链接操作并从View访问它，但这似乎不是“ruby方式”，我将需要在不久的将来访问更多模型。这可能会变得很脏，是否有针对这种情况的任何技术？注意事项:我认为我的应用程序正朝着单一格式和动态页面内容的方向发展，本质上是一个典型的网络应用程序。我知道before_filter但考虑到我希望应用程序进入的方向，这似乎很麻烦。最终从任何
ruby-on-rails - 渲染另一个 Controller 的 View - 2
我想要做的是有2个不同的Controller，client和test_client。客户端Controller已经构建，我想创建一个test_clientController，我可以使用它来玩弄客户端的UI并根据需要进行调整。我主要是想绕过我在客户端中内置的验证及其对加载数据的管理Controller的依赖。所以我希望test_clientController加载示例数据集，然后呈现客户端Controller的索引View，以便我可以调整客户端UI。就是这样。我在test_clients索引方法中试过这个:classTestClientdefindexrender:template=>
ruby-on-rails - 如果 Object::try 被发送到一个 nil 对象，为什么它会起作用？ - 2
如果您尝试在Ruby中的nil对象上调用方法，则会出现NoMethodError异常并显示消息:"undefinedmethod‘...’fornil:NilClass"然而，有一个tryRails中的方法，如果它被发送到一个nil对象，它只返回nil:require'rubygems'require'active_support/all'nil.try(:nonexisting_method)#noNoMethodErrorexceptionanymore那么try如何在内部工作以防止该异常？最佳答案像Ruby中的所有其他对象
ruby - 为什么 SecureRandom.uuid 创建一个唯一的字符串？ - 2
关闭。这个问题需要detailsorclarity.它目前不接受答案。想改进这个问题吗？通过editingthispost添加细节并澄清问题.关闭8年前。Improvethisquestion为什么SecureRandom.uuid创建一个唯一的字符串？SecureRandom.uuid#=>"35cb4e30-54e1-49f9-b5ce-4134799eb2c0"SecureRandom.uuid方法创建的字符串从不重复？
ruby - 如何进行排列以有效地定制输出 - 2
这是一道面试题，我没有答对，但还是很好奇怎么解。你有N个人的大家庭，分别是1,2,3,...,N岁。你想给你的大家庭拍张照片。所有的家庭成员都排成一排。“我是家里的friend，建议家庭成员安排如下:”1岁的家庭成员坐在这一排的最左边。每两个坐在一起的家庭成员的年龄相差不得超过2岁。输入:整数N，1≤N≤55。输出:摄影师可以拍摄的照片数量。示例->输入:4，输出:4符合条件的数组:[1,2,3,4][1,2,4,3][1,3,2,4][1,3,4,2]另一个例子:输入:5输出:6符合条件的数组:[1,2,3,4,5][1,2,3,5,4][1,2,4,3,5][1,2,4,5,3][
ruby - RuntimeError(自动加载常量 Apps 多线程时检测到循环依赖 - 2
我收到这个错误:RuntimeError(自动加载常量Apps时检测到循环依赖当我使用多线程时。下面是我的代码。为什么会这样？我尝试多线程的原因是因为我正在编写一个HTML抓取应用程序。对Nokogiri::HTML(open())的调用是一个同步阻塞调用，需要1秒才能返回，我有100,000多个页面要访问，所以我试图运行多个线程来解决这个问题。有更好的方法吗？classToolsController0)app.website=array.join(',')putsapp.websiteelseapp.website="NONE"endapp.saveapps=Apps.order("
ruby - 按值降序排列散列，然后按升序键入 ruby - 2
我有这样的哈希trial_hash={"key1"=>1000,"key2"=>34,"key3"=>500,"key4"=>500,"key5"=>500,"key6"=>500}我按值降序排列:my_hash=trial_hash.sort_by{|k,v|v}.reverse我现在是这样理解的:[["key1",1000],["key4",500],["key5",500],["key6",500],["key3",500],["key2",34]]但我希望当值相同时按键的升序排序。我该怎么做？例如:上面的散列将以这种方式排序:[["key1",1000],["key3",500
ruby-on-rails - Rails - 从另一个模型中创建一个模型的实例 - 2
我有一个正在构建的应用程序，我需要一个模型来创建另一个模型的实例。我希望每辆车都有4个轮胎。汽车模型classCar轮胎模型classTire但是，在make_tires内部有一个错误，如果我为Tire尝试它，则没有用于创建或新建的activerecord方法。当我检查轮胎时，它没有这些方法。我该如何补救？错误是这样的:未定义的方法'create'forActiveRecord::AttributeMethods::Serialization::Tire::Module我测试了两个环境:测试和开发，它们都因相同的错误而失败。最佳答案

javascript - 自动排列div，同时放大一个div

有关javascript - 自动排列div，同时放大一个div的更多相关文章

随机推荐