betway一开始和前端的同事一起合作写滑屏效果花

作者:betway计算机知识

【原】移动web滑屏框架共享,web滑框架共享

前段时间26号参预webrebuild温哥华站,会上听了彪叔的对初衷的传授,“工匠精气神”这几个词又一次被建议,也再也引起了自身对它的商量。专一二个种类并把它做得好,很好,更加好...现实工作中,十万火急,抱着实现职责的主张恐怕会比超级多,而想做得更加好,需不惜花销时间精力,诲人不惓,再三改革付加物,把99%巩固到99.99%,实乃不便于,那么职业,足履实地也是供给的~

此地也是给和谐做个提示,保持职业的欢欣和激情,哪怕未来付加物进步得不得了,对晋级本人力量依旧很有扶持~

走入正题,将来非常红在H5页面滑屏的效力,特别是在微信浏览器窗口中,差不离比比较多拓展的移动是行使到上下滑屏,意气风发最早和前端的同事一齐搭档写滑屏效果费用了过多的时间,并且写出来的页面在浏览器的合作上踩了成都百货上千坑,于是果断采纳了框架。

开始的一段时期接触是利用iscroll4.js的框架,终归它是相比成熟的,用起来会令人觉着放心,缺憾它在android2.3下滑屏效果包容性不是很好,此外还或然有多个欠缺是那些框架的有25K,为了二个滑屏的作用加载25K的代码是不划算的~

新生找了2个较易的(轻量、少bug),这里推荐给我们,有亟待的同学不要错失。

(有个别同学会问:为何不选用左右滑屏呢?原因之一是在Wechat浏览器中,向右滑动显示屏大概引致顾客误操退出当前页面)

上面给2个左右滑屏的事例~

实例黄金年代,轻松的内外滑屏

betway 1

实例二,轻松的光景滑屏,滑动中附加了动画~

betway 2

设计滑屏框架的措施一般有2种

  • 操纵父容器法
  • 控制子容器法

调控父容器法

经过决定父成分的transform: translateY或margin-top或top的值来上下滑动页面,每趟的位移的取值为当下页面中度~

betway 3

那边运用slip框架,库大小5.75K,超轻量,能够放心用在您的花色~

slip框架的页面样式必要自定义,可是这里本身大概写好了~

(倘让你不使用框架,推荐用transform: translate(X,Y)的写法,首先transform: translate可两全高质量动漫,其次包容android2.3 的种类,transform: translateY不包容android2.3的体系)

宽容ios5 、android2.3 系统,其滑屏功用,响应灵敏~如若你只需求规划简约的滑屏效果,可思忖它~

slip框架越多详细的效用猛击这里

代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<meta content="email=no" name="format-detection">
<title>slip</title>
<style>
*{padding: 0;margin: 0;}
/*框架*/
.swipe-wrap{width: 100%;height: 100%;position: relative;overflow: hidden;}
.swipe{position:absolute;width:100%;}
.swipe-box{width: 100%;overflow: hidden;}
</style>

</head>

<body> 

<div class="swipe-wrap" id="slip">
    <article class="swipe">

        <div class="swipe-box" style="background-color: gray;">
        第1屏
        </div>

        <div class="swipe-box" style="background-color: green;">
        第2屏
        </div>

        <div class="swipe-box" style="background-color: orange;">
        第3屏
        </div>

        <div class="swipe-box" style="background-color: blue;">
        第4屏
        </div>

    </article>
</div>

</body>

<script type="text/javascript" src="js/slip.min.js"></script>
<script type="text/javascript">
var container = document.getElementById('slip');
var pages = document.querySelectorAll('.swipe-box');
var slip = Slip(container, 'y').webapp(pages);
</script>

</html>

下载demo

调整子容器法

办法是只显示在那之中二个子成分,此外隐敝,滑屏时掩瞒当前成分,并体现当前因素的下八个同辈元素~

betway 4

那边运用fullPage框架,库大小7.69K~

fullPage框架的页面样式无需自定义,已有写好的

宽容ios5 、android2.3 系统,其滑屏成效,效果比较丰裕,协理缩放、旋转、折射率、自动滑屏等动漫片效果~假使您供给统筹精美的滑屏效果,可考虑它~

fullPage框架更加的多详细的职能猛击这里

代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<meta content="email=no" name="format-detection">
<title>fullPage</title>
<style>
*{padding: 0;margin: 0;}
/*框架*/
body{overflow: hidden;}
.page-wrap{overflow:hidden}
.page{display:none;width:100%;height:100%;overflow:hidden;position:absolute;top:0;left:0}
.contain{width:100%;height:100%;display:none;position:relative;z-index:0}
.current .contain,.slide .contain{display:block}
.current{display:block;z-index:1}
.slide{display:block;z-index:2}
.swipe{display:block;z-index:3;transition-duration:0ms!important;-webkit-transition-duration:0ms!important}
</style>
</head>

<!--[if lte IE 7]>      
<body scroll="no"> 
<![endif]-->
<!--[if gt IE 7]><!--> 
<body> 
<!--<![endif]-->

<!-- 框架[[ -->
<div id="pageContain" class="page-wrap">

    <div class="page page1 current" style="background-color: green;">
        <div class="contain">
            第一屏
        </div>
    </div>

    <div class="page page2" style="background-color: yellow;">
        <div class="contain">
            第二屏
        </div>
    </div>

    <div class="page page3" style="background-color: gray;">
        <div class="contain">
            第三屏
        </div>
    </div>

    <div class="page page4" style="background-color: purple;">
        <div class="contain">
            第四屏
        </div>
    </div>
</div>
<!-- 框架]] -->

</body>

<script type="text/javascript" src="js/fullPage.min.js"></script>
<script type="text/javascript">
//禁止窗口的默认滑动
document.ontouchmove = function(e){
    e.preventDefault();
}

//框架
var runPage,
    interval,
    autoPlay;

autoPlay = function(to) {

    clearTimeout(interval);
    interval = setTimeout(function() {
        runPage.go(to);
    }, 5000);

}

runPage = new FullPage({

    id : 'pageContain',                            // id of contain
    slideTime : 800,                               // time of slide
    continuous : true,                             // create an infinite feel with no endpoints
    effect : {                                     // slide effect
        transform : {
            translate : 'Y',                       // 'X'|'Y'|'XY'|'none'
            scale : [1, 1],                       // [scalefrom, scaleto]
            rotate : [0, 0]                       // [rotatefrom, rotateto]
        },
        opacity : [0, 1]                           // [opacityfrom, opacityto]
    },                           
    mode : 'wheel,touch',               // mode of fullpage
    easing : 'ease',                                // easing('ease','ease-in','ease-in-out' or use cubic-bezier like [.33, 1.81, 1, 1] )
    // callback : function(index, thisPage) {

    //     index = index   1 > 3 ? 0 : index   1;
    //     autoPlay(index);
    // }
});

// interval = setTimeout(function() {
//     runPage.go(runPage.thisPage()   1);
// }, 5000);

</script>
</html>

下载demo

 

ok~提前祝大家元日欢悦&新年高兴~

 

前些时间26号参加webrebuild阿布扎比站,会上听了彪叔的对初志的传授,工匠精神这些词又三次被建议,也...

本文由betway-必威手机用户端-必威注册发布,转载请注明来源

关键词: betway88客户端