论坛 › 我行我摄 › 马德罗丹微缩城 - 图片轮播及解说

魏淑芬 发表于 2026-8-9 16:03

马德罗丹微缩城 - 图片轮播及解说

本帖最后由 魏淑芬 于 2026-8-9 16:04 编辑 <br /><br /><font face="楷体, 楷体_GB2312"><font size="5">位于荷兰海牙的马德罗丹微缩城(Madurodam)是一个1:25比例的微缩景观，这里可以看到荷兰的典型建筑和景点，无论是阿克马奶酪市场、海牙和平宫、阿姆斯特丹水坝广场的王宫，还是乌特勒支圆顶大教堂、阿姆斯特丹运河房屋和三角洲工程，荷兰的每一处著名景观都能在此找到。微缩城占地面积1.77平方公里，已经有超过千万的游客来过这里。</font></font>
<font face="楷体, 楷体_GB2312"><font size="5">
</font></font>
<font face="楷体, 楷体_GB2312"><font size="5">【试用各位老师编制修改的代码，发移动图片，看看效果如何，在此深表感谢！</font></font>
<font face="楷体, 楷体_GB2312"><font size="5">】</font></font>
<font face="楷体, 楷体_GB2312"><font size="5">
</font></font>


<style>
@import url(https://fonts.googleapis.com/css ... ng&display=swap);
#oBlk      {
      width: 1100px;
      height: 786px;
                        background: url no-repeat center/cover;
                        padding:32px 32px;
                place-items:center;position:relative;
                box-shadow:3px 3px 8px darkgray;
                overflow:hidden;border-radius:24px;
                display: grid;place-items:center;
                grid-template-rows:90% 10%;
                grid-template-columns:100%;
                margin:30px auto 30px calc(50% - 681px);
                position:relative;

      #pa {
                        width: 100%;
                        height: 100%;
                        border: 4px dotted gray;
                        overflow: hidden;
                        position: relative;
                     
                     
                        #son {
                                        position: absolute;
                                        height: 100%;
                                        white-space: nowrap;
                                        animation: scroll 55s linear infinite;
                                       
                                        &:hover {
                                                      animation-play-state: paused;
                                        }
                                        img {
                                                      height: 100%;
                                                      margin: 2px;
                                        }
                        }
      }
      #text-layer {
                        z-index: 99;
                        font-size: 1.35em;
                        color: brown;
                        background-color: transparent;
                        margin-top: 32px;
                        border-radius: 6px;
                        max-width: 800px;
                        font-family: 'Long Cang';
                        padding:8px;
                        cursor:pointer;
      }

}
@keyframes scroll {
    to { transform: translateX(-50%); }
}


</style>
<div id="oBlk">
    <div id="pa">
      <div id="son">
<img src="https://pan.suyanw.cn/view.php/1519882c59ee4ce6a7022bee4f9fc8ea.jpg" loading="lazy" alt="">
            <img src="https://pan.suyanw.cn/view.php/912ffa6aa98dbb6510c3291a07b9c5cd.jpg" loading="lazy" alt="">
            <img src="https://pan.suyanw.cn/view.php/17be93ae9fc76acf4eebf8332ce2c5fa.jpg" loading="lazy" alt="">
            
         <img src="https://pan.suyanw.cn/view.php/1519882c59ee4ce6a7022bee4f9fc8ea.jpg" loading="lazy" alt="">
            <img src="https://pan.suyanw.cn/view.php/912ffa6aa98dbb6510c3291a07b9c5cd.jpg" loading="lazy" alt="">
            <img src="https://pan.suyanw.cn/view.php/17be93ae9fc76acf4eebf8332ce2c5fa.jpg" loading="lazy" alt="">         
       </div>
    </div>
                              <div id="text-layer">
                                             图一是微缩城的大门。
图二微缩城入口处，有一座格列佛金属雕像，看过《格列佛游记》的都知道，他是游记小说里第一位进入“微缩小人国”的人。图三是城内景观的一小部分。

                              </div>
</div>


<audio src="https://music.163.com/song/media/outer/url?id=28606435.mp3" loop="" autoplay=""></audio>

魏淑芬 发表于 2026-8-9 16:07

<style>
#oBlk      {
      width: 1100px;
      height: 786px;
                        background: url no-repeat center/cover;
                        padding:32px 32px;
                place-items:center;position:relative;
                box-shadow:3px 3px 8px darkgray;
                overflow:hidden;border-radius:24px;
                display: grid;place-items:center;
                grid-template-rows:90% 10%;
                grid-template-columns:100%;
                margin:30px auto 30px calc(50% - 681px);
                position:relative;

      #pa {
                        width: 100%;
                        height: 100%;
                        border: 4px dotted gray;
                        overflow: hidden;
                        position: relative;
                     
                     
                        #son {
                                        position: absolute;
                                        height: 100%;
                                        white-space: nowrap;
                                        animation: scroll 55s linear infinite;
                                       
                                        &:hover {
                                                      animation-play-state: paused;
                                        }
                                        img {
                                                      height: 100%;
                                                      margin: 2px;
                                        }
                        }
      }
      #text-layer {
                        z-index: 99;
                        font-size: 1.35em;
                        color: brown;
                        background-color: transparent;
                        margin-top: 32px;
                        border-radius: 6px;
                        max-width: 800px;
                        font-family: 'Long Cang';
                        padding:8px;
                        cursor:pointer;
      }

}
@keyframes scroll {
    to { transform: translateX(-50%); }
}


</style>
<div id="oBlk">
    <div id="pa">
      <div id="son">
            <img src="https://pan.suyanw.cn/view.php/bac12c92a56e268845f88ec1a3f7abe8.jpg" loading="lazy" alt="">      
            <img src="https://pan.suyanw.cn/view.php/aef05a13ecd144e55fcb369d41bf827f.jpg" loading="lazy" alt="">
            <img src="https://pan.suyanw.cn/view.php/2cd2d862cf2efaf22f0006bff292716d.jpg" loading="lazy" alt="">
             <img src="https://pan.suyanw.cn/view.php/8ed9e2746c15a8b1d929eb6055961d37.jpg" loading="lazy" alt="">
            <img src="https://pan.suyanw.cn/view.php/ed11b42b990d612796126a4589fd1282.jpg" loading="lazy" alt="">            

            <img src="https://pan.suyanw.cn/view.php/bac12c92a56e268845f88ec1a3f7abe8.jpg" loading="lazy" alt="">                              
            <img src="https://pan.suyanw.cn/view.php/aef05a13ecd144e55fcb369d41bf827f.jpg" loading="lazy" alt="">
            <img src="https://pan.suyanw.cn/view.php/2cd2d862cf2efaf22f0006bff292716d.jpg" loading="lazy" alt="">
             <img src="https://pan.suyanw.cn/view.php/8ed9e2746c15a8b1d929eb6055961d37.jpg" loading="lazy" alt="">
            <img src="https://pan.suyanw.cn/view.php/ed11b42b990d612796126a4589fd1282.jpg" loading="lazy" alt="">            
wzs
      </div>
    </div>
                              <div id="text-layer">
                               这五张照片展示了步入微缩城的游客，一座名人故居，还有修葺植物的工作人员，看看真人与建筑景观的对比，感受一下微缩城的细致和精巧                                 </div>
</div>

魏淑芬 发表于 2026-8-9 16:07

本帖最后由 魏淑芬 于 2026-8-9 16:10 编辑 <br /><br /><style>
#oBlk      {
      width: 1100px;
      height: 786px;
                        background: url no-repeat center/cover;
                        padding:32px 32px;
                place-items:center;position:relative;
                box-shadow:3px 3px 8px darkgray;
                overflow:hidden;border-radius:24px;
                display: grid;place-items:center;
                grid-template-rows:90% 10%;
                grid-template-columns:100%;
                margin:30px auto 30px calc(50% - 681px);
                position:relative;

      #pa {
                        width: 100%;
                        height: 100%;
                        border: 4px dotted gray;
                        overflow: hidden;
                        position: relative;
                     
                     
                        #son {
                                        position: absolute;
                                        height: 100%;
                                        white-space: nowrap;
                                        animation: scroll 55s linear infinite;
                                       
                                        &:hover {
                                                      animation-play-state: paused;
                                        }
                                        img {
                                                      height: 100%;
                                                      margin: 2px;
                                        }
                        }
      }
      #text-layer {
                        z-index: 99;
                        font-size: 1.35em;
                        color: brown;
                        background-color: transparent;
                        margin-top: 32px;
                        border-radius: 6px;
                        max-width: 800px;
                        font-family: 'Long Cang';
                        padding:8px;
                        cursor:pointer;
      }

}
@keyframes scroll {
    to { transform: translateX(-50%); }
}
</style>
<div id="oBlk">
    <div id="pa">
      <div id="son">
            <img src="https://pan.suyanw.cn/view.php/cf47361fbcf244ade306b313b5b1e663.jpg" loading="lazy" alt="">
            <img src="https://pan.suyanw.cn/view.php/2559ffa0fb5109584239a2a4df6a35ac.jpg" loading="lazy" alt="">
             <img src="https://pan.suyanw.cn/view.php/ceebcab5d7c351462e7d6b252162474b.jpg" loading="lazy" alt="">
            <img src="https://pan.suyanw.cn/view.php/1994e39917e79e72844082d5e0aad776.jpg" loading="lazy" alt="">
             <img src="https://pan.suyanw.cn/view.php/4cfbc5c5cdc29b33302fcf6fd9ba6bd8.jpg" loading="lazy" alt="">
            
         <img src="https://pan.suyanw.cn/view.php/cf47361fbcf244ade306b313b5b1e663.jpg" loading="lazy" alt="">
            <img src="https://pan.suyanw.cn/view.php/2559ffa0fb5109584239a2a4df6a35ac.jpg" loading="lazy" alt="">
             <img src="https://pan.suyanw.cn/view.php/ceebcab5d7c351462e7d6b252162474b.jpg" loading="lazy" alt="">
            <img src="https://pan.suyanw.cn/view.php/1994e39917e79e72844082d5e0aad776.jpg" loading="lazy" alt="">
             <img src="https://pan.suyanw.cn/view.php/4cfbc5c5cdc29b33302fcf6fd9ba6bd8.jpg" loading="lazy" alt="">         
      </div>
    </div>
                              <div id="text-layer">
                            微缩城是孩子们的乐园，家长们会带孩子来这里游玩，图三中淘气的熊孩子正在拔建筑物门上插的旗帜。除了孩子，飞鸟也来凑趣，一只巨鸟掠过小村庄，公路边的大鸟，其实不过是只小鸽子。

                               </div>
</div>
w

梦江南 发表于 2026-8-9 16:07

效果很好，图片很有特色，欣赏点赞！{:4_199:}

魏淑芬 发表于 2026-8-9 16:07

本帖最后由 魏淑芬 于 2026-8-9 16:12 编辑 <br /><br /><style>
#oBlk      {
      width: 1100px;
      height: 786px;
                        background: url no-repeat center/cover;
                        padding:32px 32px;
                place-items:center;position:relative;
                box-shadow:3px 3px 8px darkgray;
                overflow:hidden;border-radius:24px;
                display: grid;place-items:center;
                grid-template-rows:90% 10%;
                grid-template-columns:100%;
                margin:30px auto 30px calc(50% - 681px);
                position:relative;

      #pa {
                        width: 100%;
                        height: 100%;
                        border: 4px dotted gray;
                        overflow: hidden;
                        position: relative;
                     
                     
                        #son {
                                        position: absolute;
                                        height: 100%;
                                        white-space: nowrap;
                                        animation: scroll 55s linear infinite;
                                       
                                        &:hover {
                                                      animation-play-state: paused;
                                        }
                                        img {
                                                      height: 100%;
                                                      margin: 2px;
                                        }
                        }
      }
      #text-layer {
                        z-index: 99;
                        font-size: 1.35em;
                        color: brown;
                        background-color: transparent;
                        margin-top: 32px;
                        border-radius: 6px;
                        max-width: 800px;
                        font-family: 'Long Cang';
                        padding:8px;
                        cursor:pointer;
      }

}
@keyframes scroll {
    to { transform: translateX(-50%); }
}
</style>
<div id="oBlk">
    <div id="pa">
      <div id="son">
            <img src="https://pan.suyanw.cn/view.php/fb94611f715b1d2fe938dc98eaebc102.jpg" loading="lazy" alt="">
            <img src="https://pan.suyanw.cn/view.php/a398b37163e1e1d66890bfaeb7ce1c80.jpg" loading="lazy" alt="">
             <img src="https://pan.suyanw.cn/view.php/8af687c45e101c2f257e2f72340a2ee3.jpg" loading="lazy" alt="">
            <img src="https://pan.suyanw.cn/view.php/bfee99bca21746a78212557a107f6667.jpg" loading="lazy" alt="">
             <img src="https://pan.suyanw.cn/view.php/95e11f5de204e4a575cf2b237ff884c7.jpg" loading="lazy" alt="">
             <img src="https://pan.suyanw.cn/view.php/060005db5c8f4a53f0658c5d3fcc2847.jpg" loading="lazy" alt="">

            <img src="https://pan.suyanw.cn/view.php/fb94611f715b1d2fe938dc98eaebc102.jpg" loading="lazy" alt="">
            <img src="https://pan.suyanw.cn/view.php/a398b37163e1e1d66890bfaeb7ce1c80.jpg" loading="lazy" alt="">
             <img src="https://pan.suyanw.cn/view.php/8af687c45e101c2f257e2f72340a2ee3.jpg" loading="lazy" alt="">
            <img src="https://pan.suyanw.cn/view.php/bfee99bca21746a78212557a107f6667.jpg" loading="lazy" alt="">
             <img src="https://pan.suyanw.cn/view.php/95e11f5de204e4a575cf2b237ff884c7.jpg" loading="lazy" alt="">
             <img src="https://pan.suyanw.cn/view.php/060005db5c8f4a53f0658c5d3fcc2847.jpg" loading="lazy" alt="">
      </div>
    </div>
                              <div id="text-layer">
                            城内河道纵横，水面上各种船只在航行。还有一座微缩机场，近处那架居然是中国厦门航空的飞机，城内水陆、铁路、公路一应俱全。最后那张图是一列火车进站了


                               </div>
</div>
w

魏淑芬 发表于 2026-8-9 16:08

本帖最后由 魏淑芬 于 2026-8-9 16:24 编辑 <br /><br /><font face="楷体, 楷体_GB2312"><font size="5">微缩城内不只有建筑交通工具，还“生活”着很多人，真正的一个“小人国”</font></font>
<font face="楷体, 楷体_GB2312"><font size="5">这是一座教堂，仔细看院子里有密密麻麻的小人，那是参加节日活动的“人群”</font></font>
<font face="楷体, 楷体_GB2312"><font size="5">【最后一张尺寸不合，单独发了】
</font></font>

<style>
    .pa { left: calc(50% - 81px); width: 800px; min-height: 800px; transform: translateX(-50%); background: #F1FAEF; position: relative; }
    .pa img { display: block; margin: 10px 0; width: 100%; }
</style>

<div class="pa">
    <img src="https://pan.suyanw.cn/view.php/a227b8379971962238f31732bd81080a.jpg" alt="">
</div>

魏淑芬 发表于 2026-8-9 16:15

请教各位老师：我的文字为啥不朗读呢，在帖宝里读的好好的啊。

夕阳黄昏 发表于 2026-8-9 16:41

https://img.chinacourt.cn/ptr/original/807/6819807.jpg?imgid=6819807

夕阳黄昏 发表于 2026-8-9 17:20

本帖最后由 夕阳黄昏 于 2026-8-11 07:47 编辑 <br /><br />试一试， 现在鼠标移动到文字上应该可以读出来了{:5_106:}
<script>
const synthObj = window.speechSynthesis;
const mObj = document.querySelector("audio");
const tlys = document.querySelectorAll('#text-layer');
tlys.forEach(dTxt => {
    dTxt.onmouseenter = (e) => {
      synthObj.cancel();
      mObj.pause();
      if (!e.currentTarget.innerHTML) return;
      let voiceObj = new SpeechSynthesisUtterance(e.currentTarget.innerHTML);
      voiceObj.lang = "zh-CN";
      voiceObj.rate = 0.9; //语速，数字越小读得越慢
      synthObj.speak(voiceObj);
    };
    dTxt.onmouseout = () => {
      synthObj.cancel();
      mObj.play();
    }
});
</script>

红影 发表于 2026-8-9 19:38

太神奇了，这样的微缩城，把去观看的人都因比例而变成巨人了，在魏淑芬的帖子里开眼界了{:4_199:}

梦油 发表于 2026-8-9 19:49

开阔眼界、增长见识。谢谢淑芬朋友。

霜染枫丹 发表于 2026-8-9 19:51

魏淑芬下午好！

特别理想的效果，真漂亮！照片拍的特别好，跟着照片的平移见识到了这异域风情，惬意！{:4_204:}{:4_190:}

杨帆 发表于 2026-8-9 22:59

效果漂亮，大饱眼福，谢谢魏淑芬老师精彩分享{:4_204:}

雨季工作室 发表于 2026-8-10 09:08

欣赏淑芬老师精制作品！

魏淑芬 发表于 2026-8-10 20:40

夕阳黄昏 发表于 2026-8-9 16:41


得到夕阳老师的点赞，太开心啦。{:4_205:}

魏淑芬 发表于 2026-8-10 20:42

夕阳黄昏 发表于 2026-8-9 17:20
本帖最后由 夕阳黄昏 于 2026-8-9 17:50 编辑 试一试， 现在鼠标移动到文字上应该可以读出来了
...

现在读出来了，谢谢！好神奇哦，老师是怎么弄得呢？

夕阳黄昏 发表于 2026-8-11 07:39

魏淑芬 发表于 2026-8-10 20:42
现在读出来了，谢谢！好神奇哦，老师是怎么弄得呢？

帖子缺少朗读有关的代码段，给补上就行了。

魏淑芬 发表于 2026-8-11 13:02

梦江南 发表于 2026-8-9 16:07
效果很好，图片很有特色，欣赏点赞！

谢谢梦江南老师欣赏点赞！
试着做的，还有问题没弄明白呢，再学习吧。{:5_105:}

魏淑芬 发表于 2026-8-11 13:09

红影 发表于 2026-8-9 19:38
太神奇了，这样的微缩城，把去观看的人都因比例而变成巨人了，在魏淑芬的帖子里开眼界了

这个微缩城是挺有意思的，有动态演示，有人物和植被等衬托，就是真实场景的缩小版。不同于国内的一些微缩景观，只是搞一堆死板建筑。

魏淑芬 发表于 2026-8-11 13:11

夕阳黄昏 发表于 2026-8-11 07:39
帖子缺少朗读有关的代码段，给补上就行了。

没搞明白缺啥了，为什么演示的可以，发帖就不行呢？

查看完整版本: 马德罗丹微缩城 - 图片轮播及解说