TAG标签随机排列显示的JS特效代码-JS特效-爱易网页

TAG标签随机排列显示的JS特效代码

日期：2014-05-18　浏览次数：20228 次

以下是程序代码

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>js特效演示</title>
<style>
/*reset css*/
body{font-size:0.8em;letter-spacing:1px;font-family:"\5FAE\8F6F\96C5\9ED1"; 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.aiyiweb.cn</span ><span class="color_5">电子书籍</span><span class="color_6">js.aiyiweb.com</span></h5>
</fieldset>
</body>
</html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

TAG标签随机排列显示的JS特效代码

相关资料更多>

推荐阅读更多>