建站
咨詢
售后
建站咨詢
新聞中心
html5上下滑動(dòng)“翻頁(yè)”實(shí)現(xiàn)，是真正的翻頁(yè)
HTML5手機(jī)上下滑動(dòng)翻頁(yè)特效是一款手機(jī)移動(dòng)端觸屏滑動(dòng)效果實(shí)現(xiàn)完整代碼如下：
成都創(chuàng)新互聯(lián)是專業(yè)的清豐網(wǎng)站建設(shè)公司，清豐接單;提供網(wǎng)站建設(shè)、做網(wǎng)站,網(wǎng)頁(yè)設(shè)計(jì),網(wǎng)站設(shè)計(jì),建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行清豐網(wǎng)站開(kāi)發(fā)網(wǎng)頁(yè)制作和功能擴(kuò)展;專業(yè)做搜索引擎喜愛(ài)的網(wǎng)站,專業(yè)的做網(wǎng)站團(tuán)隊(duì),希望更多企業(yè)前來(lái)合作!
1、html5頁(yè)面代碼
!DOCTYPE html
htmlheadmeta http-equiv="Content-Type" content="text/html; charset=UTF-8"
titleHTML5手機(jī)頁(yè)面觸屏滑動(dòng)上下翻頁(yè)特效/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、運(yùn)行效果如下：
html5頁(yè)面左右滑動(dòng)是怎么實(shí)現(xiàn)的？
左右滑動(dòng)是由觸摸事件定義的，觸摸事件(touch)會(huì)在用戶手指放在屏幕上面的時(shí)候、在屏幕上滑動(dòng)的時(shí)候或者是從屏幕上移開(kāi)的時(shí)候觸發(fā)。下面具體說(shuō)明：
touchstart事件：當(dāng)手指觸摸屏幕時(shí)候觸發(fā)，即使已經(jīng)有一個(gè)手指放在屏幕上也會(huì)觸發(fā)。
touchmove事件：當(dāng)手指在屏幕上滑動(dòng)的時(shí)候連續(xù)地觸發(fā)。在這個(gè)事件發(fā)生期間，調(diào)用preventDefault()事件可以阻止?jié)L動(dòng)。
touchend事件：當(dāng)手指從屏幕上離開(kāi)的時(shí)候觸發(fā)。
touchcancel事件：當(dāng)系統(tǒng)停止跟蹤觸摸的時(shí)候觸發(fā)。關(guān)于這個(gè)事件的確切出發(fā)時(shí)間，文檔中并沒(méi)有具體說(shuō)明，咱們只能去猜測(cè)了。
上面的這些事件都會(huì)冒泡，也都可以取消。雖然這些觸摸事件沒(méi)有在DOM規(guī)范中定義，但是它們卻是以兼容DOM的方式實(shí)現(xiàn)的。所以，每個(gè)觸摸事件的event對(duì)象都提供了在鼠標(biāo)實(shí)踐中常見(jiàn)的屬性：bubbles(起泡事件的類型)、cancelable(是否用 preventDefault() 方法可以取消與事件關(guān)聯(lián)的默認(rèn)動(dòng)作)、clientX(返回當(dāng)事件被觸發(fā)時(shí)，鼠標(biāo)指針的水平坐標(biāo))、clientY(返回當(dāng)事件觸發(fā)時(shí)，鼠標(biāo)指針的垂直坐標(biāo))、screenX(當(dāng)某個(gè)事件被觸發(fā)時(shí)，鼠標(biāo)指針的水平坐標(biāo))和screenY(返回當(dāng)某個(gè)事件被觸發(fā)時(shí)，鼠標(biāo)指針的垂直坐標(biāo))。除了常見(jiàn)的DOM屬性，觸摸事件還包含下面三個(gè)用于跟蹤觸摸的屬性。
touches：表示當(dāng)前跟蹤的觸摸操作的touch對(duì)象的數(shù)組。
targetTouches：特定于事件目標(biāo)的Touch對(duì)象的數(shù)組。
changeTouches：表示自上次觸摸以來(lái)發(fā)生了什么改變的Touch對(duì)象的數(shù)組。
每個(gè)Touch對(duì)象包含的屬性如下。
clientX：觸摸目標(biāo)在視口中的x坐標(biāo)。
clientY：觸摸目標(biāo)在視口中的y坐標(biāo)。
identifier：標(biāo)識(shí)觸摸的唯一ID。
pageX：觸摸目標(biāo)在頁(yè)面中的x坐標(biāo)。
pageY：觸摸目標(biāo)在頁(yè)面中的y坐標(biāo)。
screenX：觸摸目標(biāo)在屏幕中的x坐標(biāo)。
screenY：觸摸目標(biāo)在屏幕中的y坐標(biāo)。
target：觸目的DOM節(jié)點(diǎn)目標(biāo)。
舉個(gè)例子-JavaScript代碼：
function?load?(){
document.addEventListener('touchstart',touch,?false);
document.addEventListener('touchmove',touch,?false);
document.addEventListener('touchend',touch,?false);
function?touch?(event){
var?event?=?event?||?window.event;
var?oInp?=?document.getElementById("inp");
switch(event.type){
case?"touchstart":
oInp.innerHTML?=?"Touch?started?("?+?event.touches[0].clientX?+?","?+?event.touches[0].clientY?+?")";
break;
case?"touchend":
oInp.innerHTML?=?"brTouch?end?("?+?event.changedTouches[0].clientX?+?","?+?event.changedTouches[0].clientY?+?")";
break;
case?"touchmove":
event.preventDefault();
oInp.innerHTML?=?"brTouch?moved?("?+?event.touches[0].clientX?+?","?+?event.touches[0].clientY?+?")";
break;
}
}
}
window.addEventListener('load',load,?false);
HTML代碼：
div?id="inp"/div
上面的小例子當(dāng)touchstart事件觸發(fā)的時(shí)候，會(huì)將觸摸的位置更新到div標(biāo)簽中。當(dāng)touchmove事件觸發(fā)的時(shí)候，會(huì)默認(rèn)行為的滾動(dòng)
(觸摸移動(dòng)的默認(rèn)行為是滾動(dòng)頁(yè)面)，然后觸摸操作的變化信息更新到div標(biāo)簽中。而touchend事件會(huì)輸出有關(guān)觸摸操作的最終信息。注意，在
touchend事件觸發(fā)的時(shí)候，touches集合中就沒(méi)有任何Touch對(duì)象了，因?yàn)椴淮嬖诨顒?dòng)的觸摸操作。
這些事件會(huì)在文檔的所有元素上面觸發(fā)，因而可以分別操作頁(yè)面的不同部分。在觸摸屏幕上的元素，這些事件(包括鼠標(biāo)事件)發(fā)生的順序如下：
(1)touchstart
(2)mouseover
(3)mousemove(一次)
(4)mousedown
(5)mouseup
(6)click
(7)touchend
html5 手機(jī)端怎么優(yōu)化頁(yè)面滑動(dòng)
1、如果是div設(shè)置了滾動(dòng)條導(dǎo)致滑動(dòng)不順暢，可以在css中加入-webkit-overflow-scrolling : touch;
2、如果是幻燈片，可以用swiper插件一類的。
3、盡量用css3開(kāi)啟GPU加速（css隨便哪里加個(gè){transform:transition3d(0,0,0);}），用transform:translate(x,y)代替mairgin或者top。
4、減少滑動(dòng)過(guò)程中的運(yùn)動(dòng)DOM。
文章題目：html5頁(yè)面滑動(dòng),html5固定頁(yè)面滾動(dòng)
鏈接地址：http://www.ef60e0e.cn/article/dsddepj.html
