加林森 发表于 2022-1-24 12:21
嗯嗯，挺好的，很漂亮的嘛。
这个适合连续滚动的，黑黑还分享了一个逐帧替换的。
红影 发表于 2022-1-24 12:24
这个适合连续滚动的，黑黑还分享了一个逐帧替换的。
我也在看他图片转换的图片。
加林森 发表于 2022-1-24 13:00
我也在看他图片转换的图片。
我的12个月的花就是用他逐帧替换那个命令做的。
红影 发表于 2022-1-24 15:19
我的12个月的花就是用他逐帧替换那个命令做的。
挺好的，很漂亮。
偶尔翻到这帖上学习， 看代码还是蛮新颖的。
仔细看了几遍感觉是没走完全部12张图片，第7张走完就跳回第一张了。
起个网名好难 发表于 2024-11-4 14:20
偶尔翻到这帖上学习， 看代码还是蛮新颖的。
仔细看了几遍感觉是没走完全部12张图片，第7张走完就跳回第 ...
被难难说得，我也跑回去看了半天，的确是没走完全部。
是不是最后走到了-50%的缘故？应该是-100%吧，时间长了，我也不觉得了{:4_173:}
红影 发表于 2024-11-4 19:01
被难难说得，我也跑回去看了半天，的确是没走完全部。
是不是最后走到了-50%的缘故？应该是-100%吧，时 ...
我也试过100%就过了，大约是91.66的样子。
起个网名好难 发表于 2024-11-4 19:24
我也试过100%就过了，大约是91.66的样子。
难难真厉害，不但能看问题出来，还能测试出这么精确的数据，太赞了。
谢谢难难，我去改一下{:4_199:}
红影 发表于 2024-11-4 23:00
难难真厉害，不但能看问题出来，还能测试出这么精确的数据，太赞了。
谢谢难难，我去改一下
100% 意味着图片全走完到帖子的左端，91.66% = 11/12, 第11张完全走过去第12张刚好全部显示在帖子里的时候，不过这时切换到第1张感觉有些跳动。
又看到一个视频帖，主题也是《清明上河图》，它出场顺序刚好是反过来的，感觉那样才是正确的。
起个网名好难 发表于 2024-11-5 05:45
100% 意味着图片全走完到帖子的左端，91.66% = 11/12, 第11张完全走过去第12张刚好全部显示在帖子里的时 ...
我去把它快进了一下，看了几遍，果然到第一张时有跳动，难难说得太对了。
你说的出场顺序反的我没怎么明白，那个帖子也是这里的么，我去搜一下看看。
本帖最后由 起个网名好难 于 2024-11-6 10:00 编辑
红影 发表于 2024-11-5 22:09
我去把它快进了一下，看了几遍，果然到第一张时有跳动，难难说得太对了。
你说的出场顺序反的我没怎么明 ...
现在画面展示顺序是由城内到城外（从左向右浏览），反过来就是由城外到城内（从右向左浏览），更符合“上”的含义。
下面的文字摘自故宫博物院 张择端清明上河图卷 - 故宫博物院
《清明上河图》描绘的是清明时节北宋都城汴京（今河南开封）东角子门内外和汴河两岸的繁华热闹景象。全画可分为三段：
首段写市郊景色，茅檐低伏，阡陌纵横，其间人物往来。
中段以“上土桥”为中心，另画汴河及两岸风光。中间那座规模宏敞、状如飞虹的木结构桥梁，概称“虹桥”，正名“上土桥”，为水陆交通的汇合点。桥上车马来往如梭，商贩密集，行人熙攘。桥下一艘漕船正放倒桅杆欲穿过桥孔，艄工们的紧张工作吸引了许多群众围观。
后段描写的是市区街道，城内商店鳞次栉比，大店门首还扎结着彩楼欢门，小店铺只是一个敞棚。此外还有公廨寺观等。街上行人摩肩接踵，车马轿驼络绎不绝。行人中有绅士、官吏、仆役、贩夫、走卒、车轿夫、作坊工人、说书艺人、理发匠、医生、看相算命者、贵家妇女、行脚僧人、顽皮儿童，甚至还有乞丐。他们的身份不同，衣冠各异，同在街上，而忙闲不一，苦乐不均。城中交通运载工具，有轿子、驼队、牛、马、驴车、人力车等。 车辆有串车、太平车、平头车等诸种，再现了汴京城街市的繁荣景象。高大的城门楼名东角子门，位于汴京内城东南。
全卷画面内容丰富生动，集中概括地再现了12世纪北宋全盛时期都城汴京的生活面貌。
<style type="text/css">
#mBox {
margin:90px 0 32px calc(50% - 801px);
width: 1440px;
position: relative;
overflow: hidden;
box-shadow: 4px 4px 10px #444;
}
</style>
<div id="mBox">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 1000 400">
<image xlink:href="https://wj1.zp68.com:812/lxx/yunhua/20191220/12.jpg" opacity="0" width="1080" height="400" x="-80" y="0"preserveAspectRatio="none">
<set attributeName="opacity" to="1" begin="p0.begin"/>
<animate id="p0" attributeName="x" from="-80" to="1000" begin="0;pc.end" dur="16.2" fill="freeze"/>
<set attributeName="opacity" to="0" begin="p0.begin+16.2"/>
</image>
<image xlink:href="https://wj1.zp68.com:812/lxx/yunhua/20191220/11.jpg" opacity="0" width="1080" height='400' x="-1080" y="0"preserveAspectRatio="none">
<set attributeName="opacity" to="1" begin="p1.begin"/>
<animate id="p1" attributeName="x" from="-1080" to="1000" begin="p0.end-15" dur="30.12" fill="freeze"/>
<set attributeName="opacity" to="0" begin="p1.begin+30.12"/>
</image>
<image xlink:href="https://wj1.zp68.com:812/lxx/yunhua/20191220/10.jpg" opacity="0" width="1080" height='400' x="-1080" y="0"preserveAspectRatio="none">
<set attributeName="opacity" to="1" begin="p1.end-15"/>
<animate id="p2" attributeName="x" from="-1080" to="1000" begin="p1.end-15" dur="30.12" fill="freeze"/>
<set attributeName="opacity" to="0" begin="p2.begin+30.12"/>
</image>
<image xlink:href="https://wj1.zp68.com:812/lxx/yunhua/20191220/9.jpg" opacity="0" width="1080" height='400' x="-1080" y="0"preserveAspectRatio="none">
<set attributeName="opacity" to="1" begin="p3.begin"/>
<animate id="p3" attributeName="x" from="-1080" to="1000" begin="p2.end-15" dur="30.12" fill="freeze"/>
<set attributeName="opacity" to="0" begin="p3.begin+30.12"/>
</image>
<image xlink:href="https://wj1.zp68.com:812/lxx/yunhua/20191220/8.jpg" opacity="0" width="1080" height='400' x="-1080" y="0"preserveAspectRatio="none">
<set attributeName="opacity" to="1" begin="p4.begin"/>
<animate id="p4" attributeName="x" from="-1080" to="1000" begin="p3.end-15" dur="30.12" fill="freeze"/>
<set attributeName="opacity" to="0" begin="p4.begin+30.12"/>
</image>
<image xlink:href="https://wj1.zp68.com:812/lxx/yunhua/20191220/7.jpg" opacity="0" width="1080" height='400' x="-1080" y="0"preserveAspectRatio="none">
<set attributeName="opacity" to="1" begin="p5.begin"/>
<animate id="p5" attributeName="x" from="-1080" to="1000" begin="p4.end-15" dur="30.12" fill="freeze"/>
<set attributeName="opacity" to="0" begin="p5.begin+30.12"/>
</image>
<image xlink:href="https://wj1.zp68.com:812/lxx/yunhua/20191220/6.jpg" opacity="0" width="1080" height='400' x="-1080" y="0"preserveAspectRatio="none">
<set attributeName="opacity" to="1" begin="p6.begin"/>
<animate id="p6" attributeName="x" from="-1080" to="1000" begin="p5.end-15" dur="30.12" fill="freeze"/>
<set attributeName="opacity" to="0" begin="p6.begin+30.12"/>
</image>
<image xlink:href="https://wj1.zp68.com:812/lxx/yunhua/20191220/5.jpg" opacity="0" width="1080" height='400' x="-1080" y="0"preserveAspectRatio="none">
<set attributeName="opacity" to="1" begin="p7.begin"/>
<animate id="p7" attributeName="x" from="-1080" to="1000" begin="p6.end-15" dur="30.12" fill="freeze"/>
<set attributeName="opacity" to="0" begin="p7.begin+30.12"/>
</image>
<image xlink:href="https://wj1.zp68.com:812/lxx/yunhua/20191220/4.jpg" opacity="0" width="1080" height='400' x="-1080" y="0"preserveAspectRatio="none">
<set attributeName="opacity" to="1" begin="p8.begin"/>
<animate id="p8" attributeName="x" from="-1080" to="1000" begin="p7.end-15" dur="30.12" fill="freeze"/>
<set attributeName="opacity" to="0" begin="p8.begin+30.12"/>
</image>
<image xlink:href="https://wj1.zp68.com:812/lxx/yunhua/20191220/3.jpg" opacity="0" width="1080" height='400' x="-1080" y="0"preserveAspectRatio="none">
<set attributeName="opacity" to="1" begin="p9.begin"/>
<animate id="p9" attributeName="x" from="-1080" to="1000" begin="p8.end-15" dur="30.12" fill="freeze"/>
<set attributeName="opacity" to="0" begin="p9.begin+30.12"/>
</image>
<image xlink:href="https://wj1.zp68.com:812/lxx/yunhua/20191220/2.jpg" opacity="0" width="1080" height='400' x="-1080" y="0"preserveAspectRatio="none">
<set attributeName="opacity" to="1" begin="pa.begin"/>
<animate id="pa" attributeName="x" from="-1080" to="1000" begin="p9.end-15" dur="30.12" fill="freeze"/>
<set attributeName="opacity" to="0" begin="pa.begin+30.12"/>
</image>
<image xlink:href="https://wj1.zp68.com:812/lxx/yunhua/20191220/1.jpg" opacity="0" width="1080" height='400' x="-1080" y="0"preserveAspectRatio="none">
<set attributeName="opacity" to="1" begin="pb.begin"/>
<animate id="pb" attributeName="x" from="-1080" to="1000" begin="pa.end-15" dur="30.12" fill="freeze"/>
<set attributeName="opacity" to="0" begin="pb.begin+30.12"/>
</image>
<image xlink:href="https://wj1.zp68.com:812/lxx/yunhua/20191220/12.jpg" opacity="0" width="1080" height='400' x="-1080" y="0"preserveAspectRatio="none">
<set attributeName="opacity" to="1" begin="pc.begin"/>
<animate id="pc" attributeName="x" from="-1080" to="-80" begin="pb.end-15" dur="15" fill="freeze"/>
<set attributeName="opacity" to="0" begin="pc.begin+15"/>
</image>
</svg>
</div>
<audio id="ktv" src="https://wj1.zp68.com:812/lxx/yunhua/20191220/0120130429.mp3" loop="loop" autoplay="autoplay"></audio>
<script>
mBox.onclick=function(){
ktv.paused ? ktv.play() : ktv.pause();
}
</script>
起个网名好难 发表于 2024-11-6 06:31
现在画面展示顺序是由城内到城外（从左向右浏览），反过来就是由城外到城内（从右向左浏览），更符合“上 ...
哦哦，原来是反向滚动啊{:4_187:}
起个网名好难 发表于 2024-11-6 08:31
#mBox {
margin:90px 0 32px calc(50% - 801px);
width: 1440px;
我一直等着图片转动完，难难的首尾拼接十分到位{:4_199:}
红影 发表于 2024-11-6 22:51
哦哦，原来是反向滚动啊
是“上”啊
起个网名好难 发表于 2024-11-6 22:55
是“上”啊
嗯嗯，看到你后面附的解说了{:4_187:}
红影 发表于 2024-11-6 23:34
饿呢，看到你后面附的解说了
可能是现代人与古人的阅读方式不同吧
起个网名好难 发表于 2024-11-7 06:28
可能是现代人与古人的阅读方式不同吧
是的，方向正好相反的。
红影 发表于 2024-11-7 16:45
是的，方向正好相反的。
找了几个长卷的视频看都是从右向左。
起个网名好难 发表于 2024-11-7 19:04
找了几个长卷的视频看都是从右向左。
难难真认真，什么事都弄那么细{:4_173:}