2017-6-28 1175 0
2017-6-23 960 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 1057 0
自己整理

在创建站点之前,我们需要根据自己的条件进行一些配置,这可以让以后的站点运行更稳定!前期准备:安装宝塔Linux面板4.2.x,安装Linux工具箱,安装LNMP或LAMP环境具体优化设置步骤1、添加计划任务,定期释放内存,建议设置每天释放一次,执行时机为半夜,如:3:302、打开Linux工具箱添加SwapSwap推荐值:物理内存Swap512M1024M1GB1500M2GB1500M4GB1024M6GB+1024M3、安装PHP缓存扩展,根据即将部署的站点需求,尽量使用更高的PHP版本,另外缓存安装建议如下:脚本缓存:xcache、opcache任选一项安装,PHP5.2-5.4建议使用xcache,PHP5.5以上建议使用opcache内容缓存:若程序支持,建议优先顺序如下:redis>apc>memcached>memcache注意:内容缓存和脚本缓存,都各只安装一个,不要安装多个!4、若程序支持,尽量使用imagemagick代替PHP自带GD,以提升性能5、若程序支持,尽量安装fileinfo、exif扩展,以提升站点性能和安全性6、若确定您的程序不需要,尽量不要安装ZendGuardLoader,ioncube解密扩展7、若您的程序不需要PATH_INFO,请把它关闭8、PHP并发调整建议:CPU/内存单站点多站点1H/512M20-3010-201H/1G30-5020-302H/2G50-8030-502H/4G60-10030-504H/4G100-15030-804H/8G100-20030-806H/6G100-20030-808H/8G100-30050-1008H/16G100-300100-15016H/16G100-300100-150注1:容易受到CC攻击的站点使用的PHP版本,尽量不要设置过高的并发,以免服务器被打死注2:VPS性能参差不齐,以上建议仅供参考,请根据实际使用效果自行调整注3:不建议设置超过300并发上限,哪怕您的服务器性能足够好;若发现并发不够用,请尝试优化站点数据库缓存可能更有效9、MySQL数据库版本建议:CPU/内存数据库1H/512MMySQL5.11H/1GMySQL5.1/5.52H/2GMySQL5.1/5.52H/4GMySQL5.5/5.64H/4G+MySQL5.5/5.6/5.7来源于bt论坛:Liunx面板如何设置能充分利用服务器性能