TAG标签随机排列展示的JS特效代码
日期：2014-05-16 浏览次数：20323 次
TAG标签随机排列显示的JS特效代码
<!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"><a href="#">one</a></span><span class="color_1"><a href="#">two</a></span ><span class="color_2"><a href="#">three</a></span ><span class="color_3"><a href="#">four</a></span ><span class="color_4"><a href="#">five</a></span ><span class="color_5"><a href="#">six</a></span><span class="color_6"><a href="#">seven</a></span></h5>
</fieldset>
</body>
</html>
<!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"><a href="#">one</a></span><span class="color_1"><a href="#">two</a></span ><span class="color_2"><a href="#">three</a></span ><span class="color_3"><a href="#">four</a></span ><span class="color_4"><a href="#">five</a></span ><span class="color_5"><a href="#">six</a></span><span class="color_6"><a href="#">seven</a></span></h5>
</fieldset>
</body>
</html>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
