动态文本文字TAG标签随机变换排列显示的JS特效代码

稿源：互联网 2018-09-03 02:58:56 点击： 7271 撤稿纠错

本随机排列特效是通过Math.random()产生随机数, 再通过sort()进行随机排列.演示如下：

以下讨论的是和随机排列标签动态 TAG相关的动态文本文字TAG标签随机变换排列显示的JS特效代码教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

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

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>js特效演示</title>
<style>
/*reset css*/
body{font-size:0.8em;letter-spacing:1px;font-family:"5FAE8F6F96C59ED1"; line-height:1.8em}
div,h2,p,fieldset,legend,form,textarea,span,em,sub{margin:0;padding:0}
input{font:12px/1.5 tahoma,arial,sans-serif; vertical-align:middle;}
h1{font-size:1em; font-weight:normal;}
h1 a{background:#047; padding:2px 3px; color:#fff; text-decoration:none;}
h1 a:hover{background:#a40000; color:#fff; text-decoration:underline}
h3{color:#888; font-weight:bold;font-size:1em; margin:1em auto; position:relative}
/*demo css*/
fieldset{border:1px solid #ccc;width:720px; padding:15px}
fieldset legend{ background:#a40000; color:#fff;text-align:center; padding:0 8px; margin-left:25px}
h5 span{margin:0 6px;letter-spacing:0; font-weight:normal;font-size:12px; font-family:"Microsoft YaHei"; padding:3px 5px}
.color_0{background:#f09;color:#fff}
.color_1{background:#96C455;color:#fff}
.color_2{background:#4290A6;color:#fff}
.color_3{background:#DFEBF7;color:#000}
.color_4{background:#4B936E;color:#fff}
.color_5{background:black;color:#fff}
.color_6{background:blue;color:#fff}
</style>
<script>
window.onload=function(){
 setInterval('randomFun()',3000)
}
function randomFun(){
 var h5=document.getElementsByTagName('h5')[0]
 var spanItem=document.getElementsByTagName('span');
 var random=function(){return Math.random()>0.5 ? -1 : 1};//为sort()传入的随机排列参数
 var spanArr=new Array();//用来存放元素的数组
 var cssArr=new Array();//用来存放样式值的数组
 var k,m;
 for(var i=0; i<spanItem.length; i++){
  spanArr.push(spanItem[i]);//将元素存入元素数组
  cssArr.push(i);//将对应的下标值存入样式值数组
 }
 spanArr.sort(random);//打乱元素数组排列顺序
 cssArr.sort(random);//打乱样式值数组排列顺序
 for(k=0; k<spanArr.length; k++){
  h5.appendChild(spanArr[k]);//将打乱后的元素重新插入到页面中
 }
 for(m in cssArr){
  spanArr[m].className='color_'+cssArr[m];//将打乱后的样式加给元素
 }
}
</script>
</head>
<body>
<fieldset>
 <legend>元素的随机排列</legend>
 <h5><span class="color_0">阿里西西</span><span class="color_1">网页特效</span ><span class="color_2">建站模板</span ><span class="color_3">知识教程</span ><span class="color_4">www.alixixi.cn</span ><span class="color_5">电子书籍</span><span class="color_6">js.alixixi.com</span></h5>
</fieldset>
</body>
</html>

关于动态文本文字TAG标签随机变换排列显示的JS特效代码的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/2018090379137.shtml方便下次再访问哦。

·上一篇： 原生JS实现杂志页的分页滚动翻页特效代码
·下一篇： 兼容性非常好的简洁TAB选项卡特效代码

动态文本文字TAG标签随机变换排列显示的JS特效代码

文章分类LIST >>返回首页

最新游戏

最新新闻