分类 前端基础 下的文章

video标签下触摸坐标归一化[考虑全屏,转屏,PC/Mobile Web/WebView]


先给出一些基本知识

触摸点位置

clientX / clientY:// 触摸点相对于浏览器窗口viewport的位置  参照点会随着浏览器的滚动而变化
pageX / pageY:// 触摸点相对于页面的位置  参照点不会随着浏览器的滚动而变化
screenX /screenY:// 触摸点相对于屏幕的位置 

所以如果要算鼠标在当前div的相对位置 通过获取var offset = $("#mainScreen").offset();后 当前鼠标的绝对位置要用pageX/Y去拿 否则浏览器页面滚动后会少算一段

触摸事件

PC

onmousemove script  当鼠标指针移动到元素上时触发。
onmouseout  script  当鼠标指针移出元素时触发。
onmouseup 属性在松开鼠标按钮时触发。
提示:相对于 onmouseup 事件的事件次序(限于鼠标左/中键):
onmousedown
onmouseup
onclick
onmouseup 事件的事件次序(限于鼠标右键):
onmousedown
onmouseup
oncontextmenu
onMouseover和onMousemove有什么区别?
区别是进入后onmousemove鼠标每动一下都会执行事件,onmouseover只在鼠标进入时执行一次

Mobile

基本事件如下,其他的都是对这些事件的组合封装

mainScreen.addEventListener("touchmove", touchMove, false);//手指在屏幕上移动时触发[不动但停留太久也会触发]
mainScreen.addEventListener("touchstart", touchStart, false);//手指一触摸屏幕就触发
mainScreen.addEventListener("touchend", touchEnd, false);//手指离开屏幕触发


WebVR的初次尝试


前言

2016年被称为VR元年,各种头盔在展台上流光溢彩。WebVR并不是一个新鲜的东西,该技术使得开发者只需要利用JavaScript和WebGL等基础的Web技术即可创建VR场景。近日。Mozilla公布WebVR API标准草案。

OpenGL 与 WebGL

确切的说,OpenGL是一个接口规范,并不是一种编程语言,它是与硬件无关的图形API。WebGL是遵循OpenGL规范对绘图技术的一种实现。


form中好用却不常见的 accept-charset 属性


起步

我们曾用过不同的编码来做过页面UTF-8GB2312GBk,而很多时候,又和服务端的编码不一致,如果不进行特殊处理,就会出现乱码。我们可能无法控制接收方的编码问题,这时accept-charset就能提供很好的解决方案。

解决

假如服务端使用的utf-8的编码方式.

<form method="post" action="..." accept-charset="utf-8"> 
    <!-- code... --> 
</form>

剩下的工作交给浏览器搞定了。


网站添加支付宝捐款功能


起步

在浏览一些开源项目网站时看到有捐赠页面,也想自己的开源页面能不能也加个,毕竟为开源事业做贡献也是不容易。

zfb-btn-index.png

提交表单方式捐赠

看其他网页的前端代码,就能发现有个隐藏的表单。

<form action="https://shenghuo.alipay.com/send/payment/fill.htm" method="post" target="_blank" accept-charset="gbk">
    <input name="optEmail" type="hidden" value="你的支付宝账户" />
    <input name="payAmount" type="hidden" value="10" />
    <input name="memo" type="hidden" value="留下您的联系方式" />
    <input name="pay" type="image" value="转账" src="https://img.alipay.com/sys/personalprod/style/mc/btn-index.png" />
</form>

这种方式测了一下,需要再确认收款人的信息,并不方便,推荐用第二种方式