音画合集制作代码【第二种不明白代码的不要轻易尝试】

月到天心 · 发表于 2024-5-26 11:13

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有帐号？注册

x

可以用各种软件制作图片视频，比如快手的快影，抖音的剪映，我用的视频软件是快影，然后，单独下载一个，西瓜视频，快影制作好视频上传到西瓜视频。制作出来就是我坛庆35图的样式。

西瓜视频代码
<iframe width="900" height="650" frameborder="0" src="https://www.ixigua.com/iframe/7372567885094978100?autoplay=0" referrerpolicy="unsafe-url" allowfullscreen></iframe>

西瓜视频还必须是网页版的视频地址，APP端视频地址用不了，切记，复制以后只把后面数字粘贴进去，也就是替换737256……？这段，我试过把整个视频网页地址复制进去取代代码原有地址，就是一片空白。也不知道是不是代码的问题

月到天心 · 发表于 2024-5-26 11:13

还有一种就是红衣制作的天心三十一图那种形式的，下面为原贴地址
https://wyc520.com.cn/forum.php?mod=viewthread&tid=436225

月到天心 · 发表于 2024-5-26 11:13

下面是我咨询经过红衣取得的代码，但这个代码我试过几次，发出来都是乱码，不会修改代码？如果有明白的朋友帮忙修改一下，先说谢了。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin:0; padding:0; background: #f4eff3 url('https://pic.imgdb.cn/item/659a947e871b83018a0a1d85.jpg') no-repeat center/cover; } #main { position: relative; } .box { padding: 5px 0 0 5px; float: left; } .pic{ padding: 10px; border:1px solid #5e5805; border-radius: 5px; box-shadow: 0 0 3px rgb(7, 2, 0); } .pic img { width:192px; height: auto; } </style></head><body> </br></br></br></br></br></br></br></br></br></br></br></br> <div id="main"> <div class="box"> <div class="pic"> <a href="https://wyc520.com.cn/forum.php?mod=viewthread&tid=436191" target="blank"> <img src="https://pic.imgdb.cn/item/659a9004871b83018af56c0b.jpg" /></a> </div> </div> <div class="box"> <div class="pic"> <a href="https://wyc520.com.cn/forum.php?mod=viewthread&tid=436189" target="blank"> <img src="https://pic.imgdb.cn/item/659a9004871b83018af56cf0.jpg" /></a> </div> </div> <div class="box"> <div class="pic"> <a href="https://wyc520.com.cn/forum.php?mod=viewthread&tid=436187" target="blank"> <img src="https://pic.imgdb.cn/item/659a9004871b83018af56d75.jpg" /></a> </div> </div> <div class="box"> <div class="pic"> <a href="https://wyc520.com.cn/forum.php?mod=viewthread&tid=436130" target="blank"> <img src="https://pic.imgdb.cn/item/659a9004871b83018af56e36.jpg" /></a> </div> </div> <div class="box"> <div class="pic"> <a href="https://wyc520.com.cn/forum.php?mod=viewthread&tid=436118" target="blank"> <img src="https://pic.imgdb.cn/item/659a9004871b83018af56fc0.jpg" /></a> </div> </div> <div class="box"> <div class="pic"> <a href="https://wyc520.com.cn/forum.php?mod=viewthread&tid=436115" target="blank"> <img src="https://pic.imgdb.cn/item/659a900a871b83018af58c58.jpg" /></a> </div> </div> <div class="box"> <div class="pic"> <a href="https://wyc520.com.cn/forum.php?mod=viewthread&tid=435673" target="blank"> <img src="https://pic.imgdb.cn/item/659a900a871b83018af58ce5.jpg" /></a> </div> </div> <div class="box"> <div class="pic"> <a href="https://wyc520.com.cn/forum.php?mod=viewthread&tid=434981" target="blank"> <img src="https://pic.imgdb.cn/item/659a900b871b83018af58d77.jpg" /></a> </div> </div> <div class="box"> <div class="pic"> <a href="https://wyc520.com.cn/forum.php?mod=viewthread&tid=435854" target="blank"> <img src="https://pic.imgdb.cn/item/659a900b871b83018af58e18.jpg" /></a> </div> </div> <div class="box"> <div class="pic"> <a href="https://wyc520.com.cn/forum.php?mod=viewthread&tid=435676" target="blank"> <img src="https://pic.imgdb.cn/item/659a900b871b83018af58f4a.jpg" /></a> </div> </div> <div class="box"> <div class="pic"> <a href="https://wyc520.com.cn/forum.php?mod=viewthread&tid=435416" target="blank"> <img src="https://pic.imgdb.cn/item/659a9031871b83018af64143.jpg" /></a> </div> </div> <div class="box"> <div class="pic"> <a href="https://wyc520.com.cn/forum.php?mod=viewthread&tid=435690" target="blank"> <img src="https://pic.imgdb.cn/item/659a9031871b83018af64301.jpg" /></a> </div> </div> <div class="box"> <div class="pic"> <a href="https://wyc520.com.cn/forum.php?mod=viewthread&tid=435667" target="blank"> <img src="https://pic.imgdb.cn/item/659a9031871b83018af64436.jpg" /></a> </div> </div> <div class="box"> <div class="pic"> <a href="https://wyc520.com.cn/forum.php?mod=viewthread&tid=435265" target="blank"> <img src="https://pic.imgdb.cn/item/659a9031871b83018af64598.jpg" /></a> </div> </div> <div class="box"> <div class="pic"> <a href="https://wyc520.com.cn/forum.php?mod=viewthread&tid=435380" target="blank"> <img src="https://pic.imgdb.cn/item/659a9032871b83018af64638.jpg" /></a> </div> </div> <div class="box"> <div class="pic"> <a href="https://wyc520.com.cn/forum.php?mod=viewthread&tid=435297" target="blank"> <img src="https://pic.imgdb.cn/item/659a919c871b83018afd222a.jpg" /></a> </div> </div> <div class="box"> <div class="pic"> <a href="https://wyc520.com.cn/forum.php?mod=viewthread&tid=435285" target="blank"> <img src="https://pic.imgdb.cn/item/659a919d871b83018afd2808.jpg" /></a> </div> </div> <div class="box"> <div class="pic"> <a href="https://wyc520.com.cn/forum.php?mod=viewthread&tid=435085" target="blank"> <img src="https://pic.imgdb.cn/item/659a919d871b83018afd2a48.jpg" /></a> </div> </div> <div class="box"> <div class="pic"> <a href="https://wyc520.com.cn/forum.php?mod=viewthread&tid=435106" target="blank"> <img src="https://pic.imgdb.cn/item/659a919e871b83018afd2e5f.jpg" /></a> </div> </div> <div class="box"> <div class="pic"> <a href="https://wyc520.com.cn/forum.php?mod=viewthread&tid=434766" target="blank"> <img src="https://pic.imgdb.cn/item/659a91aa871b83018afd7147.jpg" /></a> </div> </div> <div class="box"> <div class="pic"> <a href="https://wyc520.com.cn/forum.php?mod=viewthread&tid=434765" target="blank"> <img src="https://pic.imgdb.cn/item/659a91fa871b83018afef72c.jpg" /></a> </div> </div> <div class="box"> <div class="pic"> <a href="https://wyc520.com.cn/forum.php?mod=viewthread&tid=434960" target="blank"> <img src="https://pic.imgdb.cn/item/659a91fc871b83018aff0024.jpg" /></a> </div> </div> <div class="box"> <div class="pic"> <a href="https://wyc520.com.cn/forum.php?mod=viewthread&tid=434802" target="blank"> <img src="https://pic.imgdb.cn/item/659a91fd871b83018aff03a5.jpg" /></a> </div> </div> <div class="box"> <div class="pic"> <a href="https://wyc520.com.cn/forum.php?mod=viewthread&tid=434764" target="blank"> <img src="https://pic.imgdb.cn/item/659a91fd871b83018aff0502.jpg" /></a> </div> </div> <div class="box"> <div class="pic"> <a href="https://wyc520.com.cn/forum.php?mod=viewthread&tid=434717" target="blank"> <img src="https://pic.imgdb.cn/item/659a91fe871b83018aff08ac.jpg" /></a> </div> </div> <div class="box"> <div class="pic"> <a href="https://wyc520.com.cn/forum.php?mod=viewthread&tid=434627" target="blank"> <img src="https://pic.imgdb.cn/item/659a9353871b83018a04fbf9.jpg" /></a> </div> </div> <div class="box"> <div class="pic"> <a href="https://wyc520.com.cn/forum.php?mod=viewthread&tid=434621" target="blank"> <img src="https://pic.imgdb.cn/item/659a9354871b83018a050124.jpg" /></a> </div> </div> <div class="box"> <div class="pic"> <a href="https://wyc520.com.cn/forum.php?mod=viewthread&tid=433959" target="blank"> <img src="https://pic.imgdb.cn/item/659a9356871b83018a0509b0.jpg" /></a> </div> </div> <div class="box"> <div class="pic"> <a href="https://wyc520.com.cn/forum.php?mod=viewthread&tid=433957" target="blank"> <img src="https://pic.imgdb.cn/item/659a9357871b83018a050f3b.jpg" /></a> </div> </div> <div class="box"> <div class="pic"> <a href="https://wyc520.com.cn/forum.php?mod=viewthread&tid=433945" target="blank"> <img src="https://pic.imgdb.cn/item/659a9357871b83018a051307.jpg" /></a> </div> </div> </div> <script type="text/javascript"> window.onload=function(){ waterfall("main","box"); var dataInt={"data":[{"src":"P_01.jpg"},{"src":"P_02.jpg"},{"src":"P_03.jpg"},{"src":"P_04.jpg"},{"src":"P_05.jpg"},{"src":"P_06.jpg"}]} window.onscroll=function(){ if(checkScrollSlide()){ var oParent=document.getElementById("main"); for(var i=0;i<dataInt.data.length;i++){ var oBox=document.createElement("div"); oBox.className='box'; oParent.appendChild(oBox); var oPic=document.createElement("div"); oPic.className="pic"; oBox.appendChild(oPic); var oImg=document.createElement("img"); oImg.src="image/"+dataInt.data[i].src; oPic.appendChild(oImg); } waterfall("main","box"); } } } function waterfall(parent,box){ var oParent=document.getElementById(parent); var oBoxs=getByClass(oParent,box); var oBoxW=oBoxs[0].offsetWidth; var cols=Math.floor(document.documentElement.clientWidth/oBoxW); oParent.style.cssText="width:"+oBoxW*cols+"px;margin:0 auto"; var hArr=[]; /* 当拉宽/窄浏览器后，再滚动图片会出现图片重叠的bug. 原因：当拉宽/窄浏览器后，某些已经使用了position定位的图片节点不能恢复到第一排，因为第一排不能有绝对定位的样式，所以在判断不是第一排加绝对定位之前要把前面所有设置过的样式全部清零。增加如下代码： for (var i = 0; i < oBoxs.length; i++){ oBoxs[i].style=""; } 如果全部清零可能会拖慢性能，最好设置一个较大的数，如15或者更大一点的就可以了，不用全部清零，如下代码： for (var i = 0; i < 15; i++){ oBoxs[i].style=""; } */ for (var i = 0; i < 15; i++){ oBoxs[i].style=""; } for (var i = 0; i < oBoxs.length; i++) { if (i<cols) { hArr.push(oBoxs[i].offsetHeight); }else{ var minH=Math.min.apply(null,hArr); var index=getMinhIndex(hArr,minH); oBoxs[i].style.position="absolute"; oBoxs[i].style.top=minH+"px"; oBoxs[i].style.left=oBoxs[index].offsetLeft+"px"; hArr[index]+=oBoxs[i].offsetHeight; } } } function getMinhIndex(arr,val){ for(var i in arr){ if (arr[i]==val) { return i; } } } function checkScrollSlide(){ var oParent=document.getElementById("main"); var oBoxs=getByClass(oParent,"box"); var lastBoxH=oBoxs[oBoxs.length-1].offsetTop+Math.floor(oBoxs[oBoxs.length-1].offsetHeight/2); var scrollTop=document.body.scrollTop || document.documentElement.scrollTop; var height=document.body.clientHeight || document.documentElement.clientHeight; return (lastBoxH<scrollTop+height)?true:false; } function getByClass(parent,clsName){ var boxArr=[], oElements=parent.getElementsByTagName("*"); for (var i = 0; i < oElements.length; i++) { if (oElements[i].className==clsName) { boxArr.push(oElements[i]); } } return boxArr; } </script> </body></html>

青石板 · 发表于 2024-5-26 16:01

谢谢天心分享代码，辛苦了

月到天心 · 发表于 2024-5-26 16:30

青石板发表于 2024-5-26 16:01
谢谢天心分享代码，辛苦了

问了一下红衣，说得用专门的代码编辑器，把代码复制进去，然后编辑。

青石板 · 发表于 2024-5-26 21:08

月到天心发表于 2024-5-26 16:30
问了一下红衣，说得用专门的代码编辑器，把代码复制进去，然后编辑。

这样啊，看到代码头就大了。欣赏你的就好了。

隐身药水 · 发表于 2024-5-28 20:00

来跟队长学习下

帐号		自动登录	找回密码
密码			注册

[公告] 音画合集制作代码【第二种不明白代码的不要轻易尝试】 [复制链接] (6/124)

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

鲜花鸡蛋