モバイル Web スライドスクリーンフレーム共有_html/css

親要素の変換を制御してページを上下にスライドさせます:translateY、margin-top、またはtopの値。各ディスプレイスメントは現在のページの高さです~

メソッドは、子要素の1つだけを表示し、他の要素を非表示にします。画面をスライドすると、現在の要素が非表示になり、次のピア要素が表示されます~

ホームページ

ウェブフロントエンド

htmlチュートリアル

モバイル Web スライドスクリーンフレーム共有_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:51 AM

現在、H5 ページ、特に WeChat ブラウザウィンドウで非常に人気のあるスライディングスクリーン効果は、当初、フロントエンドの同僚と協力して作成するのに多大な費用がかかりました。スライディングスクリーン効果かなり時間がかかり、ブラウザ互換性の点で落とし穴が多かったので思い切ってフレームワークを採用しました。

私が初めて触れたのは、iscroll4.js フレームワークでした。結局のところ、このフレームワークは比較的成熟しており、安心して使用できます。残念ながら、Android 2.3 のスクロール効果との互換性はあまり良くありません。もう 1 つの欠点は、このフレームワークには 25,000 のコードがあり、スライディングスクリーン効果のために 25,000 のコードをロードするのはコスト効率が悪いということです。

その後、より簡単な 2 つのフレームワーク (軽量でバグが少ない) を見つけました。困っている学生はここを見逃さないでください。

(一部の学生は、「なぜ左右のスワイプを使用しないのかと尋ねます。理由の 1 つは、WeChat ブラウザで画面を右にスライドすると、ユーザーが誤って現在のページを終了する可能性があることです)

以下に 2 つの例を示します」上下のスワイプの例 ~

例 1、単純な上下のスワイプ

例 2、スライドにアニメーションを付けた単純な上下のスワイプ~

スライドをデザインするには、通常 2 つの方法があります。スクリーンフレーム

親コンテナメソッドの制御

子コンテナメソッドの制御

親コンテナメソッドの制御

親要素の変換を制御してページを上下にスライドさせます:translateY、margin-top、またはtopの値。各ディスプレイスメントは現在のページの高さです~

ここではスリップフレームワークが使用されています。ライブラリのサイズは5.75Kです。非常に軽量で、プロジェクトで使用できます~

スリップフレームワークのページスタイルは次のとおりです。カスタマイズしましたが、ここに簡単に書いてみました~

(フレームワークを使用しない場合は、transform:translate(X,Y)を使用することをお勧めします。まず、transform:translate(X,Y)を使用すると、高パフォーマンスのアニメーションを設計できます。 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="">        第1屏        </div>        <div class="swipe-box" style="">        第2屏        </div>        <div class="swipe-box" style="">        第3屏        </div>        <div class="swipe-box" style="">        第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>

ログイン後にコピー

デモをダウンロード

Control sub -containerメソッド

メソッドは、子要素の1つだけを表示し、他の要素を非表示にします。画面をスライドすると、現在の要素が非表示になり、次のピア要素が表示されます~

fullPageフレームワーク。ここで使用されているライブラリのサイズは7.69K~

fullPageフレームワークのページスタイルはカスタマイズする必要はなく、すでに記述されています

ios5+、android2.3+システムと互換性があり、そのスライディングスクリーン機能、効果は比較的豊富で、ズーム、回転、透明度、自動スライディングスクリーン、その他のアニメーション効果をサポートしています~素晴らしいスライディングスクリーン効果をデザインする必要がある場合は、検討してください~

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="">        <div class="contain">            第一屏        </div>    </div>    <div class="page page2" style="">        <div class="contain">            第二屏        </div>    </div>    <div class="page page3" style="">        <div class="contain">            第三屏        </div>    </div>    <div class="page page4" style="">        <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>

ログイン後にコピー

デモをダウンロード

White Oak から転載:

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。