代码音画《鸟类昆虫摄影内画壶》
本帖最后由 西椅子胡同 于 2021-7-29 16:30 编辑 <br /><br />这是自己用网友摄影作品PS制作的内画壶，用代码组织在一起向上滾动展示，在画面左侧是用内画壶小图制作的播放进度条，随着大内画壶的播放左侧的小内画壶自下而上依次显现，当大内画壶全部播放完毕时播放条中的小内画壶也大致上排列到画面顶端（时间不一定很精确）。这个音画也可以用手机观看。
<br><br><audio controls="controls" height="40" width="500" autoplay loop="loop"><source Src="https://ss2.meipian.me/users/60902957/151390d0-8c44-11ea-80aa-d1fb47062e8d.mp3"type="audio/mp3"/></audio><br><br><div style="left:0px;width:866px;position:relative;top:0px;height:990px;overflow:hidden;"><img src="http://tpic.home.news.cn/xhBlog/xhpic001/M02/E5/2B/wKhTg1cB-qsEAAAAAAAAAAAAAAA114.jpg" style="left:0px;width:866px;position:absolute;top:0px;height:990px;" /><div style="left:70px;width:440px;position:absolute;top:40px;height:60px;line-height:54px;"><span style="font-family:华文行楷;color:#ffffff;font-size:36px;">鸟类昆虫摄影图片内画壶</span></div><div style="left:85px;width:960px;position:absolute;top:925px;height:30px;overflow:hidden;"><span style="color:#ffffff;font-size:18px;line-height:24px;">鸟类图片摄影：清风细雨（1） 昆虫类图片摄影：柳斯 内画音画制作：西椅子胡同</span></div><marquee direction="up" style="left:170px;width:540px;position:absolute;top:0px;height:990px;" scrollamount="5"><img src="http://tpic.home.news.cn/xhBlog/xhpic001/M02/E4/E0/wKhTg1cBtJoEAAAAAAAAAAAAAAA648.png" style="width:540px;height:30000px;" /></marquee><div style="left:35px;width:16px;position:absolute;top:45px;height:900px;"><marquee direction="up" style="width:16px;height:900px;" scrollamount="2" scrolldelay="1076"><marquee direction="down" style="width:16px;height:900px;" scrollamount="2" scrolldelay="1076"><img src="http://tpic.home.news.cn/xhBlog/xhpic001/M04/E4/83/wKhTglcBtFAEAAAAAAAAAAAAAAA490.png" style="width:16px;height:900px;" /></marquee></marquee></div><div style="left:35px;width:16px;position:absolute;top:20px;height:16px;overflow:hidden;"><span style="color:f0d776;font-size:16px;">〓</span></div><div style="left:35px;width:16px;position:absolute;top:950px;height:16px;overflow:hidden;"><span style="color:f0d776;font-size:16px;">▲</span></div> http://www.yinhuabbs.cn/data/attachment/forum/202010/12/173753i8k72r7yy032r8tk.gif
195400 发表于 2021-7-29 15:50
本帖最后由 195400 于 2021-7-30 19:35 编辑 <br /><br /><!-- style type="text/css">
.鼻烟壶{
width:340px;height:390px;float:left;overflow:hidden;background-position-x :0px; margin:24px 0px;
background:url(http://tpic.home.news.cn/xhBlog/xhpic001/M02/E4/E0/wKhTg1cBtJoEAAAAAAAAAAAAAAA648.png);
}
#pichold{
width:14960px;/* 41*340 = 13940 , 44*340=14960 */
height:450px;
background-image:url(https://z3.ax1x.com/2021/07/29/WqsPnU.jpg);
position:absolute;
animation: picMoveUp 175s linear infinite;
}
#slideframe {
width:1000px;
height:450px;
overflow:hidden;
position:relative;
}
#pichold:hover {
animation-play-state: paused;
}
@keyframes picMoveUp {
from {left:0px;}
to {left:-13940px;}
}
#frame1st {
width:1080px;height:auto !important;min-height:450px;
border-color: #7b5640 #efc09a #efc09a #7b5640;border-style:solid;border-width:1px;
padding:24px;
background-image:url(https://z3.ax1x.com/2021/06/28/Rtl1ld.jpg);
position:relative; margin:100px 0 32px -180px;
border-radius:5%;
overflow:hidden;
}
#frame2nd {
width:auto;
height:auto !important;min-height:450px;
background-image:url(https://z3.ax1x.com/2021/06/28/RtllSH.jpg);
border-color: #efc09a #7b5640 #7b5640 #efc09a;border-style:solid;border-width:1px;
padding:10px;
border-radius:5%;
overflow:hidden;
}
#frame3rd {
width:auto;height:auto !important;min-height:450px;
background-image:url(https://z3.ax1x.com/2021/06/28/RtQQrq.gif);
border-color: #7b5640 #efc09a #efc09a #7b5640;border-style:solid;border-width:1px;
padding:10px;
border-radius:5%;
overflow:hidden;
}
#frame4th {
width:auto;height:auto !important;min-height:450px;
background-image:url(https://z3.ax1x.com/2021/06/28/RtQn2j.jpg);
border-color: #efc09a #7b5640 #7b5640 #efc09a;border-style:solid;border-width:1px;
padding:10px;
border-radius:5%;
overflow:hidden;
}
#frame5th {
width:auto;height:auto !important;min-height:450px;
background-image:url(https://z3.ax1x.com/2021/06/28/RtlMfe.jpg);
border-color: #7b5640 #efc09a #efc09a #7b5640;border-style:solid;border-width:1px;
padding:10px;
border-radius:5%;
overflow:hidden;
}
</style>
<div id="frame1st">
<div id="frame2nd">
<div id="frame3rd">
<div id="frame4th">
<div id="frame5th">
<div id="slideframe">
<div id="pichold">
<div style="background-position-y: -170px;" class="鼻烟壶"></div>
<div style="background-position-y: -640px;" class="鼻烟壶"></div>
<div style="background-position-y: -1110px;" class="鼻烟壶"></div>
<div style="background-position-y: -1590px;" class="鼻烟壶"></div>
<div style="background-position-y: -2060px;" class="鼻烟壶"></div>
<div style="background-position-y: -2520px;" class="鼻烟壶"></div>
<div style="background-position-y: -2990px;" class="鼻烟壶"></div>
<div style="background-position-y: -3440px;" class="鼻烟壶"></div>
<div style="background-position-y: -3920px;" class="鼻烟壶"></div>
<div style="background-position-y: -4380px;" class="鼻烟壶"></div>
<div style="background-position-y: -4850px;" class="鼻烟壶"></div>
<div style="background-position-y: -5320px;" class="鼻烟壶"></div>
<div style="background-position-y: -5780px;" class="鼻烟壶"></div>
<div style="background-position-y: -6240px;" class="鼻烟壶"></div>
<div style="background-position-y: -6700px;" class="鼻烟壶"></div>
<div style="background-position-y: -7160px;" class="鼻烟壶"></div>
<div style="background-position-y: -7610px;" class="鼻烟壶"></div>
<div style="background-position-y: -8070px;" class="鼻烟壶"></div>
<div style="background-position-y: -8530px;" class="鼻烟壶"></div>
<div style="background-position-y: -8970px;" class="鼻烟壶"></div>
<div style="background-position-y: -9430px;" class="鼻烟壶"></div>
<div style="background-position-y: -9880px;" class="鼻烟壶"></div>
<div style="background-position-y: -10350px;" class="鼻烟壶"></div>
<div style="background-position-y: -10820px;" class="鼻烟壶"></div>
<div style="background-position-y: -11280px;" class="鼻烟壶"></div>
<div style="background-position-y: -11740px;" class="鼻烟壶"></div>
<div style="background-position-y: -12200px;" class="鼻烟壶"></div>
<div style="background-position-y: -12670px;" class="鼻烟壶"></div>
<div style="background-position-y: -13140px;" class="鼻烟壶"></div>
<div style="background-position-y: -13590px;" class="鼻烟壶"></div>
<div style="background-position-y: -14040px;" class="鼻烟壶"></div>
<div style="background-position-y: -14500px;" class="鼻烟壶"></div>
<div style="background-position-y: -14950px;" class="鼻烟壶"></div>
<div style="background-position-y: -15400px;" class="鼻烟壶"></div>
<div style="background-position-y: -15850px;" class="鼻烟壶"></div>
<div style="background-position-y: -16310px;" class="鼻烟壶"></div>
<div style="background-position-y: -16770px;" class="鼻烟壶"></div>
<div style="background-position-y: -17200px;" class="鼻烟壶"></div>
<div style="background-position-y: -17660px;" class="鼻烟壶"></div>
<div style="background-position-y: -18120px;" class="鼻烟壶"></div>
<div style="background-position-y: -18560px;" class="鼻烟壶"></div>
<div style="background-position-y: -170px;" class="鼻烟壶"></div>
<div style="background-position-y: -640px;" class="鼻烟壶"></div>
<div style="background-position-y: -1110px;" class="鼻烟壶"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<img src="http://img.download.pchome.net/3l/jr/143567_120x90.jpg" id="pbutton"
style="width:32px;overflow:hidden;border-radius:50%;position:absolute;bottom:0px;left:524px;">
</div>
<audio src="https://ss2.meipian.me/users/60902957/151390d0-8c44-11ea-80aa-d1fb47062e8d.mp3" loop="" id="bplayer" style="visiblity:hidden;"></audio>
<script type="text/javascript">
var pbutton = document.querySelector('#pbutton');
var bplayer = document.querySelector('#bplayer');
pbutton.onclick = function() {
if(bplayer.paused) {
bplayer.play();
//pbutton.style.visibility = "hidden";
pbutton.src = "http://photo.16pic.com/00/20/92/16pic_2092589_b.jpg";
}
else {
bplayer.pause();
//pbutton.style.visibility = "hidden";
pbutton.src = "http://img.download.pchome.net/3l/jr/143567_120x90.jpg";
}
}
</script -->
欣赏老师佳作，赞一个！ 195400 发表于 2021-7-29 19:30
本帖最后由 195400 于 2021-7-29 22:27 编辑
.鼻烟壶{
width:340px;height:390px;float:left;over ...
欣赏老师佳作，赞一个！ 雄鹰翱翔 发表于 2021-7-30 05:19
欣赏老师佳作，赞一个！
谢谢雄鹰版主鼓励！问您好！
谢谢195400老师大力支持！
音乐可否改为手动开播？ 西椅子胡同 发表于 2021-7-30 05:47
谢谢195400老师大力支持！
音乐可否改为手动开播？
有些浏览器可以自动播放，有的则不行。
旋转是如果能自动播放就自动播放，对于不能自动播放的浏览器点一下边框就可以启动播放了。
您的意思是完全不让它自动播放统一做成手动启动？ 谢谢195400老师指点。
我的意思是：现在有两个音乐在同时播放，有点儿相互影响听不清楚。您发的作品的代码中，可否用controls替换autoplay?这样，您作品中的音乐播放器能显示出来且音乐是手动开播的，大家喜欢听哪个音乐可以自己选择，音乐就不会相互影 响了。
页:
[1]
2