黄聡:携帯電話のモバイル端末の建設ステーションJquery+CSS 3+HTML 5タッチスクリーンのスライド特効プラグイン、タッチスクリーンの焦点図、画像の輪展図を実現する

前言
TouchSlideはSuperSlideの携帯電話の簡略化版と言えるが、1、TouchSlideは純javascriptで開発され、jsライブラリに依存しない点が異なる.これに鑑みて、TouchSlideの呼び出し方法はSuperSlideとは少し異なる.呼び出し方法は、TouchSlide({slideCell:"#slider",effect:"leftLoop"});(slideCellはidオブジェクトでなければなりません);同様に、SuperSlideの呼び出し方法は、jQuery("#slider")である.slide({ effect:"leftLoop"});2、使いやすいように、jsで簡単なjQueryセレクタをシミュレートしました.「#」しかサポートしていません.「ラベル名」は、スペースで区切られています.slideCellはidセレクタを使用する必要があるほか、titCell:「.title li」3、上記2つの違い以外は一致しており、demo研究をダウンロードできることをもっと知りたい.
1.TouchSlide.js
具体的なパスは自分で設定します.
 
1
2
3
4< head >      < script type = "text/javascript" src = "../TouchSlide.1.0.js" ></ script > </ head >2、HTMLを書く
以下はデフォルトのHTMl構造で、それぞれ「.hd」にはulが含まれ、「.bd」にはulが含まれています.
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24< div id = "leftTabBox" class = "tabBox" >      < div class = "hd" >          < ul >              < li > </ li >              < li > </ li >              < li > </ li >          </ ul >      </ div >      < div class = "bd" >              < ul >                  < li >< a href = "#" > H7N9 </ a ></ li >                  ...              </ ul >              < ul >                  < li >< a href = "#" > : </ a ></ li >                  ...              </ ul >              < ul >                  < li >< a href = "#" > GDP </ a ></ li >                  ...              </ ul >      </ div > </ div >3、CSSを作成し、HTMLにサンプルを与える
今ではほとんどの携帯ブラウザがhtml 5をサポートしているので、あなたのcss互換chromeは大きな問題はありません.
 
1
2
3
4
5
6
7.tabBox .hd{ height : 40px ; line-height : 40px ; padding : 0 10px ; font-size : 20px ; background : #f4f4f4 ; border-bottom : 1px solid #F5AB38 ; position : relative ;  } .tabBox .hd ul{ position : absolute ; height : 41px ; top : 0 ; overflow : hidden ;  } .tabBox .hd ul li{ float : left ; padding : 0 10px ; color : #666 ;  } .tabBox .hd ul .on{ border : 2px solid #F5AB38 ; border-bottom-color : #fff ; background : #fff ; color : #CF7F21 ;   } .tabBox .bd ul{ padding : 10px 0 10px 10px ;  } .tabBox .bd li{ height : 33px ; line-height : 33px ;   } .tabBox .bd li a{ color : #666 ;  }4、TouchSlideを呼び出す
この例では、「.tabBox」divが終了したらすぐにTouchSlideを呼び出すと、ページ全体がロードされてからTouchSlideが呼び出されないように最善の効果が得られます.デフォルトHTML構造なので、パラメータはすべてデフォルト値で、titCell、mainCellなどは記入しません.
 
公式サイト:http://www.superslide2.com/