3D云标签

经常会看到PC端网页的首页右边靠下的区块会有一些类似于“云朵‘一样的标签(a标签),鼠标移动上去会有轻微的浮动,每次加载,颜色都不一样,好奇之下,尝试的也写了一个,帮助朋友们做一个类似相关的友情链接时,显得更加有吸引力。

结构(HTML)代码如下:

<div id="tagsList">

<a href="#" title="经分视窗">经分视窗</a>

<a href="#" title="营销健康">营销健康</a>

<a href="#" title="营销健康">营销健康</a>

<a href="#" title="KPI专题" >KPI专题</a>

<a href="#" title="KPI专题">KPI专题</a>

<a href="#" title="经分视窗">经分视窗</a>

<a href="#" title="营销健康">营销健康</a>

<a href="#" title="KPI专题">KPI专题</a>

</div>

行为(jquery)代码如下:

$(‘#tagsList a‘).each(function(index, element) {

var color_arr = ["#ff7f80","#eeb92b","#2884d7","#ff7e12"];

var  n =(Math.floor(Math.random()*color_arr.length));

$(this).css({color:color_arr[n]});

});

/*Math.random():     获取0~1随机数*/

/*Math.floor(Math.random()) 获取想要的一个范围内的整数*/

时间: 2024-10-30 12:07:06

3D云标签的相关文章

Android 3d云标签

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbWluZ3l1ZV8xMTI4/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" >一.自己定义View public class TagCloudView extends RelativeLayout { RelativeLayout navigation_bar; TextView mTextView

3D球状标签云(兼容IE8)

看见一个很有趣的标签云,3D球状,兼容 IE 8,亲测可用!其他版本没有测试.觉得挺有意思就拿来记录下来,学习学习,本文下方会放出我看的文章地址,先看一下效果: 接下来是代码,html + css + js,不是基于jQuery的,所以不需要引入,代码复制下来就可以看到效果: <div id="div1"> <a href="http://www.cnblogs.com/ntt1219/">忘了滋味</a> <a href=

wordpress博客添加3D旋转标签云

为了让自己的博客首页更动感,我们可以添加3D旋转标签云,只需要添加插件即可. 方法如下: 1.登录wp管理后台,选择插件--安装插件,右上角搜索框搜索:WP-Cirrus 找到后选择安装,并启用. 2.外观--小工具--拖动WP-Cirrus到后侧首页功能项里面,保存即可. 3.在WP-Cirrus下拉列表中可以设置标题.标签云的高宽.刷新速度.标签最小值最大值.字体的颜色.背景颜色等等. 4.前提是你的博客中文章设置过标签,否则为空白. 5.刷新首页就能看到旋转的标签云,让你的博客也活泼起来.

JavaScript实现云标签

其实很简单了,这次写了,保存起来,为了防止下次再写重复的代码~~~ <!doctype html> <html> <head> <meta charset="utf-8"> <title>JavaScript实现云标签</title> <style> .box-tags {width:400px;margin:50px auto;padding:20px;border:1px solid #eee;ba

随机色云标签

<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style type="text/css"> *{ margin:0; padding:0 } a{ text-decoration:none } #wrap{ width:400px; margin:auto } </style

非常漂亮js动态球型云标签特效代码

<%@ page contentType="text/html;charset=UTF-8" language="java" import="java.util.*" pageEncoding="UTF-8" %> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <base targe

jquery 云标签

在线预览:https://dwz.cn/UFRBDqV4 原文地址:https://www.cnblogs.com/romanticcrystal/p/12110722.html

android源码大放送(实战开发必备),免费安卓demo源码,例子大全文件详细列表

免费安卓demo源码,例子大全文件详细列表 本列表源码永久免费下载地址:http://www.jiandaima.com/blog/android-demo 卷 yunpan 的文件夹 PATH 列表 卷序列号为 0000-73EC E:. │ jiandaima.com文件列表生成.bat │ 例子大全说明.txt │ 本例子永久更新地址~.url │ 目录列表2016.03.10更新.txt │ ├─前台界面 │ ├─3D标签云卡片热门 │ │ Android TagCloudView云标签

jquery常用代码--(一)

在工作中,常用的特效,其实不是很多.主要分为以下几大类: 1.常见Tab切换                  2.有关输入框 input的简单交互                  3.进度条                 4. Banner切换                 5.可拖拽弹出层                 6.文字超出则省略且显示为点点                 7.内容区内部右边3D云标签 1.常见Tab切换         $(function(){