pos機出現(xiàn)代碼h4,手機網(wǎng)站頂部滑動菜單欄

新聞資訊2 | 2023-05-26 09:52 | 投稿人：pos機之家

網(wǎng)上有很多關(guān)于pos機出現(xiàn)代碼h4,手機網(wǎng)站頂部滑動菜單欄的知識，也有很多人為大家解答關(guān)于pos機出現(xiàn)代碼h4的問題，今天pos機之家(m.afbey.com)為大家整理了關(guān)于這方面的知識，讓我們一起來看下吧!

本文目錄一覽：

1、pos機出現(xiàn)代碼h4

pos機出現(xiàn)代碼h4

現(xiàn)在是移動互聯(lián)網(wǎng)時代，我們也得跟上時代的潮流，傳統(tǒng)的pc網(wǎng)站慢慢轉(zhuǎn)型，開始轉(zhuǎn)成wap網(wǎng)站，并且pc的排版布局結(jié)構(gòu)也不在適用于手機上

例如最直觀的一個感受就是菜單，我們平時在使用網(wǎng)頁的時候，很明顯的感覺到這個網(wǎng)頁菜單變得不一樣，那么這一期給大家?guī)淼母韶浭琼敳坎藛位瑒有Ч?/p>

直接上代碼演示

<!DOCTYPE html>

<html>

<head>

<title>頂部菜單滑動效果分享</title>

<style>

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,form,input,p,th,td,table,textarea,select{margin:0;padding:0;}

h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}

th,em{font-style:normal;font-weight:normal;}

ol,ul{list-style:none;}

table{border-collapse:collapse;border-spacing:0;}

img,a img{border:0;}

body{font:12px \'Microsoft YaHei\',Arial;color:#666;background-color:#eee;}

.nav{width="360px",height="auto" />

.nav ul{position:absolute;left:0;top:0;width="360px",height="auto" />

.nav ul li{width="360px",height="auto" />

.nav a{color:#fff;width="360px",height="auto" />

</style>

</head>

<body>

<ul>

</ul>

</div>

// 這里需要初始化

window.Swipe = function(b, a) {

if (!b) {

return null

}

this.options = a || {};

this.index = this.options.startSlide || 0;//開始的導航頁的第幾屏

this.speed = this.options.speed || 300;//速度

this.lwidth="360px",height="auto" />

this.delay = this.options.auto || 0;//自動滾動menu速度0為不自動滾動

this.container = b;//在那個容器內(nèi)

this.element = this.container.children[0];//

this.setup();

if (this.delay != 0) {

this.begin();

}

if (this.element.addEventListener) {

this.element.addEventListener("touchstart", this, false);

this.element.addEventListener("touchmove", this, false);

this.element.addEventListener("touchend", this, false);

this.element.addEventListener("touchcancel", this, false);

this.element.addEventListener("webkitTransitionEnd", this, false);

this.element.addEventListener("msTransitionEnd", this, false);

this.element.addEventListener("oTransitionEnd", this, false);

this.element.addEventListener("transitionend", this, false);//監(jiān)聽過度動畫是否結(jié)束

window.addEventListener("resize", this, false)

}

};

Swipe.prototype = {

//設(shè)置其基本樣式

setup: function() {

this.slides = this.element.children;

this.width="360px",height="auto" />

if (!this.width="360px",height="auto" />

return null

}

this.element.style.width="360px",height="auto" />

var a = this.slides.length;

while (a--) {

var b = this.slides[a];

b.style.width="360px",height="auto" />

}

this.slide(this.index, 0);

slide: function(a, c) {

var b = this.element.style;

if (c == undefined) {

c = this.speed

}

//過度效果需要花費時間

b.webkitTransitionDuration = b.MozTransitionDuration = b.msTransitionDuration = b.OTransitionDuration = b.transitionDuration = c + "ms";

this.index = a

if(a * this.width="360px",height="auto" />

// b.MozTransform = b.webkitTransform = "translate3d(" + -((Math.ceil((this.slides.length*this.lwidth="360px",height="auto" />

// b.msTransform = b.OTransform = "translateX(" + -((Math.ceil((this.slides.length*this.lwidth="360px",height="auto" />

return false;

}

else{

b.MozTransform = b.webkitTransform = "translate3d(" + -(a * this.width="360px",height="auto" />

b.msTransform = b.OTransform = "translateX(" + -(a * this.width="360px",height="auto" />

}

getPos: function() {

return this.index

//前一個，

prev: function(a) {

this.delay = a || 0;

clearTimeout(this.interval);

// console.log(this.index);

if (this.index) {

this.slide(this.index - 1, this.speed)

//console.log( this.index);

} else {

this.slide(this.length - 1, this.speed)

}

//后一個

next: function(a) {

this.delay = a || 0;

clearTimeout(this.interval);

if (this.index < this.length - 1) {

this.slide(this.index + 1, this.speed)

} else {

this.slide(0, this.speed)

}

// 開始位置

begin: function() {

var a = this;

console.log(a);

this.interval = (this.delay) ? setTimeout(function() {

a.next(a.delay)

this.delay) : 0

// 停止

stop: function() {

this.delay = 0;

clearTimeout(this.interval)

resume: function() {

this.delay = this.options.auto || 0;

this.begin()

handleEvent: function(a) {

switch (a.type) {

case "touchstart":

this.onTouchStart(a);

break;

case "touchmove":

this.onTouchMove(a);

break;

case "touchcancel":

case "touchend":

this.onTouchEnd(a);

break;

case "webkitTransitionEnd":

case "msTransitionEnd":

case "oTransitionEnd":

this.transitionEnd(a);

break;

case "resize":

this.setup();

break

}

transitionEnd: function(a) {

if (this.delay) {

this.begin()

}

onTouchStart: function(a) {

this.start = {

pageX: a.touches[0].pageX,

pageY: a.touches[0].pageY,

time: Number(new Date())

};

// console.log(this.start)

this.isScrolling = undefined;

this.deltaX = 0;

this.element.style.MozTransitionDuration = this.element.style.webkitTransitionDuration = 0;

a.stopPropagation()

onTouchMove: function(a) {

if (a.touches.length > 1 || a.scale && a.scale !== 1) {

return

}

this.deltaX = a.touches[0].pageX - this.start.pageX;

if (typeof this.isScrolling == "undefined") {

//判斷是橫向還是樹向滑動

this.isScrolling = !!(this.isScrolling || Math.abs(this.deltaX) < Math.abs(a.touches[0].pageY - this.start.pageY))

}

if (!this.isScrolling) {

a.preventDefault();

clearTimeout(this.interval);

this.deltaX = this.deltaX / ((!this.index && this.deltaX > 0 || this.index == this.length - 1 && this.deltaX < 0) ? (Math.abs(this.deltaX) / this.width="360px",height="auto" />

this.element.style.MozTransform = this.element.style.webkitTransform = "translate3d(" + (this.deltaX - this.index * this.width="360px",height="auto" />

a.stopPropagation()

}

onTouchEnd: function(c) {

var b = Number(new Date()) - this.start.time < 250 && Math.abs(this.deltaX) > 20 || Math.abs(this.deltaX) > this.width="360px",height="auto" />

a = !this.index && this.deltaX > 0 || this.index == this.length - 1 && this.deltaX < 0;

if (!this.isScrolling) {

this.slide(this.index + (b && !a ? (this.deltaX < 0 ? 1: -1) : 0), this.speed)

}

c.stopPropagation()

}

};

//開始調(diào)用插件