《酒歌》齐峰交作业 (请马黑黑验收)

加林森 · 发表于 2022-1-31 16:33

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

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

x

本帖最后由加林森于 2022-2-2 23:17 编辑

1 2 3 4 5 6

加林森 · 发表于 2022-1-31 16:34

@马黑黑奇怪欺负，我的图片不能动呢？

加林森 · 发表于 2022-1-31 16:37

本帖最后由加林森于 2022-1-31 17:25 编辑

《酒歌》代码：

<style type="text/css">

.pic-dl {
      margin: 0 auto;
      padding: 0;
      width: 700px;
      height: 580px;
      position: relative;
      border: 10px solid #d2c48c;
}
.pic-dt {
      position: absolute;
      width: 700px;
      height: 30px;
      right: 0;
      bottom: 0;
      background: #faebd7;
      text-align: center;
}
.pic-dt span {
      margin: 1px;
      display: inline-block;
      width: 24px;
      height: 24px;
      line-height: 24px;
      font-size: 12px;
      text-decoration: none;
      text-align: center;
      color: #eee;
      background: rgba(0,0,0,.8);
      border-radius: 50%;
      cursor: pointer;
}
.pic-dt span:hover { opacity: 0.8; }
.pic-dt iframe {
      position: absolute;
      left: -50px;
      top: -50px;
      clip-path: circle(33px at 43px 43px);
      opacity: 0.8;
}
.pic-dd {
      margin: 0; padding: 0;
      width: 700px;
      height: 540px;
      display: flex;
      overflow: hidden;
      background: #eee;
}

.pic-dd img {
      width: 696px;
      height: 536px;
      border:2px solid #666;
      object-fit: cover;
}

</style>

<dl class="pic-dl">
      <dt class="pic-dt">
            <span>1</span>
            <span>2</span>
            <span>3</span>
            <span>4</span>
            <span>5</span>
            <span>6</span>
            <iframe class="wyy" frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="https://music.163.com/outchain/player?type=2&id=141911&auto=1&height=66"></iframe>
      </dt>
      <dd class="pic-dd">
            <img id="my_pic" src="https://imgdb.cn/item/61f773322ab3f51d9191c09d.jpg" alt="" />
      </dd>
</dl>

<script language="javascript">
var ar_pic = [
      "https://pic.imgdb.cn/item/61f773322ab3f51d9191c09d.jpg",
      "https://pic.imgdb.cn/item/61f7750c2ab3f51d919384f5.jpg",
      "https://pic.imgdb.cn/item/61f775e62ab3f51d91944802.jpg",
      "https://pic.imgdb.cn/item/61f7767c2ab3f51d9194cbd1.jpg",
      "https://pic.imgdb.cn/item/61f7772e2ab3f51d9195669c.jpg",
      "https://pic.imgdb.cn/item/61f777c02ab3f51d9195e21b.jpg"
];
function showpic(flag) {
      document.getElementById('my_pic').src = ar_pic[flag-1];
}
</script>