2017-8-31 2414 0
2017-6-28 2366 0
2017-6-23 2091 0
未分类

现在智能手机火爆了,我们都是触摸屏事的,那么我们以前js写法是无法满足一些要求了,下面我来给大家介绍几个JS手机触摸屏的事件用法处理Touch事件能让你跟踪用户的每一根手指的位置。你可以绑定以下四种Touch事件:一、touchstart://手指放到屏幕上的时候触发touchmove://手指在屏幕上移动的时候触发touchend://手指从屏幕上拿起的时候触发touchcancel://系统取消touch事件的时候触发。至于系统什么时候会取消,不详二、clientX/clientY://触摸点相对于浏览器窗口viewport的位置pageX/pageY://触摸点相对于页面的位置screenX/screenY://触摸点相对于屏幕的位置identifier:>//touch对象的uniqueID三,每个Touch对象包含下列属性。clientX:触摸目标在视口中的X坐标。clientY:触摸目标在视口中的Y坐标。identifier:表示触摸的唯一ID。pageX:触摸目标在页面中的x坐标。pageY:触摸目标在页面中的y坐标。screenX:触摸目标在屏幕中的x坐标。screenY:触摸目标在屏幕中的y坐标。target:触摸的DOM节点坐标。例代码如下复制代码<!doctypehtml><html><head><metacharset="utf-8"><title>touches</title><style>body{font-size:60px;color:red;}</style><script>functiontouches(ev){if(ev.touches.length==1){varoDiv=document.getElementById('div1');switch(ev.type){case'touchstart':oDiv.innerHTML='Touchstart('+ev.touches[0].clientX+','+ev.touches[0].clientY+')';ev.preventDefault();//阻止出现滚动条break;case'touchend':oDiv.innerHTML='Touchend('+ev.changedTouches[0].clientX+','+ev.changedTouches[0].clientY+')';break;case'touchmove':oDiv.innerHTML='Touchmove('+ev.changedTouches[0].clientX+','+ev.changedTouches[0].clientY+')';break;}}}document.addEventListener('touchstart',touches,false);document.addEventListener('touchend',touches,false);document.addEventListener('touchmove',touches,false);</script></head><body><divid="div1"></div></body></html>二、手势事件:gesturestart:当一个手指按在屏幕上,另一个手指有触发屏幕时,触发;gestureend:当你的任何一个手指从屏幕上移开的时候,触发;gesturechange:当触摸屏幕的任何一个手指发生变化的时候,触发;在事件对象这里,其他的都还一样,在手势这里多了两个很有用的东西:一个是rotation:手指变化引起的旋转角度,顺时针为正的,逆时针为负的;还有一个scale:两个手指之间的距离变化;例代码如下复制代码<!doctypehtml><html><head><metacharset="utf-8"><title>gesture</title><style>body{font-size:60px;color:red;}</style><script>window.onload=function(){functiongesture(ev){vardiv=document.getElementById('div1');switch(ev.type){case'gesturestart':div.innerHTML='Gesturestart(rotation='+ev.rotation+',scale='+ev.scale+')';ev.preventDefault();break;case'gestureend':div.innerHTML='GestureEnd(rotation='+ev.rotation+',scale='+ev.scale+')';break;case'gesturechange':div.innerHTML='GestureChange(rotation='+ev.rotation+',scale='+ev.scale+')';break;}}document.addEventListener('gesturestart',gesture,false);document.addEventListener('gestureend',gesture,false);document.addEventListener('gesturechange',gesture,false);}</script></head><body><divid="div1"></div></body></html>来自:http://blog.csdn.net/b7995547/article/details/48951761

源码

为了减少服务器连接数。或者是为了确保JS执行时,所依赖CSS文件已经下载完成。你是否想过要把CSS和JS写到一个文件里呢?今天学了一招,正好解决这个问题![原作者的BLOG:http://blogs.msdn.com/shivap/archive/2007/05/01/combine-css-with-js-and-make-it-into-a-single-download.aspx]这其实是利用了浏览器特性的一种HACK手法!作者说在IE和FF下能正常使用。我用opera9.02测试过了,可以正常运行。关键点:CSS和JS解析器在处理注释的区别1.CSS解析器在碰到“<!--”的时候会直接抛弃2.JS解析器在碰到“<!--”的时候,会把他当作"//"处理。也就是说把他当做行注释处理!看看下面这个代码片段:1<!--/*2functiontest(){alert("虽然使用性有待商榷。\n但想法值得称赞!");}3<!--*/4<!--body{background-color:#f00;}CSS解析时,它等价于下面这段代码1/*2functiontest(){alert("虽然使用性有待商榷。\n但想法值得称赞!");}3*/4body{background-color:#f00;}而JS解析时,他却等价于如下代码1///*----行注释2functiontest(){alert("虽然使用性有待商榷。\n但想法值得称赞!");}3//*/----行注释4//body{background-color:#f00;}----行注释问题是不是解决了呢?将这段代码,保存成1.jcs。[或其他任意文件名,引用的时候做对应修改就行了]然后,将下面代码保存成任意文件。和他放在同一目录下即可!1<linktype="text/css"rel="stylesheet"href="1.jcs"/>2<scripttype="text/javascript"language="javascript"src="1.jcs"></script>3<inputtype="button"value="点我一下,看包含的函数是否可以执行"onclick="test()"/>link和script标签虽然两次链接该文件。但是由于缓存的缘故,只会发一次请求!当然,代价是增加了约等于“4*css行数”的冗于代码。正常情况下,这个冗于在1K以内!来源:http://www.cnblogs.com/devweb/archive/2009/10/09/1579535.html

源码

其实flash遮挡div方法有很多,但大多数都没有写是为什么遮挡了,下面是我总结的原因:可能不全,不过我现在还没有发现在别的问题。原因也就是没有给flash添加透明效果这个属性。我们在<object></object>标签里面添加如下代码问题应该就解决了,并非是给z-index设置值的问题。12345<objectclassid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0"width="590"height="105"><paramname="movie"value="http://gg.blueidea.com/2005/www/533-104.swf"/><paramname="quality"value="high"/><paramname="wmode"value="transparent"/><embedsrc="你的flash.swf"width="590"height="105"quality="high"1pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash"type="application/x-shockwave-flash"12wmode="transparent"></embed></object>有两点要注意:1、<paramname="wmode"value="transparent"/>2、<embedwmode="transparent">重点在这里,在<embed>中加入wmode="transparent"属性,FF中层的问题就可以解决了。3、type="application/x-shockwave-flash"以上三行代码一定要加上,flash才不会挡住,DIV。来源:http://www.cnblogs.com/sjrhero/articles/1850524.html附加:如果是div与div直接有遮挡可以尝试下面的方法:先在<div>的父辈元素设定position:relative;在同级的<div>和自身都设置position:relative;在目标<div>设置z-index:99

2017-6-8 2214 0