iSlider移動端Webappスライドの最適解

3129 ワード

転載は原文の出典を明記してください。
http://qbaty.iteye.com/blog/2152674
この文章は主にiSliderの誕生過程とiSliderとiSliderの未来を紹介します。
iSliderのプロジェクトアドレス
https://github.com/BE-FE/iSlider
iSliderの例
http://be-fe.github.io/iSlider/demo/
もしあなたがこのプロジェクトが好きなら、またはこのプロジェクトがあなたを助けてくれると思います。ギthubに来てください。
モバイル端末とウェブの環境には多くの違いがあります。ユーザーの習慣や行動にも大きな違いがあります。また、モバイル端末のブラウザは、アプリケーションシーンとウェブ端末も大きく異なります。違いをまとめてみます。
  • モバイル端末のユーザの行動習慣の違い(モバイル端末の多くはタッチパネルとの相互作用に注目)
  • 移動端画面(移動画面はほとんどPC端より小さいので、同じ内容をより小さな画面に表示するために、コンテンツの滑りがユーザ操作習慣となっている)
  • モバイル端末のマルチデバイス性(ipad、iphone、android phone、android pad、およびこれらのデバイスのワイドスクリーン状態)
  • モバイルデバイスの更新のための代替速度、および標準的なサポートに対する携帯ブラウザメーカーのフォローアップ、ウェブkitコアのブラウザ
  • を含む。
    それではiSliderの出現は、どんな問題を解決しましたか?解決の根本的な問題は内容のスクリーン分け表示で、スライド操作で前のページの内容または次のページの内容を表します。iSliderは最も優雅な方法で解決し、メモリをできるだけ節約し、性能を向上させる。機能上のiSliderサポート:
  • の画像とdomの2種類のスライドは、画像のタイプは、読図タイプのapに適しています。domタイプは、必要に応じて様々なwebapp
  • に構成されています。
  • カスタムイベントのフィードバックは、スライド中に、スライドが終了したり、スライドが自分のイベントを結合し始めたりすることができます。
  • 配置可能なスライド動画は、高機能を獲得すると同時に、特殊な高級アニメーション効果を指定して、あなたのスライド効果を豊かにすることができます。
  • iSliderは画面の回転イベントを処理してくれます。画面が回転した後、domや画像がどのように表示されるかを考慮してください。
  • iSliderには、滑り境界の減少、自動滑り、垂直スライドなどの小さな機能があります。
  • iSliderを使うのもとても簡単です。あなたはdomノードを用意してあなたのsladerを保存するだけです。
    参照
    <div id=「canvas」>
    あなたが提示したいデータと、ここに展示されているデータは2つのタイプに分けられています。例えば、画像sladerを使って挙げます。準備が必要なのは写真のjsonデータだけです。データフォーマットは以下の通りです
    
    {
    	height: 475,
    	width: 400,
    	content: "../public/imgs/1.jpg",
    },{
    	height: 527,
    	width: 400,
    	content: "../public/imgs/2.jpg",
    },{
     	height: 400,
     	width: 512,
     	content: "../public/imgs/3.jpg",
    },{
    	height: 400,
    	width: 458,
    	content:"../public/imgs/5.jpg"
    }]
    
    そして呼び出しです
    
    new iSlider({
    	data: list,
    	dom: document.getElementById("canvas"),
    	isVertical: true,
    	isLooping: true,
    	isDebug: true,
    	isAutoplay: true,
    	animateType: '3d'
    });
    
    このように、iSliderの例を実行することができます。上記のいくつかのパラメータの意味については、公式サイトで見ることができます。
    http://be-fe.github.io/iSlider/
    iSliderの依存:iSliderは、任意のライブラリやフレームに依存していない、あなたは彼を簡単に自分のプロジェクトに使用することができますが、zepoやjqmobiと衝突しません。
    体積の大きさ:iSlider圧縮後コード2 kbは、あなたのプロジェクトで自由に包装できます。
    機能上:iSliderは携帯電話のハードウェアを使って加速しています。すべての動画はできるだけdomを再利用して、できるだけ多くのdomを使ってレンダリングを完成して、無限のスクロールをサポートしています。また、指の滑りもスムーズな体験になります。
    私たちのプロジェクトに注目してください。iSliderのプロジェクトアドレス
    https://github.com/BE-FE/iSlider
    転載は原文の出典を明記してください。
    http://qbaty.iteye.com/blog/2152674