|
|

楼主 |
发表于 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>
|
评分
-
| 参与人数 1 | 威望 +30 |
金钱 +60 |
经验 +30 |
收起
理由
|
加林森
| + 30 |
+ 60 |
+ 30 |
赞一个! |
查看全部评分
|