html5手機觸屏,html5移動端

html5上下滑動“翻頁”實現(xiàn)，是真正的翻頁

HTML5手機上下滑動翻頁特效是一款手機移動端觸屏滑動效果實現(xiàn)完整代碼如下：

創(chuàng)新互聯(lián)公司從2013年創(chuàng)立，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項目網(wǎng)站設(shè)計、成都網(wǎng)站建設(shè)網(wǎng)站策劃，項目實施與項目整合能力。我們以讓每一個夢想脫穎而出為使命，1280元芮城做網(wǎng)站,已為上家服務(wù),為芮城各地企業(yè)和個人服務(wù),聯(lián)系電話:18980820575

1、html5頁面代碼

!DOCTYPE html

htmlheadmeta http-equiv="Content-Type" content="text/html; charset=UTF-8"

titleHTML5手機頁面觸屏滑動上下翻頁特效/title

meta charset="utf-8"

meta name="apple-touch-fullscreen" content="YES"

meta name="format-detection" content="telephone=no"

meta name="apple-mobile-web-app-capable" content="yes"

meta name="apple-mobile-web-app-status-bar-style" content="black"

meta http-equiv="Expires" content="-1"

meta http-equiv="pragram" content="no-cache"

link rel="stylesheet" type="text/css" href="./hamer_files/main.css"

link rel="stylesheet" type="text/css" href="./hamer_files/endpic.css"

script type="text/javascript" src="./hamer_files/offline.js"/script

meta name="viewport" content="width=640, user-scalable=no, target-densitydpi=device-dpi"

/head

body class="s-bg-ddd pc no-3d perspective yes-3d" style="-webkit-user-select: none;"

section class="u-alert"

? img style="display:none;" src="./hamer_files/loading_large.gif"

? div class="alert-loading z-move"

? ? ? div class="cycleWrap" span class="cycle cycle-1"/span

? ? ? ? ? span class="cycle cycle-2"/spanspan class="cycle cycle-3"/spanspan class="cycle cycle-4"/span

? ? ? /div

? ? ? div class="lineWrap" span class="line line-1"/spanspan class="line line-2"/spanspan class="line line-3"/span

? ? ? /div

? /div

/section

section class="u-arrow"

? p class="css_sprite01"/p

/section

section class="p-ct transformNode-2d transformNode-3d" style="height: 918px;"

? div class="translate-back" style="height: 918px;"

? ? ? div class="m-page m-fengye" data-page-type="info_pic3" data-statics="info_pic3" style="height: 918px;"

? ? ? ? ? div class="page-con lazy-finish" data-position="50% 50%" data-size="cover" style="height: 920px; background-image: url(hamer_files/1.jpg); background-size: cover; background-position: 50% 50%;"/div

? ? ? /div

? ? ? div class="m-page m-bigTxt f-hide" data-page-type="bigTxt" data-statics="info_list" style="height: 918px;"

? ? ? ? ? div class="page-con j-txtWrap lazy-finish" data-position="50% 50%" data-size="cover" style="background-image: url(hamer_files/2.jpg); background-size: cover; background-position: 50% 50%;"/div

? ? ? /div

? ? ? div class="m-page m-bigTxt f-hide" data-page-type="bigTxt" data-statics="info_list" style="height: 918px;"

? ? ? ? ? div class="page-con j-txtWrap lazy-finish" data-position="50% 50%" data-size="cover" style="background-image: url(hamer_files/3.jpg); background-size: cover; background-position: 50% 50%;"/div

? ? ? /div

? ? ? div class="m-page m-bigTxt f-hide" data-page-type="bigTxt" data-statics="info_list" style="height: 918px;"

? ? ? ? ? div class="page-con j-txtWrap lazy-finish" data-position="50% 50%" data-size="cover" style="background-image: url(hamer_files/4.jpg); background-size: cover; background-position: 50% 50%;"/div

? ? ? /div

? ? ? div class="m-page m-bigTxt f-hide" data-page-type="bigTxt" data-statics="info_list" style="height: 918px;"

? ? ? ? ? div class="page-con j-txtWrap lazy-finish" data-position="50% 50%" data-size="cover" style="background-image: url(hamer_files/5.jpg); background-size: cover; background-position: 50% 50%;"/div

? ? ? /div

? ? ? div class="m-page m-bigTxt f-hide" data-page-type="bigTxt" data-statics="info_list" style="height: 918px;"

? ? ? ? ? div class="page-con j-txtWrap lazy-finish" data-position="50% 50%" data-size="cover" style="background-image: url(hamer_files/6.jpg); background-size: cover; background-position: 50% 50%;"/div

? ? ? /div

? ? ? div class="m-page m-bigTxt f-hide" data-page-type="bigTxt" data-statics="info_list" style="height: 918px;"

? ? ? ? ? div class="page-con j-txtWrap lazy-finish" data-position="50% 50%" data-size="cover" style="background-image: url(hamer_files/7.jpg); background-size: cover; background-position: 50% 50%;"/div

? ? ? /div

? ? ? div class="m-page m-bigTxt f-hide" data-page-type="bigTxt" data-statics="info_list" style="height: 918px;"

? ? ? ? ? div class="page-con j-txtWrap lazy-finish" data-position="50% 50%" data-size="cover" style="background-image: url(hamer_files/8.jpg); background-size: cover; background-position: 50% 50%;"/div

? ? ? /div

? /div

/section

section class="u-pageLoading"

? img src="./hamer_files/load.gif" alt="loading"

/section

script src="./hamer_files/init.mix.js" type="text/javascript" charset="utf-8"/script

script src="./hamer_files/coffee.js" type="text/javascript" charset="utf-8"/script

script src="./hamer_files/99_main.js" type="text/javascript" charset="utf-8"/script

/body/html

2、css代碼：

@charset "utf-8";

.ad_foot li { margin:0 auto 1em; font-size:1.8em; padding:15px; background:#FFF;}

.ad_foot li a {display:block;}

.ad_foot li .l {width:75px; height:75px; float:left; overflow:hidden;}

.ad_foot li .l img {width:75px; width:75px;}

.ad_foot li .r {width:78%; float:left; margin-left:30px; color:#666; overflow:hidden;}

.ad_foot li .r p {color:#999; font-size:1.2em; }

.ad_foot li .r span {font-size:0.8em;}

.ad_foot li .r i {font-style:normal;}

.lazy-img, .lazy-finish{background-color:#f0eded;}

.page-list{font-size:20px;font-family: "Microsoft yahei";padding-left:17px;padding-top:30px;height:35px;border-bottom:1px solid #b5b5b5;display:none;}

.ad_foot{padding:15px 15px 0 15px;}

/*聲音播放按鈕*/

#song_img {width:293px; height:41px; display:block; position:absolute; right:4.1em; top:1.6em; font-size:1.7em; text-align:center; line-height:41px; color:#FFF; background:url(../img/music_c3.png) no-repeat 0 0;}

/*底部推薦*/

.ad_list{margin-top:2em;}.ad_list li {width:46%; background:none; padding:0; float:left;margin-bottom: 1em;}

.ad_list li.r {float:right;}.ad_list li a img {width:100%; height:auto;}

.ad_foot h3 {width:100%; height:48px; line-height:48px; background:#F9F5EC;}

.ad_foot h3 a {display:inline-block; color:#444; width:50%; text-align:center; font-size:1.5em; height:48px; border-bottom:2px solid #FF9240;}

.ad_foot h3 a.active {color:#FFF; background:#FF9240;}

.magazine_1 li {

width:100%;

margin-bottom: 1em;

font-size: 1.8em;

padding: 15px;

background: #FFF;}

.magazine_1 li a {display:block;}

.magazine_1 li .l {width: 75px;

height: 75px;

float: left;

overflow: hidden;}

.magazine_1 li .l img {width:75px; height:75px;}

.magazine_1 li .r {width: 78%;

float: left;

margin-left: 30px;

color: #666;

overflow: hidden;}

.magazine_1 li .r p {

color: #999;

font-size: 1.2em;

.magazine_1 li .r span {font-size:0.8em;}

.ad_foot li .r i {font-style:normal;}

3、運行效果如下：

html5 拖動效果怎么在手機上實現(xiàn)

html5 拖動效果在手機上實現(xiàn)方法是調(diào)用drag和drop一系列函數(shù)實現(xiàn)的。

注意：拖拽源在拖拽操作結(jié)束將得到dragend事件對象，不管操作成功與否。

舉例：

定義可拖放內(nèi)容

div id="columns"

div class="column" draggable="true"headerA/header/div

div class="column" draggable="true"headerB/header/div

div class="column" draggable="true"headerC/header/div

/div

2、監(jiān)聽拖動事件

可附加大量不同事件以監(jiān)聽整個拖放過程：

dragstart

drag

dragenter

dragleave

dragover

drop

dragend

a.這里是開始拖拽

function handleDragStart(e) {

this.style.opacity = '0.4'; ?// this / e.target is the source node.

}

var cols = document.querySelectorAll('#columns .column');

[].forEach.call(cols, function(col) {

col.addEventListener('dragstart', handleDragStart, false);

});

b.dragenter、dragover?和?dragleave?事件處理程序可用于在拖動過程中提供額外的可視化提示。例如，在拖動期間將鼠標(biāo)懸停在某一列上方時，其邊框可能會變成虛線。這樣，用戶就能知道這些列也是放置的目標(biāo)區(qū)域。

html5的開發(fā) 關(guān)于觸屏

ontouchstart

ontouchmove

ontouchend

ontouchcancel

移動平臺的四個觸摸事件

因此他們的順序是需要注意的：touchstart → mouseover → mousemove → mousedown → mouseup → click1

/**

* onTouchEvent

*/

var div = document.getElementById("div");

//touchstart類似mousedown

div.ontouchstart = function(e){

//事件的touches屬性是一個數(shù)組，其中一個元素代表同一時刻的一個觸控點，從而可以通過touches獲取多點觸控的每個觸控點

//由于我們只有一點觸控，所以直接指向[0]

var touch = e.touches[0];

//獲取當(dāng)前觸控點的坐標(biāo)，等同于MouseEvent事件的clientX/clientY

var x = touch.clientX;

var y = touch.clientY;

};

//touchmove類似mousemove

div.ontouchmove = function(e){

//可為touchstart、touchmove事件加上preventDefault從而阻止觸摸時瀏覽器的縮放、滾動條滾動等

e.preventDefault();

};

//touchend類似mouseup

div.ontouchup = function(e){

//nothing to do

};

WAP網(wǎng)站，3G網(wǎng)站，html5觸屏版有什么區(qū)別？

1、手機網(wǎng)站一般又稱作WAP網(wǎng)站 , 而傳統(tǒng)網(wǎng)站又稱作Web網(wǎng)站，WAP網(wǎng)站可分為WAP1.X和WAP2.0網(wǎng)站。WAP1.X功能簡單、界面粗糙,而WAP2.0的手機網(wǎng)站功能和界面都與Web網(wǎng)站相接近。WAP2.0的手機網(wǎng)站可以在電腦上直接用瀏覽器訪問，而WAP1.X的網(wǎng)站，需要模擬器或者給瀏覽器安裝相應(yīng)的插件方可。

2、3G網(wǎng)站是手機網(wǎng)站領(lǐng)域為迎合3G的推廣而創(chuàng)造的概念，3G網(wǎng)站就是手機WAP網(wǎng)站。3G網(wǎng)站采用wap2.0編寫，支持一些xhtml和CSS。

3、html5觸屏版主要針對高端智能手機，可以給用戶呈現(xiàn)華麗的網(wǎng)頁視覺效果。HTML5觸屏版采用最新的技術(shù)HTML5編寫，屬于智能機時代產(chǎn)物，因為智能手機的性能已經(jīng)很強大了，可以直接加載html。

WAP網(wǎng)站，3G網(wǎng)站，html5觸屏版有什么區(qū)別

wap網(wǎng)站：通常所說的wap網(wǎng)站就是指的移動端網(wǎng)站，就是手機端網(wǎng)站的意思。

3G網(wǎng)站：3G是頻段，3G網(wǎng)站這種說法應(yīng)該不太恰當(dāng)，可以理解為wap網(wǎng)站的另一種叫法。

HTML5觸屏版：HTML5是下一代HTML（超文本編輯語言），主要用于制作比現(xiàn)在網(wǎng)頁更加方便好看的效果。目前主要應(yīng)用于移動端，未來flash將有可能被HTML5所替代。

這三者的區(qū)別是 WAP網(wǎng)站就是移動端網(wǎng)站，3G網(wǎng)站說法不恰當(dāng)，可以理解為就是移動端網(wǎng)站，HTML5是移動端網(wǎng)站開發(fā)的一種方式，屬于WAP網(wǎng)站當(dāng)中的一種。

當(dāng)前標(biāo)題：html5手機觸屏,html5移動端
文章起源：http://muchs.cn/article42/phedec.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供虛擬主機、建站公司、靜態(tài)網(wǎng)站、網(wǎng)站排名、服務(wù)器托管、自適應(yīng)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)