美文网首页
关于68周年的H5总结

关于68周年的H5总结

作者: ZoeDu | 来源:发表于2017-12-11 11:01 被阅读0次

    前期准备

    • swiper

    • swiperAnimate插件

    • swiperAnimate配置文件js手写

    • 布局rem

    • velocity.js

    • jquery.touchy.min.js

    • jquery-2.1.4.min.js

    注意事项

    • UC浏览器实际的视框<1000px的高度(设计稿就要保证在安全范围)
    • 华为手机 X5内核手机的控制
    • 正式地址不要开始就使用,应该空下来
     var l = new Swiper($(".swiper-container-main"), {
            direction: "vertical",
            speed: 500,
            grabCursor: !0,
            autoplay: !1,
            loop: !1,//是否循环
            noSwiping: !0,//是否能滑动
            initialSlide: 0,//初始是第几页
            onInit: function(t) {
                n.init(swiperAnimateParam_main, t),
                n.play()
           },
    
    1. ps cc中已经有功能为复制css,但是要注意先合并图层
    2. 加到头信息中
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
      <meta name="x5-fullscreen" content="true">
      <meta name="full-screen" content="yes">
     <!-- 强制竖屏-->
      <meta name="screen-orientation" content="portrait">
      <meta name="x5-page-mode" content="app">
      <meta name="browsermode" content="application">
      <meta name="HandheldFriendly" content="true">
      <meta name="msapplication-tap-highlight" content="no">
      <meta name="renderer" content="webkit">
      <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    
    1. sass文件中,将px转成rem
    @function pxTorem($px){ @return $px / 32 * 1rem; }
    
    1. css3 animation 中如果写both则不会回到初始

    2. onSlideChangeEnd: function(t),中执行一些滚到当前页的函数
      t.activeIndex表示当前页,如果是第二页,则if( t.activeIndex ==2)通过添加和删除类可以实现自己的css3动画的加载和删除

    相关文章

      网友评论

          本文标题:关于68周年的H5总结

          本文链接:https://www.haomeiwen.com/subject/totiixtx.html