zoukankan      html  css  js  c++  java
  • 移动端轮播效果

    一、涉及知识点

    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].onload=function(){
      callback();
      $img[0].onload=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;
    }

      

  • 相关阅读:
    读Windows核心编程2字符和字符串
    HTTP Error 404.3 while browse to WCF service
    读Windows核心编程3内核对象
    代码安全性的基本原则[转载]
    在HyperV中安装和配置Ubuntu网络
    使用Windows Azure Mobile Service开发Windows Phone 8 App
    Js 学习 使用js arguments 写一个 多态overload 的小程序。 js 闭包写一个10的阶乘的算法
    js 学习 函数
    jquery slider show carouFredSel
    vs 2010 创建windows phone 程序 出现System.ArgumentNullException Value cannot be null. Parameter name: parentContext
  • 原文地址:https://www.cnblogs.com/haigelang/p/4977857.html
Copyright © 2011-2022 走看看