论坛 › 欢乐水吧 › 《想对你好》 交作业。TO：马黑黑

加林森 发表于 2022-1-30 11:47

《想对你好》 交作业。TO：马黑黑

<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" onclick="showpic ('img1')" src="https://pic.imgdb.cn/item/61f5f4952ab3f51d912a0be7.jpg" alt="" />
                <img id="img2" onclick="showpic ('img2')" src="https://pic.imgdb.cn/item/61f5f52e2ab3f51d912ab847.jpg" alt="" />
                <img id="img3" onclick="showpic ('img3')" src="https://pic.imgdb.cn/item/61f5f5b72ab3f51d912b4345.jpg" alt="" />
                <img id="img4" onclick="showpic ('img4')" src="https://pic.imgdb.cn/item/61f5f6432ab3f51d912bd1c0.jpg" alt="" />
                <img id="img5"onclick="showpic ('img5')"src="https://pic.imgdb.cn/item/61f5f6bb2ab3f51d912c4087.jpg" alt="" />
      </div>
      <div id="picBox" class="picBox"><img id="imgShow" alt="" src="https://pic.imgdb.cn/item/61f5f3ca2ab3f51d91293d08.jpg" /></div>
</div>
<audio id="auMusic" src="https://www.joy127.com/url/88448.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>

加林森 发表于 2022-1-30 11:50

@马黑黑

加林森 发表于 2022-1-30 11:52

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

                                                                      想对你好--戴羽彤


编曲：李韬我以为我足够勇敢能让爱变得自然就不会这样 心情被轻易感染也不会留下太多遗憾如果能跟你做一次情绪交换让我也能感受那被爱的温暖所有百转千回都想与你相关太阳照不亮的地方我来填滿想要对你好但不知道你想拥有什么我怕我做不到却又一味迁就讨好想要对你好其他不重要能喜欢你才最骄傲得不到的拥抱不重要如果能跟你做一次情绪交换让我也能感受那被爱的温暖所有百转千回都想与你相关太阳照不亮的地方我来填滿想要对你好但不知道你想拥有什么我怕我做不到却又一味迁就讨好想要对你好其他不重要能喜欢你才最骄傲得不到的拥抱不重要想要对你好但不知道你想拥有什么我怕我做不到却又一味迁就讨好想要对你好其他不重要能喜欢你才最骄傲得不到的拥抱不重要

小辣椒 发表于 2022-1-30 14:12

队长很勤劳，作业完成的很漂亮，黑黑检查作业了@马黑黑

红影 发表于 2022-1-30 15:47

欣赏队长好帖，终于能大小图切换了，恭喜{:4_187:}

红影 发表于 2022-1-30 15:48

只是，这个功能本身不会让图片变形，队长的图图还是变形了，非常奇怪，是原图就失真的？

红影 发表于 2022-1-30 15:52

去看了一下原图，果然是失真的。队长的原图可以不用处理，让这个功能自己处理，反倒是更好呢{:4_204:}

加林森 发表于 2022-1-30 16:23

小辣椒 发表于 2022-1-30 14:12
队长很勤劳，作业完成的很漂亮，黑黑检查作业了@马黑黑

小辣椒下午好。{:4_187:}

加林森 发表于 2022-1-30 16:24

红影 发表于 2022-1-30 15:47
欣赏队长好帖，终于能大小图切换了，恭喜

谢谢红影支持。{:4_187:}

加林森 发表于 2022-1-30 16:25

红影 发表于 2022-1-30 15:48
只是，这个功能本身不会让图片变形，队长的图图还是变形了，非常奇怪，是原图就失真的？

我用秀秀修改了图片的，有点变形了。

加林森 发表于 2022-1-30 16:26

红影 发表于 2022-1-30 15:52
去看了一下原图，果然是失真的。队长的原图可以不用处理，让这个功能自己处理，反倒是更好呢

就是就是，挺好玩的。{:4_189:}

马黑黑 发表于 2022-1-30 16:26

小辣椒 发表于 2022-1-30 14:12
队长很勤劳，作业完成的很漂亮，黑黑检查作业了@马黑黑

{:4_190:}

红影 发表于 2022-1-30 21:35

加林森 发表于 2022-1-30 16:25
我用秀秀修改了图片的，有点变形了。

应该不用改图片，让大小基本适合长宽比就好。

加林森 发表于 2022-1-30 22:09

红影 发表于 2022-1-30 21:35
应该不用改图片，让大小基本适合长宽比就好。

我现在就是在看差不多一样的图片呢。

杨柳青 发表于 2022-1-30 23:02

想对你好~~{:5_153:}

加林森 发表于 2022-1-30 23:21

杨柳青 发表于 2022-1-30 23:02
想对你好~~

你又在想什么？

红影 发表于 2022-1-31 11:02

加林森 发表于 2022-1-30 22:09
我现在就是在看差不多一样的图片呢。

如果实在长宽比太过不好控，倒是可以预先切割一部分，但最好别直接硬设长宽值，会变形失真的。

加林森 发表于 2022-1-31 12:08

红影 发表于 2022-1-31 11:02
如果实在长宽比太过不好控，倒是可以预先切割一部分，但最好别直接硬设长宽值，会变形失真的。

嗯嗯，我知道的。

杨柳青 发表于 2022-2-3 21:14

加林森 发表于 2022-1-30 23:21
你又在想什么？

不知道啊~~~~{:4_196:}

加林森 发表于 2022-2-3 21:22

杨柳青 发表于 2022-2-3 21:14
不知道啊~~~~

是不是啊？

查看完整版本: 《想对你好》 交作业。TO：马黑黑