PCモバイルターミナルは、IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+慣性アシスト、スライディングリバウンドと互換性があります
ファサードモード
コードコピーは次のとおりです。
window.onload = function(){
/*テストデータ*/
var insert = '';
for(var i = 0; i <80; i ++){
INSERT + = '<div style = "width:100%; text-align:center;">スライドテスト' + i + '</div>';
}
document.getElementById( "movearea")。innerhtml = insert;
/*テストデータ*/
var at = new AppTouch({
tcontain: 'Apparea'、//必須:スライディングエリアID
Tmove: 'Movearea'、//必須:領域IDを移動します
Tscroller: 'Scroller'、//必須:カスタムスクロールバー
Tscrolleraea:「Screollerarea」//必須:スクロールバーエリア
}、onmoveend);
//上部/下のコールバックへ
function onmoveend(m){
//console.log(m);
}
}
/*=============================================================================== ==============================================================================
*名前:AppTouch
*機能:Webアプリスライドシミュレーションコンポーネント
*パラメーター:関連する構成
==========================*/
var apptouch = function(config、callback){
this.touchcontain = config.tcontain;
this.touchmove = config.tmove;
this.touchscroller = config.tscroller;
this.touchscrollerArea = config.tscrollerArea;
this.callbackfn = callback;
this.move();
}
apptouch.prototype = {
移動:function(e){
var monitor = document.getElementById(this.touchcontain)、//聴取したコンテナ
ターゲット= document.getElementById(this.touchmove)、//ターゲットを移動します
screoller = document.getElementById(this.touchscroller)、//カスタムスクロールバー
ScreollerArea = document.getElementById(this.touchscrollerarea)、//スクロラー領域
sheight = monitor.offseetheight /target.offsetheigh * monitor.offseTheigh、// scrollbarの長さをカスタマイズする
st =(target.offseTheight -monitor.offsetheight) /(monitor.offsetheight -sheight)、//ローラーの単位長に対応する移動ブロック
tslow = 4、//上/下のマイナスベースへ
tmove = 0、//スライダーから最高値
tmovel = tmove + 140、//ドロップダウン範囲はトップになります
bmove = monitor.offseTheight -target.offseTheigh、//スライダーの最高値
bmovel = bmove -140、//絶対にアップスライディング範囲
callbackfn = this.callbackfn、// callback function
flg = false、//マーカーがスライドしているかどうか
Starty、//開始位置をマークします
starttop、//スライドの開始時に高さの値をマークします
移動= 0;
//移動距離
//マウスイベント登録
AddEvent(Monitor、 'Mousedown'、Movestart);
AddEvent(Monitor、 'mousemove'、movein);
AddEvent(Monitor、 'MouseUp'、MoveEnd);
AddEvent(window、 'mousemove'、movein);
addevent(window、 'mouseup'、moveend);
//モバイルデバイスタッチイベント登録
AddEvent(Monitor、 'TouchStart'、Movestart);
AddEvent(Monitor、 'touchmove'、movein);
AddEvent(Monitor、 'Touchend'、MoveEnd);
/**
*外観/運賃モードパッケージ
*/
/*イベントリスニング*/
関数addEvent(el、type、fn){
if(el.addeventlistener){
El.AddeventListener(Type、FN、False);
} else if(el.attachevent){
el.Attachevent( 'on' + type、fn);
} それ以外 {
el ['on' + type] = fn;
}
}
//ブラウザのデフォルト動作をキャンセルします
関数stop(e){
// Opera/Chrome/ff
if(e.preventdefault)
E.PreventDefault();
// IE
e.ReturnValue = false;
}
//パッケージは終了します
/**
*操作機能
*/
//慣性緩和パラメーター
var lastmovetime = 0;
var lastmovestart = 0;
var stopinertiamove = false;
/*モバイルトリガー*/
関数movestart(e){
停止(e);
flg = true;
if(e.touches)
E = E.Touches [0];
starty = e.clienty;
starttop = target.style.top || 0;
//慣性遅い
lastmovestart = starty;
lastMovetime = new date()。getTime();
stopinertiamove = true;
ScreollerArea.style.visibility = 'visible';
}
/*移動中*/
関数movein(e){
if(flg){
停止(e);
if(e.touches)
E = E.Touches [0];
move = e.clienty -starty + parseint(starttop);
if(move> tmove){
(move -tmove) / tslow + tmove> tmovel?移動= tmovel:move =(move -tmove) / tslow + tmove
} else if(move <bmove)
(move -bmove) / tslow + bmove <bmovel? move = bmovel:move =(move -bmove) / tslow + bmove;
Target.style.top = move + 'px';
screoller.style.top = -move / st + 'px';
//慣性遅い
var nowtime = new date()。getTime();
stopinertiamove = true;
if(nowtime -lastmovetime> 300){
lastmovetime = nowtime;
lastmovestart = e.clienty;
}
}
}
/*終了を移動*/
関数ムーブエンド(e){
停止(e);
if(e.touches)
E = E.Touches [0];
//慣性遅い
var contentStop = target.style.top.replace( 'px'、 '');
var centerny =(parseint(contenttop) + e.clienty -lastmovestart);
var nowtime = new date()。getTime();
var v =(e.clienty -lastmovestart) /(nowtime -lastmovetime);
//指は最後の期間に削減しています
stopinertiamove = false;
(function(v、starttime、contenty){
var dir = v> 0? -1:1;
//加速方向
var決定= dir * 0.005;
関数inertiamove(){
if(stopinertiamove)
戻る;
var nowtime = new date()。getTime();
var t = nowtime -starttime;
var nowv = v + t *減速;
var movey =(v + nowv)/ 2 * t;
//速度方向の変更は、速度が0に達したことを意味します
if(dir * nowv> 0){
if(move> tmove){
callbackfn( 'top');
Target.style.top = tmove + 'px';
screoller.style.top = tmove + 'px';
} else if(move <bmove){
callbackfn( 'then it');
Target.style.top = bmove + 'px';
screoller.style.top = -bmove / st + 'px';
}
setimeout(function(){
if(!stopinertiamove)
ScreollerArea.style.visibility = 'hidden';
}、4000);
戻る;
}
move = contenty + movey;
if(move> tmove){
t /= 20;
move =(move -tmove) / 10 + tmove;
} else if(move <bmove){
t /= 20;
move =(move -bmove) / 10 + bmove;
}
Target.style.top = move + "px";
screoller.style.top = -move / st + 'px';
Settimeout(Inertiamove、10);
}
inertiamove();
})(v、nowtime、contenty);
移動= 0;
flg = false;
}
//操作が終了します
/**
*関連する初期化
*/
//バーの長さの初期化をスクロールします
screoller.style.height = sheight + 'px';
//初期化は終了します
}、
その他のinteract:function(){
//他の機能が拡張されます
}
}
つまり、CSSをハックします
コードコピーは次のとおりです。
ボディ、html {background-color:#333;マージン:0;高さ:100%;ラインハイト:2.0;フォントファミリー:「Microsoft Yahei」; Overflow-y:hidden;}
#contain {margin:0 auto;位置:相対;幅:100%;最大幅:480px; _width:480px;高さ:100%;カーソル:ポインター!重要;}
#apparea {position:absolute;幅:100%;高さ:100%;オーバーフロー:隠し;バックグラウンドカラー:#fff;}
#topinfo {position:absolute; top:60px; width:100%;高さ:60px;テキストアライグ:センター;フォントサイズ:18px; }
#bottominfo {position:absolute; bottom:0; width:100%;}
#scrollerarea {position:absolute;右:0;幅:1.5%;高さ:100%;可視性:非表示;}
#scroller {position:absolute;上:0;幅:100%;バックグラウンドカラー:#aaa;}
#movearea {position:absolute;上:0px;幅:100%;バックグラウンドカラー:#ddd;}
HTMLコード
コードコピーは次のとおりです。
<!doctype html>
<html>
<head>
<Meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<Meta name = "Viewport" content = "width = device-width、initial-scale = 1.0、user-scalable = no">
<link type = "text/css" href = "css/main.css" rel = "styleSheet">
<title>スライドリバウンド</title>
<! - [if lt ie 9]> <![endif] - >
<noscript> </noscript>
</head>
<body>
<div id = "cantable">
<div id = "Apparea">
<div id = "topinfo">
ロゴまたはアニメーション
</div>
<div id = "bottominfo">
いくつかのImformation 2014-4-28
</div>
<div id = "movearea"> </div>
<div id = "ScreollerArea">
<div id = "scroller"> </div>
</div>
</div>
</div>
<スクリプトsrc = "js/main.js"> </script>
</body>
</html>