zyronon
6 years ago
3 changed files with 426 additions and 13233 deletions
@ -0,0 +1,381 @@ |
|||||||
|
<!DOCTYPE html> |
||||||
|
<html lang="cn"> |
||||||
|
|
||||||
|
<head> |
||||||
|
<meta charset="UTF-8"> |
||||||
|
<meta name="screen-orientation" content="portrait"/> |
||||||
|
<meta name="viewport" content="width=device-width,initial-scale=1.0"> |
||||||
|
<meta name="apple-mobile-web-app-capable" content="yes"> |
||||||
|
<meta name="format-detection" content="telephone=no"> |
||||||
|
<meta name="full-screen" content="yes"> |
||||||
|
<meta name="x5-fullscreen" content="true"> |
||||||
|
<title>Document</title> |
||||||
|
<!-- <script src="https://lib.baomitu.com/jquery/3.4.1/jquery.min.js"></script>--> |
||||||
|
<script src="https://lib.baomitu.com/zepto/1.2.0/zepto.js"></script> |
||||||
|
<!-- <script src="event.js"></script>--> |
||||||
|
<script src="http://www.ttentau.top/touch.js"></script> |
||||||
|
<script src="http://www.ttentau.top/fx.js"></script> |
||||||
|
|
||||||
|
<style> |
||||||
|
html, body { |
||||||
|
height: 100%; |
||||||
|
width: 100%; |
||||||
|
margin: 0; |
||||||
|
padding: 0; |
||||||
|
background: #2e3244; |
||||||
|
} |
||||||
|
|
||||||
|
.container { |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
overflow: hidden; |
||||||
|
/*overflow: auto;*/ |
||||||
|
} |
||||||
|
|
||||||
|
.wrapper { |
||||||
|
position: relative; |
||||||
|
/*left: -100%;*/ |
||||||
|
/*top: -350px;*/ |
||||||
|
display: flex; |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
/*height: 812px;*/ |
||||||
|
/*overflow-y:hidden ;*/ |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
.swiper-item { |
||||||
|
/*flex-shrink: 0;*/ |
||||||
|
position: absolute; |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
} |
||||||
|
|
||||||
|
.left-container { |
||||||
|
top: 0; |
||||||
|
left: 0; |
||||||
|
overflow: hidden; |
||||||
|
} |
||||||
|
|
||||||
|
.content-list { |
||||||
|
position: absolute; |
||||||
|
/*top: -100%;*/ |
||||||
|
height: 100%; |
||||||
|
width: 100%; |
||||||
|
} |
||||||
|
|
||||||
|
.content-item { |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
position: relative; |
||||||
|
} |
||||||
|
|
||||||
|
.item-tool { |
||||||
|
height: 300px; |
||||||
|
width: 50px; |
||||||
|
background: #ccc; |
||||||
|
position: absolute; |
||||||
|
bottom: 100px; |
||||||
|
right: 30px; |
||||||
|
} |
||||||
|
|
||||||
|
.footer { |
||||||
|
position: absolute; |
||||||
|
bottom: 0; |
||||||
|
width: 100%; |
||||||
|
height: 30px; |
||||||
|
background: #666; |
||||||
|
} |
||||||
|
|
||||||
|
.right-container { |
||||||
|
top: 0; |
||||||
|
left: 100%; |
||||||
|
overflow: auto; |
||||||
|
} |
||||||
|
|
||||||
|
.user-videos { |
||||||
|
height: 12000px; |
||||||
|
} |
||||||
|
|
||||||
|
.console { |
||||||
|
display: none; |
||||||
|
position: absolute; |
||||||
|
top: 0; |
||||||
|
right: 0; |
||||||
|
height: 500px; |
||||||
|
overflow: auto; |
||||||
|
} |
||||||
|
|
||||||
|
p { |
||||||
|
margin: 0; |
||||||
|
} |
||||||
|
</style> |
||||||
|
</head> |
||||||
|
|
||||||
|
<body> |
||||||
|
<div class="container"> |
||||||
|
<div class="wrapper"> |
||||||
|
<div class="left-container swiper-item"> |
||||||
|
<div class="content-list"> |
||||||
|
<div class="content-item">11111 |
||||||
|
<div class="item-tool"></div> |
||||||
|
</div> |
||||||
|
<div class="content-item">22222 |
||||||
|
<div class="item-tool"></div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="footer"></div> |
||||||
|
</div> |
||||||
|
<div class="right-container swiper-item "> |
||||||
|
<div class="user-bg">user-bg</div> |
||||||
|
<div class="user-videos">user-videos |
||||||
|
<p>user-videos</p> |
||||||
|
<p>user-videos</p> |
||||||
|
<p>user-videos</p> |
||||||
|
<p>user-videos</p> |
||||||
|
<p>user-videos</p> |
||||||
|
<p>user-videos</p> |
||||||
|
<p>user-videos</p> |
||||||
|
<p>user-videos</p> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="console"> |
||||||
|
|
||||||
|
</div> |
||||||
|
</body> |
||||||
|
<script> |
||||||
|
// let |
||||||
|
let consoleEl = $('.console') |
||||||
|
let swiperItem = $('.swiper-item') |
||||||
|
let contentItem = $('.content-item') |
||||||
|
let wrapper = $('.wrapper') |
||||||
|
let contentList = $('.content-list') |
||||||
|
|
||||||
|
let height = $('body').height() |
||||||
|
let width = $('body').width() |
||||||
|
|
||||||
|
let startLocationY = 0 |
||||||
|
let startLocationX = 0 |
||||||
|
|
||||||
|
let lastLocationY = 0 |
||||||
|
let lastLocationX = 0 |
||||||
|
|
||||||
|
let moveXDistance = 0 |
||||||
|
let moveYDistance = 0 |
||||||
|
|
||||||
|
let judgeValue = 30 |
||||||
|
|
||||||
|
let startTime |
||||||
|
let currentIndex |
||||||
|
let currentSwiperItemIndex |
||||||
|
let isDrawDown |
||||||
|
let isDrawRight |
||||||
|
|
||||||
|
let isCanDownWiping = false |
||||||
|
let isCanRightWiping = false |
||||||
|
let isNeedCheck = true |
||||||
|
// let isCanDownWiping = true |
||||||
|
// let isCanRightWiping = true |
||||||
|
// let isNeedCheck = false |
||||||
|
|
||||||
|
|
||||||
|
function checkDirection() { |
||||||
|
consoleEl.append('<p>' + 'isNeedCheck:' + isNeedCheck + '</p>') |
||||||
|
|
||||||
|
|
||||||
|
if (!isNeedCheck) { |
||||||
|
// console.log('不需要检测了') |
||||||
|
return |
||||||
|
} |
||||||
|
consoleEl.append('<p>' + 'moveXDistance:' + moveXDistance + '</p>') |
||||||
|
consoleEl.append('<p>' + 'moveYDistance:' + moveYDistance + '</p>') |
||||||
|
|
||||||
|
if (Math.abs(moveXDistance) > judgeValue || Math.abs(moveYDistance) > judgeValue) { |
||||||
|
//X 除以 Y |
||||||
|
let angle = (Math.abs(moveXDistance) * 10) / (Math.abs(moveYDistance) * 10) |
||||||
|
if (angle > 0.7 && angle < 1.3) { |
||||||
|
isNeedCheck = false |
||||||
|
return |
||||||
|
} |
||||||
|
consoleEl.append('<p>' + 'angle:' + angle + '</p>') |
||||||
|
|
||||||
|
// console.log('x------------', moveXDistance) |
||||||
|
// console.log('y------------', moveYDistance) |
||||||
|
// console.log('角度------------', angle) |
||||||
|
|
||||||
|
if (angle < 0.6) { |
||||||
|
//上下划 |
||||||
|
isCanDownWiping = true |
||||||
|
isCanRightWiping = false |
||||||
|
isNeedCheck = false |
||||||
|
return |
||||||
|
} |
||||||
|
if (angle > 5) { |
||||||
|
//左右划 |
||||||
|
isCanDownWiping = false |
||||||
|
isCanRightWiping = true |
||||||
|
isNeedCheck = false |
||||||
|
return |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
function resetConfig() { |
||||||
|
isCanDownWiping = false |
||||||
|
isCanRightWiping = false |
||||||
|
isNeedCheck = true |
||||||
|
moveXDistance = 0 |
||||||
|
moveYDistance = 0 |
||||||
|
// isCanDownWiping = true |
||||||
|
// isCanRightWiping = true |
||||||
|
// isNeedCheck = false |
||||||
|
} |
||||||
|
|
||||||
|
swiperItem |
||||||
|
.on('touchstart', function (e) { |
||||||
|
consoleEl.empty() |
||||||
|
consoleEl.append('<p>swiperItem touchstart</p>') |
||||||
|
currentSwiperItemIndex = $(this).index() |
||||||
|
startLocationX = e.touches[0].pageX |
||||||
|
startTime = Date.now() |
||||||
|
}) |
||||||
|
.on('touchmove', function (e) { |
||||||
|
consoleEl.append('<p>' + 'si move isCanRightWiping:' + isCanRightWiping + '</p>') |
||||||
|
|
||||||
|
lastLocationX = e.touches[0].pageX |
||||||
|
moveXDistance = lastLocationX - startLocationX |
||||||
|
isDrawRight = moveXDistance < 0 |
||||||
|
|
||||||
|
// console.log(moveXDistance) |
||||||
|
checkDirection() |
||||||
|
if (isCanRightWiping) { |
||||||
|
if (isDrawRight) { |
||||||
|
wrapper.css({left: -(currentSwiperItemIndex + 0) * width + moveXDistance + judgeValue}) |
||||||
|
} else { |
||||||
|
wrapper.css({left: -(currentSwiperItemIndex + 0) * width + moveXDistance - judgeValue}) |
||||||
|
} |
||||||
|
} |
||||||
|
}) |
||||||
|
.on('touchend', function (e) { |
||||||
|
consoleEl.append('<p>swiperItem touchend</p>') |
||||||
|
|
||||||
|
if (!isCanRightWiping) { |
||||||
|
// resetConfig() |
||||||
|
isNeedCheck = true |
||||||
|
return |
||||||
|
} |
||||||
|
// console.log('contentList-touchend', e) |
||||||
|
let endTime = Date.now() |
||||||
|
let gapTime = endTime - startTime |
||||||
|
|
||||||
|
// 如果 |
||||||
|
if (Math.abs(moveXDistance) < 20) { |
||||||
|
gapTime = 1000 |
||||||
|
} |
||||||
|
if (Math.abs(moveXDistance) > (width / 3)) { |
||||||
|
gapTime = 100 |
||||||
|
} |
||||||
|
// console.log('是否向左划',isDrawRight) |
||||||
|
if (gapTime < 150) { |
||||||
|
// console.log('小于500', currentIndex) |
||||||
|
if (isDrawRight) { |
||||||
|
// console.log('往下划'); |
||||||
|
if (currentSwiperItemIndex === swiperItem.length - 1) { |
||||||
|
return wrapper.animate({left: -(swiperItem.length - 1) * width}, 200) |
||||||
|
} |
||||||
|
wrapper.animate({left: -(currentSwiperItemIndex + 1) * width}, 200) |
||||||
|
} else { |
||||||
|
// console.log('往上划'); |
||||||
|
if (currentSwiperItemIndex === 0) { |
||||||
|
return wrapper.animate({left: 0}, 200) |
||||||
|
} |
||||||
|
wrapper.animate({left: -(currentSwiperItemIndex - 1) * width}, 200) |
||||||
|
} |
||||||
|
} else { |
||||||
|
wrapper.animate({left: -(currentSwiperItemIndex) * width}, 200, 'linear') |
||||||
|
} |
||||||
|
|
||||||
|
resetConfig() |
||||||
|
}) |
||||||
|
contentList |
||||||
|
.on('touchstart', '.content-item', function (e) { |
||||||
|
consoleEl.empty() |
||||||
|
consoleEl.append('<p>contentItem touchstart</p>') |
||||||
|
currentIndex = $(this).index() |
||||||
|
startLocationY = e.touches[0].pageY |
||||||
|
startLocationX = e.touches[0].pageX |
||||||
|
startTime = Date.now() |
||||||
|
}) |
||||||
|
.on('touchmove', function (e) { |
||||||
|
consoleEl.append('<p>' + 'ci move isCanDownWiping:' + isCanDownWiping + '</p>') |
||||||
|
|
||||||
|
lastLocationY = e.touches[0].pageY |
||||||
|
|
||||||
|
moveYDistance = lastLocationY - startLocationY |
||||||
|
isDrawDown = moveYDistance < 0 |
||||||
|
|
||||||
|
checkDirection() |
||||||
|
if (isCanDownWiping) { |
||||||
|
if (isDrawDown) { |
||||||
|
contentList.css({top: -(currentIndex + 0) * height + moveYDistance + judgeValue}) |
||||||
|
} else { |
||||||
|
contentList.css({top: -(currentIndex + 0) * height + moveYDistance - judgeValue}) |
||||||
|
} |
||||||
|
} |
||||||
|
}) |
||||||
|
.on('touchend', function (e) { |
||||||
|
consoleEl.append('<p>contentItem touchend</p>') |
||||||
|
|
||||||
|
if (!isCanDownWiping) { |
||||||
|
isNeedCheck = true |
||||||
|
return |
||||||
|
} |
||||||
|
// console.log('contentList-touchend', e) |
||||||
|
let endTime = Date.now() |
||||||
|
moveYDistance = lastLocationY - startLocationY |
||||||
|
let gapTime = endTime - startTime |
||||||
|
|
||||||
|
// 如果 |
||||||
|
if (Math.abs(moveYDistance) < 20) { |
||||||
|
gapTime = 1000 |
||||||
|
} |
||||||
|
if (Math.abs(moveYDistance) > (width / 3)) { |
||||||
|
gapTime = 100 |
||||||
|
} |
||||||
|
|
||||||
|
if (gapTime < 150) { |
||||||
|
// console.log('小于500', currentIndex) |
||||||
|
if (isDrawDown) { |
||||||
|
console.log('往下划') |
||||||
|
if ($('.content-item').length < currentIndex + 3) { |
||||||
|
loadNewVideo() |
||||||
|
} |
||||||
|
// if (currentIndex === contentItem.length - 1) { |
||||||
|
// return contentList.animate({top: -(contentItem.length - 1) * height}, 200) |
||||||
|
// } |
||||||
|
contentList.animate({top: -(currentIndex + 1) * height}, 200) |
||||||
|
} else { |
||||||
|
console.log('往上划') |
||||||
|
if (currentIndex === 0) { |
||||||
|
return contentList.animate({top: 0}, 200) |
||||||
|
} |
||||||
|
contentList.animate({top: -(currentIndex - 1) * height}, 200) |
||||||
|
} |
||||||
|
} else { |
||||||
|
contentList.animate({top: -(currentIndex) * height}, 200, 'linear') |
||||||
|
} |
||||||
|
resetConfig() |
||||||
|
}) |
||||||
|
|
||||||
|
function loadNewVideo() { |
||||||
|
console.log('加载新的视频到末尾') |
||||||
|
let html = ` <div class="content-item">${currentIndex} |
||||||
|
<div class="item-tool"></div> |
||||||
|
</div>` |
||||||
|
contentList.append(html) |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
</html> |
||||||
Loading…
Reference in new issue