<!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标签云文字动画特效。这个特效允许用户在鼠标悬停时，使当前选中的标签静止，而其他标签继续保持滚动效果，当鼠标移开时，所有标签恢复滚动。 首先，我们...
"tag标签特效"则是指在显示tag标签时所采用的各种视觉效果，以提升交互性和吸引力。 在描述中提到"使用方便，简单，效果好"，这暗示了这个tag标签特效设计注重易用性和美学。一个优秀的tag标签特效不仅应该使得用户...
本文将深入探讨如何使用JavaScript（JS）来调用和定制CSS样式，从而实现"自己收藏的精美tag标签样式"。 首先，让我们理解JS调用CSS样式的基本原理。JavaScript是一种强大的脚本语言，可以在网页运行时动态地改变...
总结起来，这个压缩包提供了一整套实现JavaScript标签云球形滚动特效的资源，包括HTML结构、CSS样式和JavaScript代码。开发者或网站管理员可以通过导入这些资源，轻松在他们的网站上实现独特的标签展示效果，提升...
总的来说，这个"js制作tag标签文字云特效"是前端开发中一种实用的视觉增强技巧，通过JavaScript技术实现了标签的动态展示，为用户带来了更丰富的交互体验。开发者不仅可以学习到如何创建文字云，还可以借此了解跨...
用js方法实现随机颜色tag标签,每个标签随机输出不同背景颜色，突显字体带阴影效果。查看效果：https://blog.csdn.net/weixin_41934101/article/details/80903785
在这个"JS制作TAG标签云文字动画特效"项目中，我们主要探讨如何利用JS实现一种常见的网页元素——标签云，并为其添加动态效果。 标签云是网站上常见的一种展示关键词或标签的方式，它以不同大小的字体显示各个标签...
JavaScript代码可能包括以下关键部分： 1. 初始化Canvas：获取Canvas元素的2D渲染上下文，设置画布大小，并可能调整其在页面中的位置。 2. 加载数据：可能包含一组预定义的文字标签和相关属性（如颜色、大小、旋转...
《apriltag标签技术详解——聚焦tag36h11》 在计算机视觉领域，apriltag是一种广泛应用的二维图像识别技术，它以其鲁棒性和高效性被广泛应用于机器人导航、无人机定位、自动化物流等领域。其中，tag36h11是apriltag...
Discuz插件 TAG标签自动获取SEO 1.3 商业版 百度优化工具 什么TAG标签? TAG标签是一种由自定义的一种标签，要比分类更加的准确，可以概括主要内容的关键词。运用TAG标签，可以使网站的文章更容易被搜索引擎...
7. **JSTL（JSP Standard Tag Library）**：一套标准的JSP标签库，包含用于迭代、条件判断、XML处理等功能的标签，提高代码的可读性和可维护性。 8. **Servlet与JSP的关系**：JSP最终会被转换成Servlet，由Servlet...
总的来说，这个压缩包提供了一个完整的jQuery tag管理系统，包括前端HTML结构、业务逻辑的JavaScript代码以及样式定义，对于学习jQuery特效和交互设计的开发者来说，这是一个很好的实践案例。同时，由于代码是可二次...
`tag-it.js`是一款轻量级的JavaScript库，专为实现动态标签功能而设计。它允许用户在输入框内输入标签，按下空格键后自动创建，并将新标签添加到已有的标签列表中。该插件提供了一套完整的API，可以方便地进行定制和...
1. **HTML结构**：`demo.html` 文件是网页的基础结构，其中包含了用于显示标签云的容器元素，如 `<div id="tag-cloud"></div>`。这个容器将被JavaScript所操作，添加和更新标签元素。 2. **CSS样式**：虽然描述中未...
在本案例中，"随机滚动的Tag标签"指的是标签会随着时间动态地、随机地滚动显示，增加视觉吸引力和互动性。 "谷歌浑天仪效果"可能是指受到了谷歌早期的一款实验性项目——Google Sky Map（谷歌星空地图）的启发，该...
4. **模板标签调用**：在网站模板中，我们通过预定义的模板标签来调用插件，例如 `{pc:tag action="hot" num="10"}`，这个标签会显示前10个热门标签。 5. **前端展示**：在HTML页面上，我们可以根据设计需求，将...
"织梦tag标签静态化"是针对该系统的一项优化技术，目的是提高网站的加载速度和搜索引擎优化（SEO）效果。 在动态网站中，数据通常是从数据库实时获取并呈现的，这可能导致页面加载速度慢，特别是在高访问量的情况下...
在Android开发中，"标签控件（Tag View）"是一种常用的设计元素，它允许用户以标签形式展示多项信息，常用于分类、筛选或快速导航。本文将深入探讨Android中的标签选择器（Tag Selector）及其使用方法，特别是"tag...
它允许开发者灵活地控制标签的显示方式，比如排列方式、样式以及交互效果，从而在应用中创建出更加独特且易于操作的界面。 首先，我们需要理解自定义标签（Tag）的基本概念。在Android中，标签通常用于表示一种分类...
利用jQuery，开发者可以更高效地编写简洁、高效的JavaScript代码。 ### 刷新功能实现 在本案例中，"刷新"功能是通过监听键盘事件来实现的。当用户按下F5键时，JavaScript会捕获这个事件并触发标签云的更新。这通常...