<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<style>
body{padding:0;margin:0;}
.clearfix:after{display:block;content:'';clear:both;}
ul{list-style: none;padding:0;margin:0;}
.map_wrap{width:150px;border:1px solid #333;}
.map_wrap .active{background:#ccc;}
.map_wrap ul{width:150px;}
.map_wrap ul:nth-of-type(1):hover{cursor:pointer;}
.map_wrap ul:nth-of-type(2){width:150px;height:200px;}
.map_wrap ul:nth-of-type(1) li{float:left;width:50px;height:20px;border:1px solid red;box-sizing: border-box;}
.map_wrap ul:nth-of-type(2) li{width:150px;height:200px;background:rgba(54, 182, 214, 0.705);display: none;}
.clr{color:yellow}
</style>
<div class="map_wrap">
<ul class="clearfix">
<li>1</li>
<li class="active clr">2</li>
<li>3</li>
</ul>
<ul>
<li>111</li>
<li style="display:block;">222</li>
<li>333</li>
</ul>
</div>
<script>
var Tween = {
linear: function (t, b, c, d) { //匀速
return c * t / d + b;
},
easeIn: function (t, b, c, d) { //加速曲线
return c * (t /= d) * t + b;
},
easeOut: function (t, b, c, d) { //减速曲线
return -c * (t /= d) * (t - 2) + b;
},
easeBoth: function (t, b, c, d) { //加速减速曲线
if ((t /= d / 2) < 1) {
return c / 2 * t * t + b;
}
return -c / 2 * ((--t) * (t - 2) - 1) + b;
},
easeInStrong: function (t, b, c, d) { //加加速曲线
return c * (t /= d) * t * t * t + b;
},
easeOutStrong: function (t, b, c, d) { //减减速曲线
return -c * ((t = t / d - 1) * t * t * t - 1) + b;
},
easeBothStrong: function (t, b, c, d) { //加加速减减速曲线
if ((t /= d / 2) < 1) {
return c / 2 * t * t * t * t + b;
}
return -c / 2 * ((t -= 2) * t * t * t - 2) + b;
},
elasticIn: function (t, b, c, d, a, p) { //正弦衰减曲线（弹动渐入）
if (t === 0) {
return b;
}
if ((t /= d) == 1) {
return b + c;
}
if (!p) {
p = d * 0.3;
}
if (!a || a < Math.abs(c)) {
a = c;
var s = p / 4;
} else {
var s = p / (2 * Math.PI) * Math.asin(c / a);
}
return -(a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b;
},
elasticOut: function (t, b, c, d, a, p) { //*正弦增强曲线（弹动渐出）
if (t === 0) {
return b;
}
if ((t /= d) == 1) {
return b + c;
}
if (!p) {
p = d * 0.3;
}
if (!a || a < Math.abs(c)) {
a = c;
var s = p / 4;
} else {
var s = p / (2 * Math.PI) * Math.asin(c / a);
}
return a * Math.pow(2, -10 * t) * Math.sin((t * d - s) * (2 * Math.PI) / p) + c + b;
},
elasticBoth: function (t, b, c, d, a, p) {
if (t === 0) {
return b;
}
if ((t /= d / 2) == 2) {
return b + c;
}
if (!p) {
p = d * (0.3 * 1.5);
}
if (!a || a < Math.abs(c)) {
a = c;
var s = p / 4;
}
else {
var s = p / (2 * Math.PI) * Math.asin(c / a);
}
if (t < 1) {
return - 0.5 * (a * Math.pow(2, 10 * (t -= 1)) *
Math.sin((t * d - s) * (2 * Math.PI) / p)) + b;
}
return a * Math.pow(2, -10 * (t -= 1)) *
Math.sin((t * d - s) * (2 * Math.PI) / p) * 0.5 + c + b;
},
backIn: function (t, b, c, d, s) { //回退加速（回退渐入）
if (typeof s == 'undefined') {
s = 1.70158;
}
return c * (t /= d) * t * ((s + 1) * t - s) + b;
},
backOut: function (t, b, c, d, s) {
if (typeof s == 'undefined') {
s = 3.70158; //回缩的距离
}
return c * ((t = t / d - 1) * t * ((s + 1) * t + s) + 1) + b;
},
backBoth: function (t, b, c, d, s) {
if (typeof s == 'undefined') {
s = 1.70158;
}
if ((t /= d / 2) < 1) {
return c / 2 * (t * t * (((s *= (1.525)) + 1) * t - s)) + b;
}
return c / 2 * ((t -= 2) * t * (((s *= (1.525)) + 1) * t + s) + 2) + b;
},
bounceIn: function (t, b, c, d) { //弹球减振（弹球渐出）
return c - Tween['bounceOut'](d - t, 0, c, d) + b;
},
bounceOut: function (t, b, c, d) {//*
if ((t /= d) < (1 / 2.75)) {
return c * (7.5625 * t * t) + b;
} else if (t < (2 / 2.75)) {
return c * (7.5625 * (t -= (1.5 / 2.75)) * t + 0.75) + b;
} else if (t < (2.5 / 2.75)) {
return c * (7.5625 * (t -= (2.25 / 2.75)) * t + 0.9375) + b;
}
return c * (7.5625 * (t -= (2.625 / 2.75)) * t + 0.984375) + b;
},
bounceBoth: function (t, b, c, d) {
if (t < d / 2) {
return Tween['bounceIn'](t * 2, 0, c, d) * 0.5 + b;
}
return Tween['bounceOut'](t * 2 - d, 0, c, d) * 0.5 + c * 0.5 + b;
}
}
function addClass(obj,cls){
let re=new RegExp("\\b"+cls+"\\b","g")
obj.className.replace(re,"");
obj.className=obj.className?obj.className:"";
obj.className+=(" "+cls);
}
function removeClass(obj,cls){
let re = new RegExp("\\b" + cls + "\\b","g")
obj.className=obj.className.replace(re, "");
}
window.onload=function(){
let aMapTabs=document.querySelectorAll('.map_wrap ul:nth-of-type(1) li')
let aMapTabContents = document.querySelectorAll('.map_wrap ul:nth-of-type(2) li')
aMapTabs.forEach((item,index)=>{
item.onclick=function(){
for(let i=0;i<aMapTabs.length;i++){
removeClass(aMapTabs[i],"active")
}
addClass(aMapTabs[index], "active")
aMapTabContents.forEach(function(item,i){
item.style.display='none'
})
aMapTabContents[index].style.display="block"
}
})
let tween=(t,b,c,d)=>{
return c*(t/d)+b;
}
let oDiv=document.querySelector('#div1');
let move=(t,b,c,d)=>{
oDiv.timer=setInterval(()=>{
if(++t==d){
clearInterval(oDiv.timer)
move(0,b+c,-c,d)
}
oDiv.style.top= Tween.backIn(t,b,c,d)+'px';
},16.7)
}
move(0, 100, 12, 30)
}
</script>
<div style="position: absolute;left:300px;top:100px">
<div id="div1" style="width:30px;height:30px;background:red;position:absolute;left:300px;top:100px">
</div>
<div style="width:1px;height:300px;position:absolute;left:900px;top:0;background:black;"></div>
</div>
</body>
</html>
网友评论