H 5携帯端末スライド切替効果
13195 ワード
最近H 5のアニメーションを研究して、そこで简単に相応の携帯电话の端のタッチの切り替えの画面の効果を実现して、具体的なコードは以下の通りです:
最終的な効果:
実装コード:
最終的な効果:
実装コード:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta content="telephone=yes" name="format-detection" />
<meta name="apple-mobile-web-app-status-bar-style" content="white">
<meta name="x5-fullscreen" content="true">
<meta name="apple-touch-fullscreen" content="yes">
<title>H5 title>
<style>
* {margin: 0;padding: 0;}
#box{position:absolute;width:100%;height:100%;}
#box>div{position: absolute;height:100%;width:100%;background:#ccc;font-size:40px;color:#fff;line-height:100%;text-align: center;}
#box .content{transform:scale(0.5);opacity:0;transition:all 1s;}
#box .active{transform:scale(1);opacity:1;transition:all 1s;}
style>
head>
<body>
<div class="box" id="box">
<div class="content" style="background:green;">1div>
<div class="content" style="background:red;">2div>
<div class="content" style="background:blue;">3div>
<div class="content active" style="background:yellow;">4div>
div>
body>
html>
<script src="../Util/jquery-1.11.3.min.js">script>
<script>
(function(select){
//
var startX, moveX, movebox = document.querySelector(select);
//
function boxTouchStart(e) {
var touch = e.touches[0]; //
startX = touch.pageX; //
}
//
function boxTouchMove(e) {
var touch = e.touches[0];
moveX = touch.pageX - startX; //
}
//
function boxTouchEnd(e) {
moveDir = moveX < 0 ? true : false; // 0 ， 0
//
if (moveDir) {
var index = $(this).find("div.active").index();
// 1
if(index == 0){
$(this).find("div.active").removeClass("active");
$(this).children(":last").addClass("active");
}else{
var last = $(this).find("div.active");
last.removeClass("active").prev().addClass("active");
}
//
} else {
var index = $(this).find("div.active").index();
// 4
if(index == 3){
$(this).find("div.active").removeClass("active");
$(this).children(":first").addClass("active");
}else{
var last = $(this).find("div.active");
var _this = $(this);
last.removeClass("active").next().addClass("active");
}
}
}
//
movebox.addEventListener("touchstart", boxTouchStart, false);
movebox.addEventListener("touchmove", boxTouchMove, false);
movebox.addEventListener("touchend", boxTouchEnd, false);
})("#box")
script>