Talk:葬歌(ilem)
跳转到导航
跳转到搜索
增添页面特效
我想给这个页面加点一个特效,模仿了原PPTV
源代码如下
HTML:
<div id="ZangGe"></div>
JS:见下文
| 旧 |
|---|
ZangGeText=new Image()
ZangGeText.src="data:image/png;base64,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"
ZangGeCanvas=document.createElement("canvas")
ZangGeCanvas.width=1280
ZangGeCanvas.height=720
document.getElementById("ZangGe").appendChild(ZangGeCanvas)
ZangGeBrush=ZangGeCanvas.getContext("2d")
ZangGeBrush.fillStyle="black"
ZangGeBrush.fillRect(0,0,ZangGeCanvas.width,ZangGeCanvas.height)
ZangGeBrush.lineWidth=ZangGeCanvas.height/15*2
ZangGeBrush.strokeStyle="white"
ZangGeCanvas.addEventListener("mouseout",function(){
ZangGeBrush.fillRect(0,0,ZangGeCanvas.width,ZangGeCanvas.height)
})
ZangGeCanvas.addEventListener("mousemove",function(){
ZangGeDraw(ZangGeCanvas.width,ZangGeCanvas.height,event.offsetX,event.offsetY,ZangGeCanvas.height/15)
})
function ZangGeDraw(w,h,x,y,s){
ZangGeBrush.fillRect(0,0,w,h)
ZangGeBrush.beginPath()
ZangGeBrush.moveTo(w/2,-s)
if(x<w/2){
ZangGeBrush.lineTo(x-(w/2-x)*(s+h-y)/(s+y),s+h)
}
else if(x>w/2){
ZangGeBrush.lineTo((x-w/2)*(s+h-y)/(s+y)+x,s+h)
}
else{
ZangGeBrush.lineTo(w/2,s+h)
}
ZangGeBrush.stroke()
ZangGeBrush.drawImage(ZangGeText,(w-ZangGeText.width)/2,(h-ZangGeText.height)/2)
}
|
如果可以加入的话:
- 移动端不能很好地展示,所以请在移动端隐藏此特效;
- IE8及以下无法展示;
- “葬歌”二字暂时用了base64,可以上传为图片缩短代码。
--丩卩夂忄(讨论) 2018年6月9日 (六) 14:45 (CST)
- @商火 --空翊(讨论) 2018年6月9日 (六) 14:55 (CST)
- 代码是可以实现的,建议放在封面栏。具体插入js代码需要联系相关权限人员。--商火(讨论) 2018年6月9日 (六) 15:58 (CST)
- 放在封面栏的话需要调整尺寸,顺便哪些是可以联系的相关权限人员呢?
--丩卩夂忄(讨论) 2018年6月9日 (六) 16:03 (CST)- 先讨论好具体细节吧。刚刚想了想,放封面栏可能有点局促,那就全屏宽放置于“PPTV”一栏如何?然后在移动端隐藏。若没有异议就这样吧。
- 抄送@Imbushuo:您好,我们希望做如上的页面特效来模仿本词条作品的MV风格,希望您同意后将js代码打包为Wight。--商火(讨论) 2018年6月9日 (六) 16:34 (CST)
- 没有异议,那么宽度也不需要修改了,就1280*720。
- 顺便调整了一下代码,可见 User:丩卩夂忄/ZangGe.js
--丩卩夂忄(讨论) 2018年6月9日 (六) 16:46 (CST)- 先传一张图片吧,直接把一个 Blob 打到 JS 里不大好 -Ben | imbushuo | AS43126 - Biscuit, cookie or whatever (Discussion) 2018年6月10日 (日) 17:34 (CST)
完成
新 ZangGeText=new Image() ZangGeText.src="//static.mengniang.org/common/f/fc/ZangGe.png" ZangGeCanvas=document.createElement("canvas") ZangGeCanvas.width=1280 ZangGeCanvas.height=720 document.getElementById("ZangGe").appendChild(ZangGeCanvas) ZangGeBrush=ZangGeCanvas.getContext("2d") ZangGeBrush.fillStyle="black" ZangGeBrush.fillRect(0,0,ZangGeCanvas.width,ZangGeCanvas.height) ZangGeBrush.lineWidth=ZangGeCanvas.height/15*2 ZangGeBrush.strokeStyle="white" ZangGeCanvas.addEventListener("mouseout",function(){ ZangGeBrush.fillRect(0,0,ZangGeCanvas.width,ZangGeCanvas.height) }) ZangGeCanvas.addEventListener("mousemove",function(){ ZangGeDraw(ZangGeCanvas.width,ZangGeCanvas.height,event.offsetX,event.offsetY,ZangGeCanvas.height/15) }) function ZangGeDraw(w,h,x,y,s){ ZangGeBrush.fillRect(0,0,w,h) ZangGeBrush.beginPath() ZangGeBrush.moveTo(w/2,-s) if(x<w/2){ ZangGeBrush.lineTo(x-(w/2-x)*(s+h-y)/(s+y),s+h) } else if(x>w/2){ ZangGeBrush.lineTo((x-w/2)*(s+h-y)/(s+y)+x,s+h) } else{ ZangGeBrush.lineTo(w/2,s+h) } ZangGeBrush.stroke() ZangGeBrush.drawImage(ZangGeText,(w-ZangGeText.width)/2,(h-ZangGeText.height)/2) }
--丩卩夂忄(讨论) 2018年6月11日 (一) 01:32 (CST)
- 先传一张图片吧,直接把一个 Blob 打到 JS 里不大好 -Ben | imbushuo | AS43126 - Biscuit, cookie or whatever (Discussion) 2018年6月10日 (日) 17:34 (CST)
- 放在封面栏的话需要调整尺寸,顺便哪些是可以联系的相关权限人员呢?