تتوافق محطة PC Mobile Terminal مع IE 6.0+ ، FF 1.5+ ، Safari 2.0+ ، Opera 9.0+ Hostia Assist ، Rebound Rebound
وضع الواجهة
نسخة الكود كما يلي:
window.onload = function () {
/*اختبار بيانات*/
var insert = '' ؛
لـ (var i = 0 ؛ i <80 ؛ i ++) {
insert + = '<div style = "width: 100 ٪ ؛ text-align: center ؛"> sliding test' + i + '</viv>' ؛
}
document.getElementById ("movearea"). innerhtml = insert ؛
/*اختبار بيانات*/
var at = new AppTouch ({
tcontain: 'Adder' ، // مطلوب: معرف منطقة الانزلاق
tmove: 'movearea' ، // مطلوب: معرف نقل المنطقة
tscroller: 'Scroller' ، // مطلوب: شريط التمرير المخصص
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 = {
Move: Function (e) {
var monitor = document.getElementById (this.touchContain) ، // bistenergy container
target = document.getElementById (this.touchMove) ، // حرك الهدف
scroller = document.getElementById (this.touchScroller) ، // custom scrollbar
scrollerarea = document.getElementById (this.touchScrollerarea) ، // Scroller Area
snight = monitor.offsetheight /target.offsetheight * monitor.offsetheight ، // تخصيص طول شريط التمرير
st = (target.offsetheight - monitor.offsetheight) /(monitor.offsetheight - snight) ، // حرك الكتلة المقابلة لطول الوحدة في الأسطوانة
tslow = 4 ، // إلى قاعدة ناقص أعلى/أسفل
tmove = 0 ، // شريط التمرير إلى أعلى القيمة
tmovel = tmove + 140 ، // يُسمح للمدى المنسد
bmove = monitor.offsetheight - target.offsetheight ، // القيمة العليا للمنزلق
Bmovel = Bmove - 140 ، // نطاق الانزلاق تمامًا
callbackfn = this.callbackfn ، // وظيفة رد الاتصال
flg = false ، // ما إذا كانت العلامة تنزلق
Starty ، // وضع علامة على وضع البداية
StartTop ، // حدد قيمة الارتفاع في بداية الانزلاق
نقل = 0 ؛
// مسافة الحركة
// تسجيل الحدث الماوس
addevent (شاشة ، 'mousedown' ، movestart) ؛
addevent (شاشة ، 'mousemove' ، movein) ؛
addevent (شاشة ، 'mouseup' ، moveend) ؛
addevent (نافذة ، 'mousemove' ، movein) ؛
addevent (نافذة ، 'mouseup' ، moveend) ؛
// تسجيل حدث لمسة الجهاز المحمول
addevent (شاشة ، 'touchstart' ، movestart) ؛
addevent (شاشة ، 'touchmove' ، movein) ؛
addevent (شاشة ، "اللمس" ، التحرك) ؛
/**
*المظهر/وضع التغليف
*/
/*الاستماع الحدث*/
وظيفة addevent (el ، type ، fn) {
if (el.addeventListener) {
el.addeventListener (النوع ، fn ، false) ؛
} آخر إذا (el.attachevent) {
el.attachevent ('on' + type ، fn) ؛
} آخر {
el ['on' + type] = fn ؛
}
}
// إلغاء السلوك الافتراضي للمتصفح
وظيفة توقف (هـ) {
// Opera/Chrome/FF
إذا (E.PreventDefault)
E.PreventDefault () ؛
//أي
e.ReturnValue = false ؛
}
// تنتهي العبوة
/**
*وظيفة التشغيل
*/
// معلمات التخفيف بالقصور الذاتي
var lastMovetime = 0 ؛
var mastmovestart = 0 ؛
var stopinertiamove = false ؛
/*الزناد المحمول*/
وظيفة movestart (e) {
توقف (هـ) ؛
flg = صحيح ؛
إذا (E.Touches)
E = E.Touches [0] ؛
starty = e.clienty ؛
startTop = target.style.top || 0 ؛
// بطيئة بالقصور الذاتي
MastMovestart = Starty ؛
MastMovetime = New Date (). getTime () ؛
stopInertiamove = صحيح ؛
scrollerarea.style.vibility = 'visible' ؛
}
/*أثناء الحركة*/
وظيفة movein (e) {
إذا (flg) {
توقف (هـ) ؛
إذا (E.Touches)
E = E.Touches [0] ؛
نقل = e.clienty - starty + parseint (startTop) ؛
إذا (نقل> tmove) {
(نقل - tmove) / tslow + tmove> tmovel؟ نقل = tmovel: نقل = (نقل - tmove) / tslow + tmove
} آخر إذا (تحرك <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 = صحيح ؛
if (nowtime - lastMovetime> 300) {
LastMovEtime = NowTime ؛
MastMovestart = e.clienty ؛
}
}
}
/*تحرك النهاية*/
وظيفة Moveend (e) {
توقف (هـ) ؛
إذا (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) / (nowtime - lastMovetime) ؛
// الأصابع تخفض في الفترة الأخيرة من الزمن
stopInertiamove = false ؛
(الوظيفة (V ، وقت البدء ، المحتوى) {
var dir = v> 0؟ -1: 1 ؛
// اتجاه التسارع
قرار var = dir * 0.005 ؛
وظيفة inertiamove () {
إذا (stopInertiamove)
يعود؛
var nowtime = new date (). getTime () ؛
var t = nowtime - وقت البدء ؛
var nowv = v + t * تباطؤ ؛
var movey = (v + nowv)/ 2 * t ؛
// التغيير في اتجاه السرعة يعني أن السرعة قد وصلت إلى 0
if (dir * nowv> 0) {
إذا (نقل> tmove) {
callbackfn ('top') ؛
target.style.top = tmove + 'px' ؛
scroller.style.top = tmove + 'px' ؛
} آخر إذا (تحرك <bmove) {
callbackfn ('ثم it') ؛
target.style.top = bmove + 'px' ؛
scroller.style.top = -bmove / st + 'px' ؛
}
setTimeout (function () {
إذا (! stopinertiamove)
scrollerarea.style.vibility = 'Hidden' ؛
} ، 4000) ؛
يعود؛
}
نقل = contenty + movey ؛
إذا (نقل> tmove) {
T /= 20 ؛
نقل = (نقل - tmove) / 10 + tmove ؛
} آخر إذا (تحرك <bmove) {
T /= 20 ؛
نقل = (Move - Bmove) / 10 + bmove ؛
}
target.style.top = move + "px" ؛
scroller.style.top = -move / st + 'px' ؛
setTimeout (inertiamove ، 10) ؛
}
inertiamove () ؛
}) (v ، nowtime ، contenty) ؛
نقل = 0 ؛
flg = false ؛
}
// تنتهي العملية
/**
*التهيئة ذات الصلة
*/
// تهيئة طول شريط التمرير
scroller.style.height = sneight + 'px' ؛
// تنتهي التهيئة
} ،
OtherInteract: function () {
// يتم توسيع وظائف أخرى
}
}
أي اختراق CSS
نسخة الكود كما يلي:
الجسم ، html {background-color:#333 ؛ الهامش: 0 ؛ الارتفاع: 100 ٪ خط الارتفاع: 2.0 ؛ Font-Family: 'Microsoft Yahei' ؛ فائض y: مخفي ؛}
#contain {margin: 0 auto ؛ الموقف: قريب العرض: 100 ٪ ؛ Max-Width: 480px ؛ _width: 480px ؛ الارتفاع: 100 ٪ المؤشر: مؤشر! مهم ؛}
#apparea {الموضع: absolute ؛ العرض: 100 ٪ ؛ الارتفاع: 100 ٪ الفائض: مخفي. لون الخلفية: #fff ؛}
#topinfo {الموضع: Absolute ؛ Top: 60px ؛ العرض: 100 ٪ ؛ الارتفاع: 60px ؛ محاذاة النص: المركز ؛ حجم الخط: 18 بكسل ؛ }
#bottominfo {الموضع: مطلق ؛ القاع: 0 ؛ العرض: 100 ٪ ؛}
#scrollerarea {الموضع: absolute ؛ اليمين: 0 ؛ العرض: 1.5 ٪ ؛ الارتفاع: 100 ٪ الرؤية: مخفية ؛}
#scroller {الموضع: absolute ؛ أعلى: 0 ؛ العرض: 100 ٪ ؛ لون الخلفية: #AAA ؛}
#movearea {الموضع: 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 = width device ، scale الأولي = 1.0 ، قابلة للعلاج المستخدم = لا">
<link type = "text/css" href = "css/main.css" rel = "STYLESHEET">
<title> انزلاق الارتداد </title>
<!-[إذا lt ie 9]> <! [endif]->
<Noscript> </script>
</head>
<body>
<div id = "invent">
<div id = "deade">
<div id = "topinfo">
شعار أو الرسوم المتحركة
</div>
<div id = "bottominfo">
بعض المعلومات 2014-4-28
</div>
<div id = "movearea"> </viv>
<div id = "scrollerarea">
<div id = "scroller"> </viv>
</div>
</div>
</div>
<script src = "js/main.js"> </script>
</body>
</html>