三八妇女节的由来（顺祝女同胞们节日快乐）
本帖最后由 马黑黑 于 2022-3-7 13:58 编辑 <br /><br /><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" style="position: relative; left: -60px;">
<div id="ltBox" onclick="javascript: imgGo(1);">↓</div>
<canvas id="cc" width="760" height="700"></canvas>
<div id="rtBox" onclick="javascript: imgGo(0);">↑</div>
</div>
<div id="wyybfq" style="position: fixed; left: 10px; top: 40%; width: 330px;"></div>
<script language="javascript">
var dhAr = ;
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, 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 );
var ph = (idx == 0 ? dhAr : dhAr - dhAr);
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>
队长动作好快呀，我都还没改完{:4_170:} 同祝福！{:4_187:}
https://p0.ssl.qhimgs1.com/sdr/400__/t01411af965efa8ccf4.gif
本帖最后由 加林森 于 2022-3-7 14:52 编辑
马黑黑 发表于 2022-3-7 13:59
队长动作好快呀，我都还没改完
发现出来就立即上来了。{:4_189:} 加林森 发表于 2022-3-7 14:00
发现出来就立即上来了。
谢谢支持！
帖子在本地测试挺好，到论坛后有些水土不服，改了一下 加林森 发表于 2022-3-7 13:59
同祝福！
{:4_191:} 马黑黑 发表于 2022-3-7 14:02
谢谢支持！
帖子在本地测试挺好，到论坛后有些水土不服，改了一下
你这个播放器可以移动的，挺厉害啊。 马黑黑 发表于 2022-3-7 14:02
{:4_191:} 本帖图片切换的实现思路：
帖子用了一幅往上找来的长图，是图片的集合，不想学东方的样子发长长的图片，所以就用新近介绍的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 = ;
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, 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 );
var ph = (idx == 0 ? dhAr : dhAr - dhAr);
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>
加林森 发表于 2022-3-7 14:06
你这个播放器可以移动的，挺厉害啊。
这是 fixed 定位，属固定定位，不受body以外的任何元素控制 马黑黑 发表于 2022-3-7 14:15
这是 fixed 定位，属固定定位，不受body以外的任何元素控制
哦，老黑你帮着我看看我发的《假日的海滩》该怎么调整？谢谢！ 原来帖子两边有小箭头的。那个箭头太小了，开始都没注意到{:4_173:} 红影 发表于 2022-3-7 15:48
原来帖子两边有小箭头的。那个箭头太小了，开始都没注意到
所以标成红色的 加林森 发表于 2022-3-7 14:41
哦，老黑你帮着我看看我发的《假日的海滩》该怎么调整？谢谢！
最外的框架左右调整就是修改 left 值 马黑黑 发表于 2022-3-7 17:31
最外的框架左右调整就是修改 left 值
嗯嗯，我就是发现了修改过来的。 马黑黑 发表于 2022-3-7 17:30
所以标成红色的
还是太小了点{:4_173:} 红影 发表于 2022-3-7 22:10
还是太小了点
我感觉大了 加林森 发表于 2022-3-7 17:33
嗯嗯，我就是发现了修改过来的。
挺好的 马黑黑 发表于 2022-3-7 22:19
挺好的
嗯嗯 马黑黑 发表于 2022-3-7 22:11
我感觉大了
我说的是哪根箭头啊，不仔细看都看不到{:4_173:}
页:
[1]
2