0
スワイプのアクション（左、右、上、下）を追加して、スワイプの方向を警告します。このためスワイプが間違って表示される
コード：
var touchStartCoords = {'x':-1, 'y':-1}, // X and Y coordinates on mousedown or touchstart events.
touchEndCoords = {'x':-1, 'y':-1},// X and Y coordinates on mouseup or touchend events.
direction = 'undefined',// Swipe direction
minDistanceXAxis = 10,// Min distance on mousemove or touchmove on the X axis
maxDistanceYAxis = 10,// Max distance on mousemove or touchmove on the Y axis
maxAllowedTime = 1000,// Max allowed time between swipeStart and swipeEnd
startTime = 0,// Time on swipeStart
elapsedTime = 0,// Elapsed time between swipeStart and swipeEnd
targetElement = document.getElementById('el');// Element to delegate
function swipeStart(e) {
e = e ? e : window.event;
e = ('changedTouches' in e)?e.changedTouches[0] : e;
touchStartCoords = {'x':e.pageX, 'y':e.pageY};
startTime = new Date().getTime();
targetElement.textContent = " ";
}
function swipeMove(e){
e = e ? e : window.event;
e.preventDefault();
}
function swipeEnd(e) {
e = e ? e : window.event;
e = ('changedTouches' in e)?e.changedTouches[0] : e;
touchEndCoords = {'x':e.pageX - touchStartCoords.x, 'y':e.pageY - touchStartCoords.y};
elapsedTime = new Date().getTime() - startTime;
if (elapsedTime <= maxAllowedTime){
if (Math.abs(touchEndCoords.x) >= minDistanceXAxis && Math.abs(touchEndCoords.y) <= maxDistanceYAxis){
direction = (touchEndCoords.x < 0)? 'left' : 'right';
switch(direction){
case 'left':
alert("left");
document.getElementById("el").innerHTML="<img src = http://www.worthwild.com/assets/img-mas-02-73410a2b7c925f01866e68f4651510a0.jpg>";
break;
case 'right':
alert("right");
document.getElementById("el").innerHTML="<img src = http://www.worthwild.com/assets/img-mas-02-73410a2b7c925f01866e68f4651510a0.jpg>";
break;
}
}
if (Math.abs(touchEndCoords.x) >= minDistanceXAxis && Math.abs(touchEndCoords.y) <= maxDistanceYAxis){
direction2 = (touchEndCoords.y > 0)? 'top' : 'bottom';
switch(direction2){
case 'top':
alert("top");
document.getElementById("el").innerHTML="<img src = http://www.worthwild.com/assets/img-mas-02-73410a2b7c925f01866e68f4651510a0.jpg>";
break;
case 'bottom':
alert("bottom");
document.getElementById("el").innerHTML="<img src = http://www.worthwild.com/assets/img-mas-02-73410a2b7c925f01866e68f4651510a0.jpg>";
break;
}
}
}
}
function addMultipleListeners(el, s, fn) {
var evts = s.split(' ');
for (var i=0, iLen=evts.length; i<iLen; i++) {
el.addEventListener(evts[i], fn, false);
}
}
addMultipleListeners(targetElement, 'mousedown touchstart', swipeStart);
addMultipleListeners(targetElement, 'mousemove touchmove', swipeMove);
addMultipleListeners(targetElement, 'mouseup touchend', swipeEnd);@import url(http://fonts.googleapis.com/css?family=Open+Sans:300,400,600);
@import url(http://weloveiconfonts.com/api/?family=fontawesome);
[class*="fontawesome-"]:before {
font-family: 'FontAwesome', sans-serif;
}
*, *:before, *:after {
box-sizing: border-box;
}
a {
text-decoration: none;
color: #333;
}
body {
margin-top: -22px;
margin-bottom: 0px;
margin-right: 0px;
margin-left: 0px;
}
#container {
width: 360px;
height: 640px;
background-color: #ff5a5a;
}
.square-box{
margin: 0 auto;
position: relative;
width: 60%;
height: 15%;
overflow: hidden;
background: #4679BD;
top: 50px;
}
.square-box:before{
content: "";
display: block;
padding-top: 100%;
}
.square-content{
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
color: white;
}
.square-content div {
display: table;
width: 100%;
height: 100%;
}
.square-content span {
display: table-cell;
text-align: center;
text-transform: uppercase;
vertical-align: middle;
font-size: 20px;
font-weight: bold;
color: white;
font-family: 'Lato', sans-serif;
}
.button-panel
{
display: table;
margin: 0 auto;
width: 60%;
}
.buttonlogin{
margin-top: 30%;
display: block;
background: #27adf1;
color: white;
border: none;
width: 100%;
height: 50px;
}
.button {
margin-top: 40%;
background: #27adf1;
color: white;
border: none;
width: 100%;
height: 50px;
}
.button2 {
margin-top: .25em;
border: 1px solid #27adf1;
color: #27adf1;
background: white;
width: 100%;
height: 50px;
}
#status{
margin: 0 auto;
width: 216px;
height: 50px;
color: #27adf1;
margin-top: 4.25em;
display: block;
background: white;
}
h1, p {
text-align: center;
}
#el {
margin: auto;
position: relative;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 250px;
height: 250px;
line-height: 250px;
text-align: center;
}
#el img{
margin: auto;
height: 250px;
height: 250px;
line-height: 250px;
text-align: center;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
\t \t <div class="main">
\t \t <div class="button-panel">
\t \t <button class="backbutton"
\t \t style="margin-top: 15%;
\t \t \t display: block;
\t \t \t background: #27adf1;
\t \t \t color: white;
\t \t \t border: none;
\t \t \t width: 100%;
\t \t \t height: 50px;"
\t \t onclick="window.location.href='index.html'">Back to Menu</button>
\t \t </div>
\t \t </div>
\t \t <div id="wrapper">
\t \t <div id="el">
\t \t \t <script type="text/javascript">
\t \t \t \t document.write("<img src = http://www.worthwild.com/assets/img-mas-02-73410a2b7c925f01866e68f4651510a0.jpg>");
\t \t \t </script>
\t \t </div>
\t \t </div>
\t </div>問題は上部と下部方向です。左右方向の警告が表示されます...
しかし、私はすべて別々にしたいです。
左にスワイプすると、左に警告が表示されます。
私が右にスワイプすると、右だけが警告されます。
トップとボトムに同じ...
このコードにはどのような問題がありますか？
おかげでおい！ – Tomasz
ようこそ、嬉しいです！ –