javascript - 使 html 输入流

Question

我正在尝试移动按钮 Like this demo .Using css animation我可以直接移动动画。是否有可能离开屏幕并进入屏幕，并向链接之类的框进行特定的移动和方向。这就是我所做的。

HTML

<div id="box" style='width:200px;height:200px;border:1px solid black;'/>

<button id="one" type="button" >Button1</button>
<button id="two" type="button" >Button2</button>
<button id="three" type="button">Button3</button>

CSS

button{
-webkit-appearance:none;
 width:40px;
 height:40px;
 padding: 0;
 text-align: center;
 vertical-align: middle;
 border: 1px solid red;
 font-size:10px;
 font-weight:bold;
}

#one, #two, #three
{
position:relative;

}

#one
{
  -webkit-animation:levelseven 16s  infinite;
  -webkit-animation-direction:alternate;
}

#two
{

animation-direction:alternate;

/* Safari and Chrome */
-webkit-animation:levelseven_1 8s  infinite;
}

#three
{

animation-direction:alternate;

/* Safari and Chrome */
-webkit-animation:levelseven_2 10s  infinite;

}


@-webkit-keyframes levelseven /* Safari and Chrome */
{
0%   { left:0px; top:0px;}
25%  { left:200px; top:0px;}
50%  { left:100px; top:200px;}
75%  { left:150px; top:50px;}
100% {background:cyan; left:0px; top:0px;}
}

@-webkit-keyframes levelseven_1 /* Safari and Chrome */
{
0%   { left:0px; top:0px;}
50%  {background:darkgoldenrod; left:0px; top:200px;}
100% { left:0px; top:0px;}
  }


@-webkit-keyframes levelseven_2 /* Safari and Chrome */
{
0%   { left:0px; top:0px;}
50%  {left:200px; top:0px;}
100% {left:0px; top:0px;}
}

Here's demo

Answer 1

Here is a logic very simple one

它基本上做的是定期交换类，以便按钮导航路径发生变化，从而提供动态路径 View

function timer() {
   console.log("timer!");
   var className1 = $('#oneId').attr('class');
   var className2 = $('#twoId').attr('class');
   var className3 = $('#threeId').attr('class');

   $( "#oneId" ).removeClass(className1);
   $( "#twoId" ).removeClass(className2 );
   $( "#threeId" ).removeClass(className3);
   $( "#oneId" ).addClass(className2);
   $( "#twoId" ).addClass(className3);
   $( "#threeId" ).addClass( className1);



   // alert("class changed"+className1+":"+$('#oneId').attr('class')+","+className2+$('#twoId').attr('class')+","+className3+":"+$('#threeId').attr('class'));
}

window.setInterval(timer, 10000);

让它更像你提供的演示的逻辑

• 创建多个路径，这意味着您必须创建超过 3 或 4 组一类、二类、三类变体
• 每条路径周期性地触发每条路径的相应函数，路径相应地改变周期。当框退出方框的边界时，设置的周期必须改变，所以 2000 毫秒左右
• 为@-webkit-keyframes 的顶部和左侧提供不同的起点和终点这样每条路径看起来都是独一无二的
• 给出超出方框范围的值，使其产生从一侧进入，从另一侧离开的效果