Question

我想用一个框创建一个漂亮的导航（相对比例），在导航点之间平滑移动。因此，如果我选择导航点，则框会平滑移动到所选入口点。但我不知道该怎么做。

这是一个平滑动画的例子：

＆＃13;

var boxOne = document.getElementsByClassName('box')[0],
    $boxTwo = $('.box:eq(1)');

document.getElementsByClassName('toggleButton')[0].onclick = function() {
  if(this.innerHTML === 'Play') 
  { 
    this.innerHTML = 'Pause';
    boxOne.classList.add('horizTranslate');
  } else {
    this.innerHTML = 'Play';
    var computedStyle = window.getComputedStyle(boxOne),
        marginLeft = computedStyle.getPropertyValue('margin-left');
    boxOne.style.marginLeft = marginLeft;
    boxOne.classList.remove('horizTranslate');    
  }  
}

＆＃13;

.box {
  margin: 30px;
  height: 50px;
  width: 50px;
  background-color: blue;
}
.box.horizTranslate {
  -webkit-transition: 3s;
  -moz-transition: 3s;
  -ms-transition: 3s;
  -o-transition: 3s;
  transition: 3s;
  margin-left: 50% !important;
}

＆＃13;

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Pausing Transitions</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  <h3>Example</h3>
<div class='box'></div> 
<button class='toggleButton' value='play'>Play</button>

  <script src='http://code.jquery.com/jquery-2.0.0.js'></script>

    <script src="js/index.js"></script>

</body>
</html>

＆＃13;

目前我的代码如下：

＆＃13;

@font-face { 
font-family: "FireSans"; 
src: url("../fonts/FiraSans-Light.ttf"); 
}

body{

	background-color: green;

}

#header{
	
	width: 80%;
	max-width: 1300px;
	min-width: 900px;
    margin: 50px auto;

}

#table{

	width: 100%

}

#logo{

	height: 170px;
	
	display: block;
	margin: 0 auto; 

}

#menu{

	padding-top: 75px;
	
	color: white;
	font-family: "FireSans";
	font-size: 1.5em;
	
	width: 280px;
	
}

#menutable{

	width: 280px;

}

#test {

	height: 4px;
	width: 85%;
	background-color: rgb(185,224,78);
	margin: auto;

}

＆＃13;

	<div id="header">
	
	<table id="table">
  		<thead>
   			<tr>
      			<th id="menu" align="right"><table id="menutable"><thead><tr><th id="start">STARTSEITE<div id="test"></th><th id="ende"onmouseover="changeBox()">KANÄLE</th></tr></thead></table></th>
     			<th style="width:344px;"><img id="logo" src="./images/logo.jpg"></th>
      			<th id="menu" align="left"><table id="menutable"><thead><tr><th>BEWERBEN</th><th>LOGIN</th></tr></thead></table></th>
    		</tr>
  		</thead>
	</table>

	</div>

＆＃13;

感谢您的帮助：）

带移动框的相对缩放导航栏

0 个答案: