为了更好的提升用户体验,移动端逐渐出了许多的移动端的框架,比如Sencha Touch、JQTouch、Jquery-moblie、jqMobi等等。这些框架都有优缺点,不同的框架应用在不同的项目中。现简单阐述一下各框架的优缺点: 一、Sencha Touch框架是一个重量级的框架、它上手较难,代码复杂,并且需要较强的程序基础才能学习,最开始的时候因为一个项目,想使用Sencha Touch框架,后来工期实在太紧张,根本没时间学习它并使用。所以最后转投其他框架。这个框架兼容性很高,运行起来的速度一般,需要长时间的学习且需要水平较高的程序基础才行。所以不太适合前端制作人员的使用。我会在以后的机会单开一篇关于它的使用demo。 二、JQTouch是一个轻量级框架、纯jquery写法,上手比较容易,代码容易理解,加载速度也很快,缺点是配合的移动端效果插件较少,需要很多外部的插件相结合,另外,个别插件还需要解决与框架之间的兼容问题。它的最大的一个弊端就是可利用和变通的布局较少。 三、Jquery-moblie也是一个轻量级框架、纯jquery写法,上手容易,代码容易理解,但由于其绑定的前端效果插件过多,且代码结构有些臃 肿,造成加载速度很慢。尤其是在android系统上测试,速度很慢。用户体验效果不太好,它比较适合开发IPAD或是IOS系统的高端机型。 四、jqMobi也是一个轻量级框架、它的语言基于jquery语言。并对其进行了简化,更有利于在移动设备上进行应用,并且速度很流畅。上手也比较容…
May 13, 2015
常用JavaScript函数 71 -(自我总结)
71、 javascript判断鼠标左右键点击-兼容ie、firefox、chrome等各大主流浏览器
72、 javascript获取鼠标当前位置(兼容IE和firefox)
71、 javascript判断鼠标左右键点击-兼容ie、firefox、chrome等各大主流浏览器
document.onmousedown=judgeMouseButton; function judgeMouseButton(e){ var e=window.event||e;//获取事件对象 var value=e.button; if(value==2||value==3){ alert('点击的是鼠标右键'); }else{ alert('点击的是鼠标左键'); } }
72、 javascript获取鼠标当前位置(兼容IE和firefox)
<script> function mouseMove(ev){ ev= ev || window.event; var mousePos = mouseCoords(ev); //alert(ev.pageX); document.getElementById("xxx").value = mousePos.x; document.getElementById("yyy").value = mousePos.y; } function mouseCoords(ev){ if(ev.pageX || ev.pageY){ return {x:ev.pageX, y:ev.pageY}; } return { x:ev.clientX + document.body.scrollLeft - document.body.clientLeft, y:ev.clientY + document.body.scrollTop - document.body.clientTop }; } document.onmousemove = mouseMove; </script> 鼠标 X 轴: <input id=xxx type=text> 鼠标 Y 轴: <input id=yyy type=text>
或者:
/** * 获取鼠标在页面上的位置 * @param ev 触发的事件 * @return x:鼠标在页面上的横向位置, y:鼠标在页面上的纵向位置 */ function getMousePoint(ev){ //定义鼠标在视窗中的位置 var point={ x:0, y:0 }; //如果浏览器支持 pageYOffset, 通过 pageXOffset 和 pageYOffset 获取页面和视窗之间的距离 if(typeof window.pageYOffset!='undefined'){ point.x=window.pageXOffset; point.y=window.pageYOffset; } //如果浏览器支持 compatMode, 并且指定了 DOCTYPE, 通过 documentElement 获取滚动距离作为页面和视窗间的距离 //IE 中, 当页面指定 DOCTYPE, compatMode 的值是 CSS1Compat, 否则 compatMode 的值是 BackCompat else if(typeof document.compatMode!='undefined'&&document.compatMode!='BackCompat'){ point.x=document.documentElement.scrollLeft; point.y=document.documentElement.scrollTop; } //如果浏览器支持 document.body, 可以通过 document.body 来获取滚动高度 else if(typeof document.body!='undefined'){ point.x=document.body.scrollLeft; point.y=document.body.scrollTop; } //加上鼠标在视窗中的位置 point.x+=ev.clientX; point.y+=ev.clientY; //返回鼠标在视窗中的位置 return point; //document.write("X:"+point.x+"<br>Y:"+point.y); }