<!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>
分享到：
相关推荐
JS制作TAG标签云文字动画特效是一款当鼠标悬停某个标签时，当前标签静止，移出恢复滚动效果。
用js方法实现随机颜色tag标签,每个标签随机输出不同背景颜色，突显字体带阴影效果。查看效果：https://blog.csdn.net/weixin_41934101/article/details/80903785
JS制作TAG标签云文字动画特效是一款当鼠标悬停某个标签时，当前标签静止，移出恢复滚动效果。
apriltag 标签 tag36h11
tag标签特效 很好的，使用方便，简单 效果好
本文主要介绍了tag标签随机多彩变化的超链接样式，使用JQ+DIV+CSS实现刷新随机变化样式特效。具有很好的参考价值，下面跟着小编一起来看下吧
js制作tag标签文字云特效，适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗。
jQuery Tag文本标签特效是一款可自定义输入标签，也可按已有的标签选择添加。
谷歌浑天仪效果/随机滚动的Tag标签，支持汉字显示。
//设置当前显示哪一个标签 mTabHost.setCurrentTab(0); //标签切换事件处理，setOnTabChangedListener mTabHost.setOnTabChangedListener(new OnTabChangeListener() { // TODO Auto-generated ...
1Flash标签云 index.html页面里有tagcloud.swf和tagcloud.xml两个文件的连接,但是测试只能使用http的方式,不能使用文件夹路径, 所以使用时把tagcloud.swf和tagcloud...另外还有一个Javascript开发的标签云Js标签云.html
Discuz插件 TAG标签自动获取SEO 1.3 商业版 百度优化工具 什么TAG标签? TAG标签是一种由自定义的一种标签，要比分类更加的准确，可以概括主要内容的关键词。运用TAG标签，可以使网站的文章更容易被搜索引擎...
js 调用 css 样式齐全，自己一直收藏的，把调用图片可以修改成自己需要的颜色，非常漂亮。
IC卡Tag标签含义详解对照表，对金融IC卡中各个标签的长度、格式、值、含义等以表格的形式进行了说明及解释。
使用SWFObject引用tagcloud.swf时，通过addVariable方法，给其传入tagcloud参数，此参数的值即为标签云需要显示的内容，注意传给 tagcloud 的值必需进行URL编码，可以使用JS的 encodeURIComponent 函数对字符串进行...
织梦tag标签静态化赶紧下载吧。支持utf和gbk的
Android 标签控件 标签选择 tag 具体效果 http://blog.csdn.net/qq_21036939/article/details/50675612
<tagclass>org.whatisjava.mvc.taglib.HelloTag</tagclass> <!--用于规定标记体的内容--> <bodycontent>empty <!-- 以下用于声明该标记的属性（可以有多個） --> <name>times <required>true ...
tag-it.js输入框创建标签代码是一款基于jQuery实现的输入框输入文字空格键创建标签插件。
git tag 按字母排序显示标签 git tag v1.01 打上v1.01这个标签 git show v1.01 显示这个标签的详情 可以同时打多个tag指向同一个时间点上的版本 git push origin –tags 推送本地所有新增标签到远端 ps：下面看下git...