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

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

本帖最后由加林森于 2022-2-2 23:17 编辑 <br /><br /><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 onclick="showpic(1)">1</span>
            <span onclick="showpic(2)">2</span>
            <span onclick="showpic(3)">3</span>
            <span onclick="showpic(4)">4</span>
            <span onclick="showpic(5)">5</span>
            <span onclick="showpic(6)">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://Pic.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;
}
</script>

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

@马黑黑奇怪欺负，我的图片不能动呢？{:5_113:}

加林森 发表于 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;
}
</script>

马黑黑 发表于 2022-1-31 18:17

加林森发表于 2022-1-31 16:37
《酒歌》代码：

有原因，是我的代码被系统过滤，你去这里看看，或彻底从我的帖子源码中要：

https://www.huachaowang.com/forum.php?mod=redirect&goto=findpost&ptid=56593&pid=1437228&fromuid=7130

加林森 发表于 2022-1-31 18:21

马黑黑发表于 2022-1-31 18:17
有原因，是我的代码被系统过滤，你去这里看看，或彻底从我的帖子源码中要：

https://www.huachaowang. ...

好的好的

红影发表于 2022-1-31 19:15

这个不能换图片的啊。

加林森 发表于 2022-1-31 19:30

马黑黑发表于 2022-1-31 18:17
有原因，是我的代码被系统过滤，你去这里看看，或彻底从我的帖子源码中要：

https://www.huachaowang. ...

还是不行，只有一张图片，另外的都不行。晕~~~~~~~~~~~~~~~~~~

加林森 发表于 2022-1-31 19:30

红影发表于 2022-1-31 19:15
这个不能换图片的啊。

就是啊，我被彻底搞晕了。{:5_113:}

马黑黑 发表于 2022-1-31 21:49

加林森发表于 2022-1-31 19:30
还是不行，只有一张图片，另外的都不行。晕~~~~~~~~~~~~~~~~~~

嗯，看了你的源码，你还是分不清三种代码结构：

css

html

js

你再去看看我最新更改的你的帖子，附有代码

加林森 发表于 2022-1-31 22:00

马黑黑发表于 2022-1-31 21:49
嗯，看了你的源码，你还是分不清三种代码结构：

css

嗯嗯，我会好好看的。谢谢老黑！

马黑黑 发表于 2022-1-31 22:06

加林森发表于 2022-1-31 22:00
嗯嗯，我会好好看的。谢谢老黑！

三种代码看清楚

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

马黑黑发表于 2022-1-31 22:06
三种代码看清楚

好的好的，谢谢老黑。过大年了，祝你虎年虎虎生威、虎年吉祥、虎虎生风！{:4_191:}

马黑黑 发表于 2022-1-31 22:09

加林森发表于 2022-1-31 22:08
好的好的，谢谢老黑。过大年了，祝你虎年虎虎生威、虎年吉祥、虎虎生风！

壬寅年，黑虎，自然不同寻常

加林森 发表于 2022-1-31 22:13

马黑黑发表于 2022-1-31 22:09
壬寅年，黑虎，自然不同寻常

是啊，挺好的！来干杯！{:4_191:}

马黑黑 发表于 2022-1-31 22:18

加林森发表于 2022-1-31 22:13
是啊，挺好的！来干杯！

干

加林森 发表于 2022-1-31 22:21

马黑黑发表于 2022-1-31 22:18
干

{:4_191:}

页: [1]

花潮论坛's Archiver

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

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