镁铝给你一片天

马黑黑 · 发表于 2022-1-29 11:52

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由加林森于 2022-1-30 11:48 编辑

马黑黑 · 发表于 2022-1-29 11:56

布局没有认真构思与斟酌、计算。主要目的是想测试 object-fit 属性的 cover 值对 img 的修饰效果。全贴代码如下：

<style type="text/css">

.picMain {
      margin: auto;
      width: 720px;
      position: relative;
      background: linear-gradient(45deg, olive, green, silver, white, transparent);
      padding: 10px;
      box-shadow: 2px 2px 4px 1px rgba(0,0,0,.6);
      display: flex;
      flex-direction: row;
      gap: 8px;
}

.picBox { flex-grow: 2; cursor: pointer; }

.picMini {
      width: 150px;
      display: flex;
      flex-direction: column;
      gap: 8px;
}

.picBox img {
      width: 570px;
      height: 730px;
      object-fit: cover;
}

.picMini img {
      width: 120px;
      height: 140px;
      border-radius: 50%;
      opacity: .5;
      cursor: pointer;
}

.picMini img:hover { opacity: 1; border-radius: 0;}

</style>

<div class="picMain">
      <div class="picMini" id="picMini">
            <img id="img1" src="https://638183.freep.cn/638183/Pic/2022/1.jpg" alt="" />
            <img id="img2" src="https://638183.freep.cn/638183/Pic/2022/2.jpg" alt="" />
            <img id="img3" src="https://638183.freep.cn/638183/Pic/2022/3.jpg" alt="" />
            <img id="img4" src="https://638183.freep.cn/638183/Pic/2022/4.jpg" alt="" />
            <img id="img5" src="https://638183.freep.cn/638183/Pic/2022/5.jpg" alt="" />
      </div>
      <div id="picBox" class="picBox"><img id="imgShow" alt="" src="https://638183.freep.cn/638183/Pic/2022/5.jpg" /></div>
</div>
<audio id="auMusic" src="http://www.kumeiwp.com/sub/filestores/2022/01/16/1d0f33a9d673029b6150a68858c27ad3.mp3" autoplay="autoplay" loop="loop"></audio>
<script language="javascript">
var aud = document.getElementById('auMusic');
var imgSw = document.getElementById('imgShow');
function showpic(idx){ imgSw.src = document.getElementById(idx).src; }
imgSw.onclick = function() { aud.paused ? aud.play() : aud.pause(); }
</script>