一、涉及知识点
1.touchstart、touchmove、touchend
2.触摸参数,事件e
e.touches:屏幕中所有手势列表;
e.touches[0]:获取第一个手势,是一个json对象(属性有pageX,pageY...),用于touchstart,touchmove事件中;
e.changedTouches:获取发生该事件的手势列表;
e.changedTouches[0]:用于touchend;
3.移动端网速慢,轮播图片加载,做了一些技巧性处理:
html结构中,第一张图的src属性填写轮播图,其他图片用站位图片代替;
在js首次加载中,克隆第一张图(fc)和最后一张图片(lc),将fc追加到图片列表之后,将lc添加到图片列表之前,加载出包含原第一图片,共三张图片;
~~作为一个web初级程序员,多写拆轮子,多写轮子才是王道,多总结~~
4.判断当前图片是否加载完,直接上代码了:
function loadImag($img,callback){
if(!($img&&$img.length)) return;
$img.attr("src",$img.attr("data-src"));
callback&&($img[0].οnlοad=function(){
callback();
$img[0].οnlοad=null;
})
}
5.transition、transform、translate3d,老是弄混这三个属性,这里理解一下
transtion:all 0.4s ease;过渡,效果
transform:空间上的效果
transform:translate3d(x,y,z);
6.设置浏览器兼容。直接抄袭别人代码,心里有愧,不好意思拿到这里,这是在本来生活前端主管写的,自己写一遍熟悉一下:
var ani = {};
ani.transition = "all 0.4s ease"; //-webkit-transition
ani.transform = "translate3d(0, 0, 0)"; //-webkit-transform
CSS3(ani);
//输出结果 this.CSS3({"属性名":"属性值","属性名":"属性值","属性名":"属性值"})
//{"属性名":"属性值","属性名":"属性值","属性名":"属性值"}
使用情况1:this.imgList.css(this.CSS3(ani));
使用情况2:this.imgList.css(this.CSS3("transition","all 0.4s ease"));
function CSS3(){
var prefix=["-webkit-","-o-","-ms-","-moz-"],
o={};
if("string"==typeof(argument[0])){
o[argument[0]]=argument[1];
}else{
o=argument[0];
}
for(var i=0,lth=prefix.length;i<lth;i++){
for(var k in o){
o[prefix+k]=o[k];
}
}
return o;
}