非常炫的动态动画效果的数字编号查找功能特效

稿源：互联网 2018-09-03 02:52:26 点击： 7795 撤稿纠错

输入一个编号，点击开始，就会逐个编号进行查找，找到后，数字以闪停方式显现，非常炫的一个特效。

以下讨论的是和查找数字动态动画相关的非常炫的动态动画效果的数字编号查找功能特效教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>验证</title>
<style>
#wrap{ width:215px; height:200px; border:1px solid #ddd; margin-top:10px; overflow:auto; position:relative;}
#wrap ul{ padding:0; margin:0;}
#wrap ul li{ width:50px; margin:5px 2px 5px 11px; height:30px; background:#CFC; float:left; font-size:13px; list-style:none; line-height:30px; text-align:center;}

#wrap ul li.yes1{ background:#40F0ED;}
#wrap ul li.yes2{ background:#5F3FEF;}
#wrap ul li.yes3{ background:#EF3FD7;}
#wrap ul li.yes4{ background:#5F3FEF;}
#wrap ul li.yes5{ background:#f00;}
#wrap ul li.no{ background:#F39;}
#tipInfor{ position:absolute; left:0; top:0; overflow:hidden; height:0; z-index:10; width:100%; background:#f1f1f1; color:#333; font-size:13px; font-weight:bold; line-height:24px;}
</style>
</head>
<body>
<div>
  <input type="text" />
  <button>开始</button>
</div>
<div id="wrap">
<div id="tipInfor">阿里西西提示您：您所查询的号码不在数据库编号中，请确认您输入的编号是否正确！</div>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
    <li>11</li>
    <li>12</li>
    <li>13</li>
    <li>14</li>
    <li>15</li>
    <li>16</li>
    <li>17</li>
    <li>18</li>
    <li>19</li>
    <li>20</li>
    <li>21</li>
    <li>22</li>
    <li>23</li>
    <li>24</li>
  </ul>
</div>
</body>
</html>
<script type="text/javascript">
var obj=document.getElementById("wrap");
var btn=document.getElementsByTagName("button")[0];
var aLi=document.getElementsByTagName("li");
var a=document.getElementById("tipInfor");
String.prototype.trim=function(){
var reg=/s/g;
return this.replace(reg,"")
}

btn.onclick=function(){
 init();
 obj.style.overflow="auto";
 var txt=document.getElementsByTagName("input")[0].value;
 var i=0;
 btn.timer=setInterval(function(){
  if(i==aLi.length){
   clearInterval(btn.timer)
   obj.style.overflow="hidden";
   a.style.height="100%";
   obj.scrollTop=0;
   return;
  }
  console.log(aLi[i].innerHTML+"~~~~"+txt)
  if(aLi[i].innerHTML!=txt){
   obj.scrollTop=aLi[i].offsetTop*0.7;
   aLi[i].className="no";
  }else{
   blinkBg(aLi[i]);
   clearInterval(btn.timer);
  }
  i++;
 },100)
 

 
}
function init(){
 for(var i=0;i<aLi.length;i++){
  aLi[i].className=""; 
 }
 a.style.height=0;
}
function blinkBg(obj){
 var bgArr=["yes1","yes2","yes3","yes4","yes5"]
 var i=0;
 obj.timer=setInterval(function(){
  if(i==bgArr.length-1){
   clearInterval(obj.timer);
  }
  obj.className=bgArr[i];
  i++;
  
 },
  
 150)
 
}
</script>

关于非常炫的动态动画效果的数字编号查找功能特效的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/2018090394188.shtml方便下次再访问哦。

·上一篇： 通过CSS实现的圆角鼠标切换的折叠菜单特效代码
·下一篇： 一款竖向四级联动的导航菜单特效 4级网站菜单特效代码

非常炫的动态动画效果的数字编号查找功能特效

文章分类LIST >>返回首页

最新游戏

最新新闻