开发微站时发现一个bug,在小米1s的微信webview里面,当元素被设为position:fixed时,z-index有时候会失效。 测试了一下,发现是因为有些元素使用了-webkit-animation。 这是怎么一回事呢?当两个元素都设为position:fixed时,再给他们设z-index,这时,层级就不是按照正常的大者为上了。 而是先看看谁有-webkit-animation这个属性,哪个有就哪个为上。如果两个都有,这是才以正常层级划分。 先别急,除了是否有-webkit-animation这个属性之外,里面必须有渐变属性 @-webkit-keyframes name{ [more...]

 

一、借助script的异步跨域请求 先说跨域的问题,首先要指出的是,iframe里的js宿主对象一样也躲不开同源策略(Same Origin Policy),仅仅能解决二级域名的跨域而已,比如www.tudou.com和so.tudou.com,如果要请求某个八杆子打不到一起去的域名下的数据(例如你想搞mashup),建议老老实实的用script标签去请求JSONP罢。关于JSONP要附带说一下的是,jQuery对JSONP请求的封装方式很值得提倡: $.getJSON(url, params + ”&jsoncallback=?”, function(json){     [more...]

 

Asynchronous JavaScript and XML (Ajax ) 是驱动新一代 Web [more...]

 

1、-webkit-tap-highlight-color:rgba(255,255,255,0)可以同时屏蔽ios和android下点击元素时出现的阴影。备注:transparent的属性值在android下无效。 2、-webkit-appearance:none可以同时屏蔽输入框怪异的内阴影。 3、-webkit-transform:translate3d(0, 0, 0)在ios下可以让动画更加流畅(这个属性会调用硬件加速模式),但是在android下不可乱用,很多见所未见的bug就是因为这个。 4、@-webkit-keyframes可以预定义很多你所想到的动画,然后通过-webkit-transition来调用。 5、-webkit-background-size可以做高清图标,不过一些低版本的android只能识别background-size,所以有必要两个都要写上;用这个属性的时候推荐树勇cover这个值,可以自动去匹配宽和高。 [more...]

 

涉足了一下sencha touch ,它也属于ExtJs框架的一种,看了很多天,糊里糊涂的,虽然有API,可是不懂它的机制还是没啥用…… 后来看了很多博文,才略懂一二啊 或者步骤可以这样说: 1、下载sencha touch [more...]

 

Gesture事件,包括手指点击(click),轻拂(flick),双击(double-click),手指的分开、闭合(scale)、转动(rotate)等一切手指能在屏幕上做的事情 它只在有两根或多根手指放在屏幕上的时候触发 事件处理函数中会得到一个GestureEvent类型的参数 它包含了手指的scale(两根移动过程中分开的比例)信息和rotation(两根手指间连线转动的角度)信息 这个事件是对touch事件的更高层的封装,和touch一样,它同样包括gesturestart,gesturechange,gestureend。 gesturestart // [more...]

 

以下是几种普及得比较好的触摸事件,可以在绝大多数现代浏览器中来测试这一事件(必须是触屏设备): (on)touchstart:触摸开始的时候触发 (on)touchmove:手指在屏幕上滑动的时候触发 (on)touchend:触摸结束的时候触发 (on)touchcancel:系统取消touch事件的时候触发。例如电话接入或者弹出信息。一般用在游戏:玩着的时候,突然来电话了,就触发touchcancel事件暂停游戏、存档等操作。 而每个触摸事件都包括了三个触摸对象列表,每个列表里包含了对应的一系列触摸点(触摸对象,用来实现多点触控): touches:当前位于屏幕上的所有手指的列表。 [more...]

 

前几天写几个页面,在几台手机上测试都没事,然后到了开发后期,发现在一台galaxy上的微信里面却发现变了样…… 在列表那里,设置了li的height,也设了同样大小的line-height,一般情况下,文字应该是居中的 可是在galaxy里面,它文字偏偏却往上偏了……(这个现象出现在微信的webview里面) 研究了一番,发现galaxy的解析有点不一样,至于出现问题的原理,基于水平问题,还不能得出正确的答案。 只是能提供另一种方案,实现文字居中,就是不设height和line-height,设padding,上下的padding一样就好。 由于笔者的情况单一,如果有其他需求,该需再研究研究

 

现在在ios/android上的web网站变的越来越多,智能机中ios和android系统的设备市场份额也是与日俱增,相信未来会是一个趋势,那么如何构建基于webkit的网站呢? 这里有一篇文章介绍了如何用html5创建一个iphone的app,这是一个基于web的本地离线应用,相对于native应用来说基于web的应用开发和测试都非常快捷,基于webkit浏览器支持大部分的html5,也支持大部分的css3,而且开发语言也是大多数web工程师所熟悉的,最重要的一点是基于web的应用是完全跨平台的,不需要多平台的开发和测试。 开发基于webkit的web app/page时需要注意的有: HTML特性: <input type=”file” [more...]

 

因为都是些简单的逻辑代码,所以不作解说。 只是期间用到自定义获取元素的函数get(),和做了浏览器之间的兼容而已。 //为元素添加事件函数 //node –> 需要添加事件的元素 //type [more...]

© 2012 Hedgehog Suffusion theme by Sayontan Sinha