关于javascript手势的信息
如何使用JavaScript响应鼠标或滑动手势
把你的程序改为
成都创新互联服务项目包括洛宁网站建设、洛宁网站制作、洛宁网页制作以及洛宁网络营销策划等。多年来,我们专注于互联网行业,利用自身积累的技术优势、行业经验、深度合作伙伴关系等,向广大中小型企业、政府机构等提供互联网行业的解决方案,洛宁网站推广取得了明显的社会效益与经济效益。目前,我们服务的客户以成都为中心已经辐射到洛宁省份的部分城市,未来相信会继续扩大服务区域并继续获得客户的支持与信任!
html
headtitlemousestatus/title/head
body
a href="#" id="testlink"Test Link/a
form name="theform"
textarea rows="20" cols="25" name="info"
/textarea
/form
script type="text/javascript" language="javascript"
function mousestatus(e){
if(!e)e=window.event;
var btn=e.button;
var whichone=(btn2)?"Left":"Right";
var message=e.type+":"+whichone+"\n";
document.theform.info.value=message;
}
var obj=document.getElementById("testlink");
obj.onmousedown=mousestatus; //事件属性改为小写,函数后面不要加括号
obj.onmouseup=mousestatus;
obj.onclick=mousestatus;
obj.ondblclick=mousestatus;
/script
/body
/html
在ie7下可以通过,改动在两个地方,首先把一个函数付给一个对象的参数的时候后面不要加()否则就是调用这个函数了。
第二,html对象的事件属性都是小写。
javascript,移动划过超链接鼠标变手型
用css控制鼠标样式的语法如下:
span style="cursor:*"文本或其它页面元素/span
把 * 换成如下15个效果的一种:
下面是对这15种效果的解释。移动鼠标到解释上面,看看你的鼠标起了什么变化吧!
hand是手型
pointer也是手型,这里推荐使用这种,因为这可以在多种浏览器下使用。
crosshair是十字型
text是移动到文本上的那种效果
wait是等待的那种效果
default是默认效果
help是问号
e-resize是向右的箭头
ne-resize是向右上的箭头
n-resize是向上的箭头
nw-resize是向左上的箭头
w-resize是向左的箭头
sw-resize是左下的箭头
s-resize是向下的箭头
se-resize是向右下的箭头
auto是由系统自动给出效果
百度地图javascript api支持手势缩放拖拽吗
map.disablePinchToZoom(true); //禁用双指缩放, 传false是可以双指缩放
如何用JS监控多种手势
鼠标的手势操作主要还是基于mousedown、mousemove、mouseup来实现。
触屏设备基于touchstart、touchmove、touchend来实现。
本身这两种设备就是不等同的。而且现实工作中。谁会搞一个既在PC浏览器上支持,又在触屏浏览器上支持的东西呢?因为我们的网站本来就是分为桌面版和触屏版。让用户自由选择好了,我们开发者区分对待。
更何况,二者的手势形势从根本上就是不同的。触屏设备支持多点触控,可以进行pinch(双指缩放)、rotate(双指旋转)、双指下拉、双指上推等等特殊手势。请问鼠标如何去实现呢?
所以说,我们作为前端开发,不要总期许有一个大而全,万能的大神,写一个啥都能干的东西出来。即便是大神也要考虑有所为,有所不为啊。
移动端怎么用JS判断是手势是向上滑动还是向下滑动
参考这位博客的内容:
js判断手指滑动方向(移动端)
var startx, starty;
//获得角度
function getAngle(angx, angy) {
return Math.atan2(angy, angx) * 180 / Math.PI;
};
//根据起点终点返回方向 1向上 2向下 3向左 4向右 0未滑动
function getDirection(startx, starty, endx, endy) {
var angx = endx - startx;
var angy = endy - starty;
var result = 0;
//如果滑动距离太短
if (Math.abs(angx) 2 Math.abs(angy) 2) {
return result;
}
var angle = getAngle(angx, angy);
if (angle = -135 angle = -45) {
result = 1;
} else if (angle 45 angle 135) {
result = 2;
} else if ((angle = 135 angle = 180) || (angle = -180 angle -135)) {
result = 3;
} else if (angle = -45 angle = 45) {
result = 4;
}
return result;
}
//手指接触屏幕
document.addEventListener("touchstart", function(e) {
startx = e.touches[0].pageX;
starty = e.touches[0].pageY;
}, false);
//手指离开屏幕
document.addEventListener("touchend", function(e) {
var endx, endy;
endx = e.changedTouches[0].pageX;
endy = e.changedTouches[0].pageY;
var direction = getDirection(startx, starty, endx, endy);
switch (direction) {
case 0:
alert("未滑动!");
break;
case 1:
alert("向上!")
break;
case 2:
alert("向下!")
break;
case 3:
alert("向左!")
break;
case 4:
alert("向右!")
break;
default:
}
}, false);
本文标题:关于javascript手势的信息
转载来于:http://pwwzsj.com/article/dsdhjho.html