个人中心
gpt4 book ai didi

jquery - 我如何将我的屏幕变成 4 个相等的 div，当您将鼠标悬停在它们上面时它们会展开？

转载 作者：行者123 更新时间：2023-11-27 23:15:48 25 4
gpt4 key购买 nike

所以标题有点解释，但我在 ms paint 中模拟了一些图像以供引用。当它启动网页时看起来有点像这样: enter image description here

当您将鼠标悬停在左上角时，左上角的方 block 会扩大，而其他三个会缩小: enter image description here

或者当您将鼠标悬停在右下角时:

enter image description here

我已经用 jquery 和 CSS 尝试过，jquery 在一定程度上可以工作，但是当 div 正在转换时，它们都堆叠在彼此下面。

这是我的 HTML:

<body>
<div id="screenfiller">
    <div id="1">

    </div>
    <div id="2">

    </div>
    <div id="3">

    </div>
    <div id="4">

    </div>    
</div>

CSS:

body{
max-height: 100%;
max-width: 100%;
}
#screenfiller {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
max-height: 100%;
max-width: 100%;
}

#1{
width: 50%;
float: left;
position: static;
background-size:     cover;                      /* <------ */
background-repeat:   no-repeat;
background-position: center center;
display: flex;
}

#2{
width: 50%;
background-color: yellow;
float: left;
position: static;
background-size:     cover;                      /* <------ */
background-repeat:   no-repeat;
background-position: center center;
display: flex;
}

#3{
width: 50%;
background-color: red;
float: left;
position: static;
background-size:     cover;                      /* <------ */
background-repeat:   no-repeat;
background-position: center center;
display: flex;
}

#4{
width: 50%;
background-color: green;
float: left;
position: static;
background-size:     cover;                      /* <------ */
background-repeat:   no-repeat;
background-position: center center;
display: flex;
}

我的 JQuery:

$('#1').mouseenter(function(){
    $('#tech').animate({ height: "55%", width: "55%"}, 500 );
    $('#qual').animate({ height: "45%", width: "55%"}, 500 );
    $('#work').animate({ height: "55%", width: "45%"}, 500 );
    $('#pers').animate({ height: "45%", width: "45%"}, 500 );
});
$('#2').mouseenter(function(){
    $('#work').animate({ height: "55%", width: "55%"}, 500 );
    $('#pers').animate({ height: "45%", width: "55%"}, 500 );
    $('#tech').animate({ height: "55%", width: "45%"}, 500 );
    $('#qual').animate({ height: "45%", width: "45%"}, 500 );
});
$('#3').mouseenter(function(){
    $('#qual').animate({ height: "55%", width: "55%"}, 500 );
    $('#tech').animate({ height: "45%", width: "55%"}, 500 );
    $('#pers').animate({ height: "55%", width: "45%"}, 500 );
    $('#work').animate({ height: "45%", width: "45%"}, 500 );
});
$('#4').mouseenter(function(){
    $('#pers').animate({ height: "55%", width: "55%"}, 500 );
    $('#work').animate({ height: "45%", width: "55%"}, 500 );
    $('#qual').animate({ height: "55%", width: "45%"}, 500 );
    $('#tech').animate({ height: "45%", width: "45%"}, 500 );
});

编辑:

这是我希望它看起来像现场直播的样子:

启动时的网页:

enter image description here

当悬停在左上角时:

enter image description here

当鼠标悬停在右下角时:

enter image description here

最佳答案

这是一个工作示例:

$('#a1').hover(function(){
    $('#a1').animate({ height: "55%", width: "55%"}, 500 );
    $('#a2').animate({ height: "55%", width: "45%"}, 500 );
    $('#a3').animate({ height: "45%", width: "55%"}, 500 );
    $('#a4').animate({ height: "45%", width: "45%"}, 500 );
});
$('#a2').hover(function(){
    $('#a1').animate({ height: "55%", width: "45%"}, 500 );
    $('#a2').animate({ height: "55%", width: "55%"}, 500 );
    $('#a3').animate({ height: "45%", width: "45%"}, 500 );
    $('#a4').animate({ height: "45%", width: "55%"}, 500 );
});
$('#a3').hover(function(){
    $('#a1').animate({ height: "45%", width: "55%"}, 500 );
    $('#a2').animate({ height: "45%", width: "45%"}, 500 );
    $('#a3').animate({ height: "55%", width: "55%"}, 500 );
    $('#a4').animate({ height: "55%", width: "45%"}, 500 );
});
$('#a4').hover(function(){
    $('#a1').animate({ height: "45%", width: "45%"}, 500 );
    $('#a2').animate({ height: "45%", width: "55%"}, 500 );
    $('#a3').animate({ height: "55%", width: "45%"}, 500 );
    $('#a4').animate({ height: "55%", width: "55%"}, 500 );
});
html, body {
padding: 0;
margin:0;
}
#screenfiller {
position: relative;
top: 0; right: 0; bottom: 0; left: 0;
height: 100vh;
width: 100vw;
}

#a1{
  width: 50%;
  height: 50%;
  background: red;
  position: absolute;
  left: 0;
  top: 0;
}

#a2{
  width: 50%;
  height: 50%;
  background: green;
  position: absolute;
  right: 0;
  top: 0;
}

#a3{
  width: 50%;
  height: 50%;
  background: yellow;
  position: absolute;
  left: 0;
  bottom: 0;
}

#a4{
  width: 50%;
  height: 50%;
  background: blue;
  position: absolute;
  right: 0;
  bottom: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="screenfiller">
    <div id="a1">

    </div>
    <div id="a2">

    </div>
    <div id="a3">

    </div>
    <div id="a4">

    </div>    
</div>

您可以根据需要进行调整。

关于jquery - 我如何将我的屏幕变成 4 个相等的 div，当您将鼠标悬停在它们上面时它们会展开？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43288174/

25 4 0
文章推荐： c++ - 'Figure::Figure()' 的原型(prototype)与类 'Figure' 中的任何一个都不匹配
文章推荐： css - 我不明白为什么我的 CSS 样式会相互干扰？
文章推荐： C++ typedef 静态函数指针 : undefined symbol
文章推荐： javascript - 在后台实现模态(模态弹出窗口未带到前台)
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com