马德罗丹微缩城 - 图片轮播及解说 - 第2页 - 我行我摄 - 花潮论坛

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

梦油发表于 2026-8-9 19:49
开阔眼界、增长见识。谢谢淑芬朋友。

谢谢梦油老师关注欣赏！

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

霜染枫丹发表于 2026-8-9 19:51
魏淑芬下午好！

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

好多年前去的了，再别的论坛发过帖，是一张一张照片发的，在这里试试新的方式，看看效果如何。
感觉还不错，要谢谢您分享的@马黑黑老师、@夕阳黄昏老师的代码。我这个好像还有点小问题。

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

杨帆发表于 2026-8-9 22:59
效果漂亮，大饱眼福，谢谢魏淑芬老师精彩分享

谢谢杨帆老师关注！{:4_171:}

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

雨季工作室发表于 2026-8-10 09:08
欣赏淑芬老师精制作品！

谢谢老师关注欣赏！

夕阳黄昏 发表于 2026-8-11 13:44

魏淑芬发表于 2026-8-11 13:11
没搞明白缺啥了，为什么演示的可以，发帖就不行呢？

演示？在哪的演示

魏淑芬 发表于 2026-8-11 14:08

夕阳黄昏发表于 2026-8-11 13:44
演示？在哪的演示

在马黑黑老师的帖宝里，预览挺好的。
今天，枫丹的两个有语音的，我也听不到了。{:5_153:}

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

魏淑芬发表于 2026-8-11 14:08
在马黑黑老师的帖宝里，预览挺好的。
今天，枫丹的两个有语音的，我也听不到了。

哦，没用过。

不过我看过您的代码应该是没有与发声相关的代码。

魏淑芬 发表于 2026-8-11 14:16

夕阳黄昏发表于 2026-8-11 14:11
哦，没用过。

不过我看过您的代码应该是没有与发声相关的代码。

我用的是枫丹回复我给的代码，应该就是您给她的吧。
我刚才用编辑看了一下我的帖子的原码，怎么和我发帖的代码不一样呢？论坛会自动整理代码么？

魏淑芬 发表于 2026-8-11 14:23

夕阳黄昏发表于 2026-8-11 14:11
哦，没用过。

不过我看过您的代码应该是没有与发声相关的代码。

这一串代码是语音发声的吗

   #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%); }
}

我原先发的贴子里有啊

夕阳黄昏 发表于 2026-8-11 14:28

魏淑芬发表于 2026-8-11 14:23
这一串代码是语音发声的吗

   #text-layer {

这不是的。我把1#的代码复制了一份，加上了缺失的部分（79 ~ 96）
<style>
@import url(https://fonts.googleapis.com/css?family=Long+Cang&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>
<script>
const synthObj = window.speechSynthesis;
const mObj = document.querySelector("audio");
const dTxt = document.querySelector('#text-layer');
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-11 14:31

魏淑芬发表于 2026-8-11 14:16
我用的是枫丹回复我给的代码，应该就是您给她的吧。
我刚才用编辑看了一下我的帖子的原码，怎么和我发帖 ...

论坛有时确实会自作主张做些无用且可能有害的事，但您这次论坛不会背这锅。

魏淑芬 发表于 2026-8-11 14:38

夕阳黄昏发表于 2026-8-11 14:28
这不是的。我把1#的代码复制了一份，加上了缺失的部分（79 ~ 96）

谢谢夕阳老师！我收藏了，以后当做模版使用了。

魏淑芬 发表于 2026-8-11 14:39

夕阳黄昏发表于 2026-8-11 14:31
论坛有时确实会自作主张做些无用且可能有害的事，但您这次论坛不会背这锅。

噢，不是论坛的锅，那就好。{:4_173:}

夕阳黄昏 发表于 2026-8-11 14:43

魏淑芬发表于 2026-8-11 14:38
谢谢夕阳老师！我收藏了，以后当做模版使用了。

复制您代码时没注意，第7行是无用的。

魏淑芬 发表于 2026-8-11 14:49

本帖最后由魏淑芬于 2026-8-11 14:51 编辑

夕阳黄昏发表于 2026-8-11 14:43
复制您代码时没注意，第7行是无用的。
好的，知道了，用的时候会注意一下的。那行好像是枫丹帖子的背景吧？

夕阳黄昏 发表于 2026-8-11 14:59

魏淑芬发表于 2026-8-11 14:49
好的，知道了，用的时候会注意一下的。那行好像是枫丹帖子的背景吧？

对，她是设了背景的，而你没有所以这行多余了。

魏淑芬 发表于 2026-8-11 15:07

夕阳黄昏发表于 2026-8-11 14:59
对，她是设了背景的，而你没有所以这行多余了。

明白了，谢谢老师耐心指教！

梦油发表于 2026-8-11 15:21

魏淑芬发表于 2026-8-11 13:12
谢谢梦油老师关注欣赏！

淑芬朋友别客气。

霜染枫丹 发表于 2026-8-11 22:33

魏淑芬发表于 2026-8-11 13:18
好多年前去的了，再别的论坛发过帖，是一张一张照片发的，在这里试试新的方式，看看效果如何。
感觉还不 ...

我给您复制的是夕阳黄昏的源代码，我自己制作时做了改动，把语音放弃了，文字太少，读起来拗口，听不清楚，背景图片是新制作了一幅底图。其余都没有变动，歌曲是再最后添加的。你这个制作我看着挺理想的。背景降低了透明度，没能起到烘托的作用，可以把背进去掉，保留的话我建议阻光还是不要降低{:4_204:}{:4_204:}

红影发表于 2026-8-12 22:19

魏淑芬发表于 2026-8-11 13:09
这个微缩城是挺有意思的，有动态演示，有人物和植被等衬托，就是真实场景的缩小版。不同于国内的一些微缩 ...

是的，这个微缩城的制作还是挺仔细的呢。

页: 1 [2]

花潮论坛's Archiver