<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>滚动</title>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" />
<script type="text/javascript" src="./js/jquery.min.js"></script>
</head>
<style type="text/css">
body,
html {
margin: 0;
padding: 0;
}
.box {
overflow: hidden;
position: relative;
height: 44px;
}
.boxChild {
position: absolute;
left: 0px;
top: 0px;
}
.tabs-wrap {
height: 44px;
line-height: 44px;
font-size: 18px;
color: #999;
width: 100vw;
top: 0;
left: 0;
display: flex;
}
.tabs-wrap .tab {
float: left;
flex: 1;
text-align: center;
font-size: 16px;
/*background: pink;*/
}
.tabs-wrap .tab.current {
color: #333;
}
.tabs-wrap .tab-line {
height: 2px;
background: #f44;
width: 200px;
position: absolute;
bottom: 0;
transition-duration: 0.3s;
}
</style>
<body>
<div class="box" id="box">
<div class="boxChild" id="boxChild">
<div class="tabs-wrap" id="wrap">
<div class="tab">一年级1</div>
<div class="tab">二年级2</div>
<div class="tab">三年级3</div>
<div class="tab">四年级4</div>
<div class="tab">五年级5</div>
<div class="tab">六年级6</div>
<div class="tab">七年级7</div>
<div class="tab">综合提升8</div>
<div class="tab">高一9</div>
<div class="tab">高二10</div>
<div class="tab">高三11</div>
<div class="tab">大一12</div>
<div class="tab">大二13</div>
<div class="tab">大三14</div>
<div class="tab">大四15</div>
<div class="tab-line"></div>
</div>
</div>
</div>
<div class="tabCentent">
<div class="tab_pane">1111111</div>
<div class="tab_pane">22222</div>
<div class="tab_pane">333333</div>
<div class="tab_pane">4444444</div>
<div class="tab_pane">5555</div>
</div>
</body>
</html>
<script type="text/javascript">
var tabLen, fourW, surpassFourW, halfScreenW, screenW, tabLineW, tabW;
screenW = screen.width;
halfScreenW = screen.width / 2;
tabLen = $('.tabs-wrap .tab').length; //
if (tabLen > 5) {
$('.tabs-wrap .tab').css('flex', '0 0 22%');
}
tabW = screenW * 0.22
tabLineW = screenW * 0.22 * 0.5;
$('.boxChild').css('width', tabW * tabLen)
$('.tabs-wrap .tab-line').css('left', tabLineW * 0.5)
$('.tab-line').css({ 'width': tabLineW });
$('.tabs-wrap').on('click', '.tab', function() {
var index = $(this).index('.tab');
// console.log(index)
var tabLineLeft = index * tabW + tabLineW * 0.5;
// console.log(index*tabW)
// console.log(tabLineLeft)
$('.tabs-wrap .tab-line').css('left', tabLineLeft)
})
var donwLeft;
var donwX;
var boxChild = document.getElementById('boxChild');
var downTime = 0;
boxChild.addEventListener('touchstart', function(ev) {
var touchs = ev.changedTouches[0];
donwX = touchs.pageX;
donwLeft = this.offsetLeft;
downTime = Date.now();
})
boxChild.addEventListener('touchmove', function(ev) {
var touchs = ev.changedTouches[0];
if (this.offsetLeft >= 0) {
this.style.left = (touchs.pageX - donwX) / 3 + 'px';
} else if (this.offsetLeft <= screenW - this.offsetWidth) {
this.style.left = donwLeft + (touchs.pageX - donwX) / 3 + 'px';
} else {
this.style.left = donwLeft + (touchs.pageX - donwX) + 'px';
}
// this.style.left =donwLeft + touchs.pageX - donwX+'px';
})
boxChild.addEventListener('touchend', function(ev) {
var endSign = false;
var touchs = ev.changedTouches[0];
if (this.offsetLeft >= 0) {
console.log('第一种')
this.style.left = '0px'
} else if (this.offsetLeft <= screenW - this.offsetWidth) {
console.log('第二种')
this.style.left = screenW - this.offsetWidth + 'px'
} else if (Date.now() - downTime < 300) {
$(this).animate({ 'left': donwLeft + (touchs.pageX - donwX) * 3 });
endSign = true;
console.log('haha')
}
// console.log( Date.now() - downTime)
// console.log(screenW - this.offsetWidth)
console.log('多拖吧')
console.log((donwLeft + (touchs.pageX - donwX)))
console.log((donwLeft + (touchs.pageX - donwX) * 3) >= 0);
if (endSign) {
console.log('xixi')
if ((donwLeft + (touchs.pageX - donwX) * 3) >= 0) {
this.style.left = '0px';
// alert(1)
} else if ((donwLeft + (touchs.pageX - donwX) * 3) <= screenW - this.offsetWidth) {
this.style.left = screenW - this.offsetWidth + 'px';
// alert(2)
}
}
})
</script>
