效果：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. ABP理论学习之Web API控制器（新增）

    返回总目录 本篇目录 介绍 AbpApiController基类 本地化 审计日志 授权 工作单元 其他 介绍 ABP通过Abp.Web.ApiNuget包集成了 ASP.NET Web API控制器 ...

  2. UI控件（UITextView）

    @implementation ViewController - (void)viewDidLoad { [super viewDidLoad]; //UITextView与UITextField主要 ...

  3. log4j.xml的实用例子

    大多数讲log4j配置的教程用的都是log4j.properties文件,我觉得xml或许更好一点,在这里我提供一个我已经用于生产环境的log4j.xml的例子,先上代码,然后再解释: <?xm ...

  4. .Net组件程序设计之上下文

    .Net组件程序设计之上下文 在后续篇幅的远程调用的文章里有说到应用程序域,那是大粒度的控制程序集的逻辑存在,那么想对对象的控制又由谁来做主呢?没错了,就是上下文.CLR把应用程序域更细化了,在应用程 ...

  5. Mint linux 自定义上下文菜单实现ZIP压缩文件无乱码解压

    1. 前提条件 我的Mint Linux 是Thunar文件管理器(默认的). 2. 配置自定义动作 打开Thunar文件管理器,点击菜单“编辑”=>“配置自定义动作”.点击“+”添加一个新的. ...

  6. Ubuntu 16 安装ElasticSearch

    首先安装Java,参见博客:http://www.cnblogs.com/1zhk/p/6056406.html 下载ElasticSearch安装包 curl -L -O https://artif ...

  7. WPF入门教程系列十七——WPF中的数据绑定(三)

    四. XML数据绑定 这次我们来学习新的绑定知识,XML数据绑定.XmlDataProvider 用来绑定 XML 数据,该XML数据可以是嵌入.Xmal文件的 XmlDataProvider 标记中 ...

  8. Referenced file contains errors (http://www.springframework.org/schema/context). For more information, right click on the message in the Problems

    spring 配置文件的DTD或schema出问题,一般两种情况: 1.当前网络环境不稳定,按住ctrl+"http://www.springframework.org/schema/con ...

  9. 【WP8.1开发】RenderTargetBitmap类的特殊用途

    相信,耍过WPF的人都知道RenderTargetBitmap这个玩意儿,这家伙比较有意思,它可以将用户界面上呈现的东西写入到内存的位图对象,从而开发者可以在应用程序中使用它,或者将其保存为图像文件. ...

  10. jQuery 2.0.3 源码分析 Deferred概念

    JavaScript编程几乎总是伴随着异步操作,传统的异步操作会在操作完成之后,使用回调函数传回结果,而回调函数中则包含了后续的工作.这也是造成异步编程困难的主要原因:我们一直习惯于“线性”地编写代码 ...