三八妇女节的由来（顺祝女同胞们节日快乐）

马黑黑 · 发表于 2022-3-7 13:55

请马上登录，朋友们都在花潮里等着你哦：）

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

x

本帖最后由马黑黑于 2022-3-7 13:58 编辑

↓

↑

马黑黑 · 发表于 2022-3-7 13:59

队长动作好快呀，我都还没改完

加林森 · 发表于 2022-3-7 13:59

同祝福！

登录/注册后可看大图

加林森 · 发表于 2022-3-7 14:00

本帖最后由加林森于 2022-3-7 14:52 编辑

马黑黑发表于 2022-3-7 13:59
队长动作好快呀，我都还没改完

发现出来就立即上来了。

马黑黑 · 发表于 2022-3-7 14:02

加林森发表于 2022-3-7 14:00
发现出来就立即上来了。

谢谢支持！

帖子在本地测试挺好，到论坛后有些水土不服，改了一下

马黑黑 · 发表于 2022-3-7 14:02

加林森发表于 2022-3-7 13:59
同祝福！

加林森 · 发表于 2022-3-7 14:06

马黑黑发表于 2022-3-7 14:02
谢谢支持！

帖子在本地测试挺好，到论坛后有些水土不服，改了一下

你这个播放器可以移动的，挺厉害啊。

加林森 · 发表于 2022-3-7 14:06

马黑黑发表于 2022-3-7 14:02

马黑黑 · 发表于 2022-3-7 14:13

本帖图片切换的实现思路：

帖子用了一幅往上找来的长图，是图片的集合，不想学东方的样子发长长的图片，所以就用新近介绍的canvas画布一节一节地呈现图片，观者需要手动去点击帖子两边的上下箭头。

由于图片各节内容的上下构造没有严谨的尺寸规律（或是我找不到这个规律），所以得去测量每一节的垂直终止占位数据，然后把这些数据放入一个JS数组，再由JS去处理图片在画布上的呈现尺寸。帖子全部代码如下，有空了我将在我的板块写说明：

<style type="text/css">

#waiBox { margin: auto; width: 886px; height: 700px; display: flex; align-items: center; }
#waiBox div { width: 20px; color: red; font-size: 2em; }
#ltBox { text-align: right; }
#ltBox:hover { color: darkgreen; cursor: pointer; }
#cc { width: 760px; height: 700px; flex-grow: 2; }
#rtBox { text-align: left; }
#rtBox:hover { color: darkgreen; cursor: pointer; }

</style>
<div id="waiBox">
<div id="ltBox">↓</div>
<canvas id="cc" width="760" height="700"></canvas>
<div id="rtBox">↑</div>
</div>
<div id="wyybfq" style="position: fixed; left: 10px; top: 40%; width: 330px;"></div>

<script language="javascript">

var dhAr = [420,1040,1744,2405,2985,3751,4613,5150,6065,6733];
var idx = 0;
var rt = document.getElementById("rtBox");
var lt = document.getElementById("ltBox");
var cc= document.getElementById("cc");
var ct = cc.getContext("2d");
var wyy = document.createElement("iframe");
wyy.style.border = "none";
wyy.style.height = "86px";
wyy.style.width = "330px";
document.getElementById("wyybfq").appendChild(wyy);
var pic = new Image;
wyy.src = "https://music.163.com/outchain/player?type=2&id=276130&auto=1&height=66";
pic.onload = function(){ ct.drawImage(pic, 0, 0, 760, dhAr[0], 0, 0, 760, 700); }
pic.src = "https://638183.freep.cn/638183/Pic/2022/1_132911058758597031.jpg";
daoStat();

function imgGo(flag){
idx = (flag == 1 ? idx + 1 : idx - 1);
var pb = ( idx == 0 ? 0 : dhAr[idx-1] );
var ph = (idx == 0 ? dhAr[0] : dhAr[idx] - dhAr[idx-1]);
ct.drawImage(pic, 0, pb, 760, ph, 0, 0, 760, 700);
console.log(idx, pb, ph);
daoStat();
}

function daoStat(){
lt.style.display = (idx >= 9 ? "none" : "block");
rt.style.display = (idx <= 0 ? "none" : "block");
}

</script>