HTML 5+オリジナルjavascriptモバイル端末スライドbanner効果demo
13120 ワード
<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>Documenttitle>
<style>
*{margin:0;padding:0;}
.box{
height:200px;
width:100%;
overflow: hidden;
}
.movebox{
height:200px;
width:9000px;
padding:0;
position:relative;
left:0;
}
.movebox li{
height:200px;
float:left;
list-style:none;
font-size:30px;
color:#fff;
}
style>
<script>
window.onload = function(){
var moveX, //
endX, // X
cout = 0, //
moveDir; //
var movebox = document.querySelector(".movebox"); //
var Li = movebox.querySelectorAll("li"); // item
var width = parseInt(window.getComputedStyle(movebox.parentNode).width); // item
movebox.style.width = (width*4) + "px"; // width
for(var i = 0; i < Li.length; i++){
Li[i].style.width = width + "px"; // item width，
}
//
function boxTouchStart(e){
var touch = e.touches[0]; //
startX = touch.pageX; //
endX = parseInt(movebox.style.webkitTransform.replace("translateX(", "")); // X
}
function boxTouchMove(e){
var touch = e.touches[0];
moveX = touch.pageX - startX; //
if(cout == 0 && moveX > 0){ //
return false;
}
if(cout == 3 && moveX < 0){ //
return false;
}
movebox.style.webkitTransform = "translateX(" + (endX + moveX) + "px)"; //
}
function boxTouchEnd(e){
moveDir = moveX < 0 ? true : false; // 0 ， 0
//
if(moveDir){
if(cout<3){
movebox.style.webkitTransform = "translateX(" + (endX-width) + "px)";
cout++;
}
//
}else{
// false
if(cout == 0){
return false;
}else{
movebox.style.webkitTransform = "translateX(" + (endX+width) + "px)";
cout--;
}
}
}
//
movebox.addEventListener("touchstart", boxTouchStart, false);
movebox.addEventListener("touchmove", boxTouchMove, false);
movebox.addEventListener("touchend", boxTouchEnd, false);
}
script>
head>
<body style="position:absolute;width:100%;overflow:hidden;">
<div class="box">
<ul class="movebox" style="transition-duration:0.2s;transform: translateX(-0px);">
<li style="background:red;">1li>
<li style="background:yellow">2li>
<li style="background:blue">3li>
<li style="background:green">4li>
ul>
div>
body>
html>