【原】移动web滑屏框架分享

本月26号参加webrebuild深圳站,会上听了彪叔的对初心的讲解,“工匠精神”这个词又一次被提出,也再次引起了我对它的思考。专注一个项目并把它做得好,很好,更好...现实工作中,忙忙碌碌,抱着完成任务的想法可能会比较多,而想做得更好,需不惜花费时间精力,孜孜不倦,反复改进产品,把99%提高到99.99%,实在是不容易,那么专业,敬业也是少不了的~

这里也是给自己做个提醒,保持做事的热情和激情,哪怕以后产品发展得不好,对提升自身能力还是很有帮助~

进入主题,现在很流行在H5页面滑屏的效果,特别是在微信浏览器窗口中,几乎很多推广的活动是使用到上下滑屏,一开始和前端的同事一起合作写滑屏效果花费了很多的时间,而且写出来的页面在浏览器的兼容上踩了很多坑,于是果断采用了框架。

最初接触是使用iscroll4.js的框架,毕竟它是比较成熟的,用起来会让人觉得放心,可惜它在android2.3下滑屏效果兼容性不是很好,另外还有一个缺点是这个框架的有25K,为了一个滑屏的效果加载25K的代码是不划算的~

后来找了2个比较简单的(轻量、少bug),这里推荐给大家,有需要的同学不要错过。

(有些同学会问:为什么不使用左右滑屏呢?原因之一是在微信浏览器中,向右滑动屏幕可能导致用户退出当前页面)

下面给2个上下滑屏的例子~

实例一,简单的上下滑屏

实例二,简单的上下滑屏,滑动中附加了动画~

设计滑屏框架的办法一般有2种

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

控制父容器法

通过控制父元素的transform: translateY或margin-top或top的值来上下滑动页面,每次的位移的取值为当前页面高度~

这里采用slip框架,库大小5.75K,非常轻量,可以放心用在你的项目~

slip框架的页面样式需要自定义,不过这里我简单写好了~

(如果你不使用框架,推荐用transform: translate(X,Y)的写法,首先transform: translate可设计高性能动画,其次兼容android2.3+的系统,transform: translateY不兼容android2.3的系统)

兼容ios5+、android2.3+系统,其滑屏功能,响应灵敏~如果你只需要设计简单的滑屏效果,可考虑它~

slip框架更多详细的功能猛击这里https://github.com/binnng/slip.js

代码:

<!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

控制子容器法

方法是只显示其中一个子元素,其它隐藏,滑屏时隐藏当前元素,并显示当前元素的下一个同辈元素~

这里采用fullPage框架,库大小7.69K~

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

兼容ios5+、android2.3+、winphone 8系统,其滑屏功能,效果比较丰富,支持缩放、旋转、透明度、自动滑屏等动画效果~如果你需要设计精彩的滑屏效果,可考虑它~

fullPage框架更多详细的功能猛击这里https://github.com/powy1993/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~提前祝大家元旦快乐&新年快乐~

 

作者:白树

出处:http://peunzhang.cnblogs.com/

时间: 2024-08-01 17:30:38

【原】移动web滑屏框架分享的相关文章

滑屏 H5 开发实践九问

  滑屏的交互形式自从在 H5 中流行起来,便广泛应用在产品宣传.广告.招聘和活动运营等场景中,作为微信朋友圈广告惯用的形式,其影响力更是得到了强化与放大.如今滑屏H5可谓玲琅满目,数不尽数. 作为一个 UI工程师,接过很多类似的项目,也曾写过滑屏的插件,在经历了不同的需求的"洗礼"并踩过若干个坑之后,不禁反问自己:应该如何面对每一次类似的需求,在已有的经验下如何做到体验更好?如何节省工作量提高效率?面对性能优秀的 iOS 与性能良莠不齐的 Android 平台,又如何做到体验统一与性

好的web移动应用框架的构想

网页制作Webjx文章简介:WEB移动应用框架构想. iUI.jQTouch.WPTouch.PhoneGap.XUI.iWebkit.Rhodes.gwt-mobile-当我们已经开始惊叹 web移动应用充斥着各种各样框架与类库的时候,其实各大web框架才刚刚开始他们的移动领域:Yahoo的YUI3.2的Touch版.jQuery的 jQueryMobile.ExtJS整合JQTouch和Raphaël库推出的Sencha Touch框架... ExtJs更名为Sencha的确让我震惊不少,毕

web java c++ dll-想做一个web系统,框架采用struts+spring,数据库操作部分调用现成的dll是否可以

问题描述 想做一个web系统,框架采用struts+spring,数据库操作部分调用现成的dll是否可以 公司原有一套系统是基于C++的C/S模式的,想在此基础上添加B/S模式,数据库表及字段.数据处理方式都不变,只是需要web显示,我能否采用java进行开发,并使用struts和spring框架,数据库操作不用java调用原来的dll来完成?

手机Web APP如何实现分享多平台功能_javascript技巧

话说App一般都带有分享到社交平台的入口,web网页的分享也有很不错的框架,但是随着HTML5的不断发展,手机web页面越来越多的进入到我们的生活中,那如何在我们的手机上完成分享呢?话说各大分享平台都有针对Android.Ios的SDK,作为开发者,我们只需要将SDK集成的我们的项目中即可,通过提供的外部接口,我们可以很容易的完成分享的功能:web网页呢,网上也存在很多优秀的分享框架,例如:bShare分享 .JiaThis分享:我们可以很方便的集成到我们的项目中:但是手机web页面实现分享就需

jquery实现滑屏大图定时收缩为小banner图片的广告代码_jquery

本文实例讲述了jquery实现滑屏大图定时收缩为小banner图片的广告代码.分享给大家供大家参考.具体如下: 这是一款基于jQuery实现的JS广告特效,滑屏大图广告定时收缩为小banner图片广告代码,这种广告在各大门户网站现在还能看得到,刚打开网页的时候可以看到滑下来的大图片广告,过一会,广告自动缩小变成了一个banner横幅广告,并带有关闭按钮,可以关闭广告,对于广告来说,这个代码挺实用. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/

Hammer.js+轮播原理实现简洁的滑屏功能_javascript技巧

最近有个任务,做一个非常小的h5的应用,只有2屏,需要做横向的全屏滑动切换和一些简单的动画效果,之前做这种东西用的是fullpage.js和jquery,性能不是很好,于是就想自己动手弄一个简单的东西来实现.最后我用zepto + hammer.js 和轮播的方式解决了这个问题,效果还不错,整个页面不开启Gzip时所有资源请求的数据大小为200KB左右.这篇文章总结下这个方法的实现思路. 效果演示: 1. 实现要点 1)滑屏借鉴bootstrap的carousel插件,不过完全没有它那个复杂,只

Android使用ViewFlipper和GestrueDetector共同实现滑屏效果实例

本文实例讲述了Android使用ViewFlipper和GestrueDetector共同实现滑屏效果.分享给大家供大家参考,具体如下: 关于GestureDetector的相关知识,前面已经介绍过了,不懂的大家可以去了解一下. 1.main.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/

Android基于ViewPager+Fragment实现左右滑屏效果的方法

本文实例讲述了Android基于ViewPager+Fragment实现左右滑屏效果的方法.分享给大家供大家参考,具体如下: 1.xml布局模板 <android.support.v4.view.ViewPager android:id="@+id/local_software_viewpager" android:layout_width="match_parent" android:layout_height="match_parent"

10个优秀的 Web UI 库/框架

UI(User Interface)即用户界面,也称人机界面.是指用户和某些系统进行交互方法的集合,实现信息的内部形式与人类可以接受形式之间的转换.本文为WUI用户整理了10个优秀的 Web UI 库/框架,为你的下一个Web设计的高效开发作好准备. 1. IT Mill ToolkitIT Mill Toolkit是一个开源的Web UI 框架,为富 Web 应用程序提供widgets 和工具.无需担忧Web 浏览器.DOM . JavaScript的兼容性性问题. 2. LivePipe U