效果：http://hovertree.com/texiao/js/25/

效果图：

代码如下：

<!DOCTYPE html>

<html>

<head><meta name="viewport" content="width=device-width, initial-scale=1" />

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>HovertreeTags标签云JS特效_何问起</title>

<base target="_blank" />

<style>.hovertreeinfo{text-align:center;margin-top:10px;}

.hovertreeinfo a{color:black;}

</style>

<link href="http://hovertree.com/texiao/js/25/hovertreetags.css" rel="stylesheet" type="text/css" />

</head>

<body>

<div class="hovertreeinfo"><h1>HovertreeTags标签云JS特效</h1></div>

<div id="hovertreetags">

<a href="http://hovertree.com/menu/java/" class="tagc1">Java</a>

<a href="http://hovertree.com/menu/visualstudio/" class="tagc2">Visual Studio</a>

<a href="http://hovertree.com/menu/javascript/" class="tagc5">JavaScript</a>

<a href="http://hovertree.com/menu/php/" class="tagc2">

PHP

</a>

<a href="http://hovertree.com/menu/jquery/" class="tagc2">jQuery</a>

<a href="http://hovertree.com" class="tagc1">何问起</a>

<a href="http://hwq2.com" class="tagc2">hwq2</a>

<a href="http://hovertree.com/menu/texiao/" class="tagc5">网页特效</a>

<a href="http://hovertree.com/menu/csharp/" class="tagc2">C#</a>

<a href="http://hovertree.com/menu/bootstrap/" class="tagc2">Bootstrap</a>

<a href="http://hovertree.com/menu/java/" class="tagc5">Java</a>

<a href="http://hovertree.net" class="tagc2">hovertree.net</a>

<a href="http://keleyi.com/" class="tagc1">柯乐义</a>

<a href="http://keleyi.com/a/bjac/d863921ed93d03ff.htm" class="tagc2">a标签</a>

<a href="http://hovertree.com/h/bjaf/l3c6nm7b.htm" class="tagc5">何问起键盘</a>

<a href="http://hovertree.com/tiku/bjaf/5v9ps30o.htm" class="tagc2">

数组

</a>

<a href="http://tool.hovertree.com/a/base64/" class="tagc2">Base 64</a>

<a href="http://hovertree.com" class="tagc1">HoverTree</a>

<a href="http://hovertree.com/code/css/4u8q30yw.htm" class="tagc2">CSS开门</a>

<a href="http://hovertree.com/code/" class="tagc5">代码</a>

<a href="http://hovertree.com/menu/css/" class="tagc2">CSS</a>

<a href="http://hovertree.com/h/bjaf/c7lmaqjx.htm" class="tagc2">Bootstrap</a>

<a href="http://hovertree.com/tiku/" class="tagc5">题库</a>

<a href="http://hovertree.com/h/bjaf/kqud99m6.htm" class="tagc2">图标旋转</a>

</div>

<div class="hovertreeinfo"><a href="http://hovertree.com/h/bjaf/hovertreetags.htm">原文</a> <a href="http://hovertree.com">首页</a> <a href="http://hovertree.com/texiao/">特效</a>

</div>

<script src='http://hovertree.com/texiao/js/25/hovertreetags.js' type="text/javascript"></script>

</body>

</html>

转自：http://hovertree.com/h/bjaf/hovertreetags.htm

特效库：http://www.cnblogs.com/roucheng/p/texiao.html

原生js文字标签云上下滚动播放的更多相关文章

  1. 原生JS实现banner图的滚动与跳转

    HTML部分: <div id="banner"> <!--4张滚动的图片--> <div id="inside"> < ...

  2. 利用原生JS实现网页1920banner图滚动效果

    内容描述:随着PC设备硬件性能的进步和分辨率的不断提高,现在主流网站逐渐开始采用1920banner图,为适应这一趋势,博主设计了1920banner图的滚动效果,代码利用了原生JS实现了1920ba ...

  3. JS文字特效：彩色滚动变幻效果，只适合少量的文字。（过多对页面有影响）

    JS代码如下: 代码具体是在哪里的我不知道但是我的有道云上有.如有哪位朋友知道,还望联系下,添加出处. <div id="chakhsu"></div> & ...

  4. 原生JS实现返回顶部和滚动锚点

    ;(function (window,doc,undefined) { function rollingAnchor(){ this.timer =''; } rollingAnchor.protot ...

  5. 【转载】 原生js判断某个元素是否滚动到底部

    document.querySelector('.content').addEventListener('scroll',function () { //读取内容区域的真实高度(滚动条高) // co ...

  6. 原生js设置audio在谷歌浏览器自动播放

    https://www.cnblogs.com/sandraryan/ 谷歌浏览器更新后禁止了autoplay功能,但是有时候可能会需要自动播放. 研究了一段代码. <!DOCTYPE html ...

  7. 原生js判断手机端页面滚动停止

    var topValue = 0,// 上次滚动条到顶部的距离 interval = null;// 定时器 contactsList = document.getElementById(" ...

  8. 标签页（tab）切换的原生js,jquery和bootstrap实现

    概述 这是我在学习课程Tab选项卡切换效果时做的总结和练手. 原课程中只有原生js实现,jquery和bootstrap实现是我自己补上的. 本节内容 标签页(tab)切换的原生js实现 标签页(ta ...

  9. 原生JS的使用，包括jquery和原生JS获取节点、jquery和原生JS修改属性的比较

    一.前言 相比于JS这条直达终点.满是荆棘的小路,jquery无疑是康庄大道了,足够的简洁.易用给了它辉煌的地位.然而,毕竟是绕着道的插件,当小路走着走着变成大路的时候,曾经的大路也就失去了他自身的优 ...

随机推荐

  1. 解读ASP.NET 5 & MVC6系列（7）：依赖注入

    在前面的章节(Middleware章节)中,我们提到了依赖注入功能(Dependency Injection),ASP.NET 5正式将依赖注入进行了全功能的实现,以便开发人员能够开发更具弹性的组件程 ...

  2. 安卓动态调试七种武器之离别钩 – Hooking（上）

    安卓动态调试七种武器之离别钩 – Hooking(上) 作者:蒸米@阿里聚安全 0x00 序 随着移动安全越来越火,各种调试工具也都层出不穷,但因为环境和需求的不同,并没有工具是万能的.另外工具是死的 ...

  3. 剑指Offer面试题：26.字符串的排列

    一.题目:字符串的排列 题目:输入一个字符串,打印出该字符串中字符的所有排列.例如输入字符串abc,则打印出由字符a.b.c所能排列出来的所有字符串abc.acb.bac.bca.cab和cba. 二 ...

  4. MySQL InnoDB存储引擎

    200 ? "200px" : this.width)!important;} --> 介绍 本篇文章是对Innodb存储引擎的概念进行一个整体的概括,innodb存储引擎的 ...

  5. 《3D Math Primer for Graphics and Game Development》读书笔记2

    <3D Math Primer for Graphics and Game Development>读书笔记2 上一篇得到了"矩阵等价于变换后的基向量"这一结论. 本篇 ...

  6. Windows Azure Storage (21) 使用AzCopy工具，加快Azure Storage传输速度

    <Windows Azure Platform 系列文章目录> Update 2016-09-28 想要在Azure云端,使用AzCopy工具,从Azure China 上海数据中心存储账 ...

  7. C语言 · 打印1-200之间的素数

    素数定义:除了1和本身再无其他整数可被其本身整除的数称为素数,也称质数. 举一例子打印出1-200之间所有的素数: #include<stdio.h> #include<math.h ...

  8. xamarin 手机顶部状态栏

    修改显示xamarin开发的App的手机顶部状态栏, 步骤一:在项目UWP上的“引用”里右键“添加引用”,选择->Universal Windows->Windows Mobile Ext ...

  9. Sublime Text3 配置 NodeJs 环境

    前言 大家都知道,Sublime Text 安装插件一般从 Package Control 中直接安装即可,当我安装 node js 插件时候,直接通过Package Control 安装,虽然插件安 ...

  10. TSQL Merge On子句和When not matched 语义理解

    Merge 的On子句指定Match condition,When子句指定过滤条件,如果Source Table和Targe Table匹配的上,很好理解:如果匹配不上,必须深入理解不匹配的条件,否则 ...