凯辛娜公园湖边的全景图

咕咚来了

起个网名好难 发表于 2024-10-12 11:51
本帖最后由 老谟深虑 于 2024-10-12 12:36 编辑
  #oBlk {
    margin-left: 50% ; left: -708px;

对，就是这个代码，@老钟，你可以用了，先上传原图，得到地址！还用你原来的地址！

山里娃

欣赏全景美图。

老钟

蓝朵1111 发表于 2024-10-12 11:44
很漂亮的图景，欣赏。

谢谢蓝朵大姐的关注、点评和支持！

老钟

起个网名好难 发表于 2024-10-12 11:51
本帖最后由 老谟深虑 于 2024-10-12 12:36 编辑
  #oBlk {
    margin-left: 50% ; left: -708px;

感谢老师提供连续播放的代码！

老钟

老谟深虑 发表于 2024-10-12 12:16
不知啥原因，在编辑器上可以变大，到论坛上就变小了。真奇怪！

是的，我在编辑器老试验图片很大，到论坛正式发表就变小了。

老钟

王德辰 发表于 2024-10-12 12:19
图片移动好，我不会，想学习

老师想学习，很好，只要把全景图的地址复 制粘贴到有关代码中就可以，下面是起个网名好难老师为我编辑帖子使用的代码，你可以试一试，有什么问题可以联系我，我们一起学习解决，祝你成功！

<style>
  #oBlk {
    margin-left: 50% ; left: -708px;
    margin-top:100px;
    width: 1416px;
    height: 320px;
    box-shadow: 3px 3px 10px #000;
    overflow: hidden;
    position: absolute;
  }

  #oBlk::before,
  #oBlk::after {
    position: absolute;
    content: '';
    left: var(--curX0);
    top: 0px;
    width: 100%;
    height: 100%;
    background: url('https://file.uhsea.com/2410/e1cd1d7b14e70d7c843c40b5b80d47efWG.jpg') no-repeat center / cover;
  }

  #oBlk::after {
    left: var(--curX1);
    transform: scaleX(-1);
  }
</style>
<div id="oBlk"></div>
<div style="height:420px;"></div>
<script>
{
  let blkWidth = oBlk.offsetWidth;
  let step = 1.0, tune = 0,
    curX0 = 0,
    curX1 = blkWidth,
    raf;

  let moving = () =>        {
/*   
        //自左向右
    curX0 += step;
    curX1 += step;
    if(curX0 >= blkWidth) curX0 = -blkWidth;
    if(curX1 >= blkWidth) curX1 = -blkWidth;
*/       
        //自右向左
    curX0 -= step;
    curX1 -= step;
    if(curX0 <= -blkWidth) curX0 = blkWidth;
    if(curX1 <= -blkWidth) curX1 = blkWidth;

    tune = curX1 + (curX0 >= 0 ? 1 : -1);
    oBlk.style.setProperty('--curX0', curX0 + 'px');
    oBlk.style.setProperty('--curX1', tune + 'px');
    raf = requestAnimationFrame(moving);
  };
  moving();
}  
</script>

老钟

风清 发表于 2024-10-12 13:09
欣赏老钟版主美拍——凯辛娜公园湖边的全景，风景秀美，引人入胜，画面要是全屏就效果更好了！
点赞！ ...

我根据起个网名好难老师提供的代码重新编辑，现在是连续重复播放，同时插入音乐歌曲，你看效果如何。

老钟

书香 发表于 2024-10-12 14:57
有远渐近，美不胜收！

谢谢书香老师的关注、点评和支持！我重新编辑，现在能连续重复移动播放，同时插入音乐歌曲，你看效果如何。

老钟

西湖 发表于 2024-10-12 15:00
移动的全景图很美！

谢谢西湖老师的关注、点评和支持！我重新编辑，现在能连续重复移动播放，同时插入音乐歌曲，你看效果如何。

老钟

丁香 发表于 2024-10-12 16:08
欣赏佳作，赞一个！

谢谢丁香老师的关注、点评和支持！我重新编辑，现在能连续重复移动播放，同时插入音乐歌曲，你看效果如何。