Мобильный терминал ПК совместим с IE 6.0+, FF 1,5+, Safari 2.0+, Opera 9.0+ Assist Assist, скользящий отскок
Фасадный режим
Кода -копия выглядит следующим образом:
window.onload = function () {
/*Тестовые данные*/
var insert = '';
для (var i = 0; i <80; i ++) {
INSERT + = '<div style = "width: 100%; Text-align: center;"> Spliting Test' + i + '</div>';
}
document.getElementbyId ("MovieA"). innerhtml = insert;
/*Тестовые данные*/
var at = new apptouch ({
Tcontain: 'Apperea', // требуется: идентификатор зоны скольжения
Tmove: 'Movearea', // требуется: идентификатор зоны перемещения
Tscroller: 'Scroller', // Требуется: Custom Scrollbar
Tscrollerarea: 'Scrollerarea' // Требуется: зона прокрутки
}, onmoveend);
// до вершины/нижнего обратного вызова
функция onmoveend (m) {
//console.log(m);
}
}
/*=================================================================== =======================================================================
* Имя: AppTouch
* Функция: компонент скользящего моделирования веб -приложения
* Параметры: связанные конфигурации
===========================*//
var apptouch = function (config, callback) {
this.touchcontain = config.tcontain;
this.touchmove = config.tmove;
this.touchscroller = config.tscroller;
this.touchscrollerarea = config.tscrollerarea;
this.callbackfn = обратный вызов;
this.move ();
}
apptouch.prototype = {
Переместить: function (e) {
var monitor = document.getElementById (this.touchContain), // Прослушивание.
target = document.getelementbyid (this.touchmove), // переместить цель
scroller = document.getElementByid (this.touchscroller), // Custom Scrollbar
scollerarea = document.getElementByid (this.touchscrollerarea), // область Scroller
sheuth = monitor.offsetheight /target.offsetheight * monitor.offsetheight, // настроить длину прокрутки
ST = (Target.OffSetheight - Monitor.Offsetheight) /(Monitor.Offsetheight - heutce), // Перемещение блока, соответствующего длине устройства роллера
tslow = 4, // до верхней/нижней части минус основание
tmove = 0, // слайдер до верхнего значения
tmovel = tmove + 140, // раскрывающийся диапазон разрешен в верхней части
bmove = monitor.offsetheight - target.offsetheight, // верхнее значение слайдера
Bmovel = bmove - 140, // абсолютно повышающий диапазон
callbackfn = this.callbackfn, // функция обратного вызова
flg = false, // скользит ли маркер
Starty, // отметить начальную позицию
Starttop, // отметить значение высоты в начале скольжения
MOVE = 0;
// Движение расстояние
// Регистрация событий мыши
addEvent (Monitor, 'Mousedown', Movestart);
addEvent (Monitor, «MouseMove», MoveIn);
AddEvent (Monitor, «MouseUp», Moveend);
addEvent (окно, «mouseMove», MoveIn);
addevent (window, 'mouseup', Moveend);
// Регистрация событий мобильного устройства
AddEvent (Monitor, 'TouchStart', MoveStart);
addEvent (монитор, «touchmove», MoveIn);
addEvent (монитор, «Touchend», Moveend);
/**
*Внешний вид/режим Farework. Упаковка
*/
/*Слушание событий*/
Функция 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 ();
// т.е.
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;
scollerarea.style.visibility = 'visible';
}
/*Во время движения*/
Функция перемещения (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? MOVE = 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';
scroller.style.top = -move / st + 'px';
// Инерционное медленное
var nowtime = new Date (). getTime ();
Stopinertiamove = true;
if (сейчас время - LastMovetime> 300) {
LastMovetime = сейчас время;
LastMovestart = E.Clienty;
}
}
}
/*Переместите конец*/
функция перемещать (e) {
остановка (e);
if (e.touches)
e = e.touches [0];
// Инерционное медленное
var contentTop = target.style.top.replace ('px', '');
var contenty = (parseint (contentTop) + e.clienty - lastmovestart);
var nowtime = new Date (). getTime ();
var v = (e.clienty - lastmovestart) / (сейчас время - LastMovetime);
// пальцы рушатся в последний период времени
Stopinertiamove = false;
(function (v, starttime, contenty) {
var dir = v> 0? -1: 1;
// направление ускорения
VAR Решение = DIR * 0,005;
Функция инициалиамвея () {
if (stopinertiamove)
возвращаться;
var nowtime = new Date (). getTime ();
var t = сейчас время - начало;
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';
scroller.style.top = tmove + 'px';
} else if (move <bmove) {
callbackfn ('тогда это');
target.style.top = bmove + 'px';
scroller.style.top = -bmove / st + 'px';
}
settimeout (function () {
if (! Stopinertiamove)
scollerarea.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";
scroller.style.top = -move / st + 'px';
settimeout (инерция, 10);
}
инициамве ();
}) (v, сейчас время, Contenty);
MOVE = 0;
flg = false;
}
// Операция заканчивается
/**
*Связанная инициализация
*/
// Инициализация длины полосы прокрутки
scroller.style.height = sheuett + 'px';
// инициализация заканчивается
},
Другое Interact: function () {
// другие функции расширяются
}
}
Т.е. взломать CSS
Кода -копия выглядит следующим образом:
тело, html {фоновое цветное:#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; ширина: 100%; Высота: 60px; Текст-альбом: Центр; размер шрифта: 18px; }
#bottominfo {position: Absolute; внизу: 0; ширина: 100%;}
#scrollerarea {position: Absolute; Справа: 0; Ширина: 1,5%; высота: 100%; видимость: скрыто;}
#scroller {position: Absolute; Верх: 0; Ширина: 100%; фоновый цвет: #AAA;}
#movearea {position: Absolute; Верх: 0px; Ширина: 100%; фоновый цвет: #ddd;}
HTML -код
Кода -копия выглядит следующим образом:
<! Doctype html>
<html>
<голова>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<meta name = "viewport" content = "width = width устройства, начальная масштаба = 1,0, пользовательский шкалевый = нет">
<link type = "text/css" href = "css/main.css" rel = "stylesheet">
<Title> скользящий отскок </title>
<!-[если я т.е. 9]> <! [endif]->
<noscript> </noscript>
</head>
<тело>
<div id = "sack">
<div id = "ventea">
<div id = "topinfo">
логотип или анимация
</div>
<div id = "BottomInfo">
Некоторые вводы 2014-4-28
</div>
<div id = "Movearea"> </div>
<div id = "scrollerarea">
<div id = "scroller"> </div>
</div>
</div>
</div>
<script src = "js/main.js"> </script>
</body>
</html>