欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

原生JS实现不断变化的标签

程序员文章站 2022-10-11 12:39:19
上图为博客右侧截取的gif图，下图为代码效果   html：

上图为博客右侧截取的gif图，下图为代码效果

 原生JS实现不断变化的标签

原生JS实现不断变化的标签

html：

<!doctype html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title>slidefont</title>
</head>
<body>
 <div class="f-slidefont-box">
  <dl class="f-slidefont-box-tag">
   <dd class="f-slidefont-tag">谷歌</dd>
   <dd class="f-slidefont-tag">百度</dd>
   <dd class="f-slidefont-tag">阿里</dd>
   <dd class="f-slidefont-tag">苹果</dd>
   <dd class="f-slidefont-tag">三星</dd>
   <dd class="f-slidefont-tag">耳机</dd>
   <dd class="f-slidefont-tag">音箱</dd>
   <dd class="f-slidefont-tag">电视</dd>
   <dd class="f-slidefont-tag">谷歌</dd>
   <dd class="f-slidefont-tag">百度</dd>
   <dd class="f-slidefont-tag">阿里</dd>
  </dl>
 </div>
</body>
</html>

css:

 <style>
  .f-slidefont-box * { margin: 0; padding: 0; border: none; list-style: none; }
  .f-slidefont-box { width: 300px; height: 300px; border: 1px black solid; position: relative; }
  .f-slidefont-box-tag { width: 90%; height: 90%; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; }
  .f-slidefont-tag { position: absolute; display: block; padding: 3px 15px; background-color: #0078f7; border-radius: 10%; color: white; transition:all 1s linear; z-index: 0; transition: all .6s; cursor: pointer; }
 </style>

js:

<script src="js/glunefishlibrary.js"></script>  // 这里引入的是我发过的随随机数
<script>

 var tagobj = document.getelementsbyclassname('f-slidefont-tag'),
  offset = true;

 for(var i=0;i<tagobj.length;i++){
  (function(i){
   tagobj[i].onmouseover = function(){
   offset = false;
   index = parseint(this.style.zindex);
   this.style.zindex = 9999;
   }
   tagobj[i].onmouseout = function(){
   offset = true;
   this.style.zindex = index;
   }
  })(i);
 }

 setinterval(preseting,5000)


 function preseting(){
  if(offset){
   for(var i=0;i<tagobj.length;i++){
    tagobj[i].style.left = f_getsjs(200,20,10) + 'px';   //f_getsjs() 来自前面引入的 glunefishlibrary.js ， 具体请移步到我之前的取随机数随笔
    tagobj[i].style.top = f_getsjs(200,20,10) + 'px';
    tagobj[i].style.backgroundcolor = 'rgb(' + f_getsjs(256,-1,5) + ',' + f_getsjs(256,-1,10) + ',' +  f_getsjs(256,-1,15) + ')';
    tagobj[i].style.zindex = f_getsjs(200,0,16);
   }
  }

 }


</script>

此效果主要通过间隔取两数之间的随机数来改变标签的样式。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

上一篇： 雨水气节养生四药膳 醒脾开胃利湿疏肝

下一篇： 肺热容易感冒咳嗽 六款药膳方清肺润肺

推荐阅读